uikit框架
虽然Bootstrap和Foundation可能是Web设计人员中最流行的两个前端框架,但在本文中,我将向您介绍UIkit的功能, UIkit是一个轻量级的模块化前端框架,几乎所有我都使用了它。项目。
注意 :本文假定您熟悉前端框架的工作方式。 同样,本文的主要目标不是涵盖该框架的各个部分(例如网格系统)。 相反,我们将专注于简要介绍不同的有用的UIkit功能。
入门
UIkit由德国公司YOOtheme构建和维护, YOOtheme是一家专门构建Web主题和应用程序的公司。
如何下载UIkit
有几种不同的选项可用于在项目中包含UIkit。 您可以使用像Bower这样的包管理器,或者像cdnjs这样的内容交付网络,也可以从其GitHub页面手动下载它。 请注意,UIkit需要jQuery ,因此请确保已将其包含在项目中。
就本教程而言,我们将使用cdnjs将所需的UIkit文件拉入CodePen演示中。 为了简单起见,大多数时候我们都必须包含uikit.min.css
和uikit.min.js
文件。 在最后两个示例中,我们还将添加一些其他文件 ,这些文件未包含在核心框架中。 请记住,UIkit是模块化的,允许我们仅加载实际需要的文件。
您可以在此页面上了解UIkit的结构。
自定义UIkit
该框架是完全可定制的 。 在下载之前,我们可以覆盖其默认样式并应用我们自己的样式。 例如,如果要更改默认断点 ,可以访问定制器页面并选中“ 高级模式”选项。 从那里,我们找到Breakpoints部分,并添加我们的新断点。 然后,我们获得了新生成CSS文件。
浏览器支持
UIkit可在所有最新的浏览器中使用,特别是:
有用的UIkit功能
现在是时候探索一些有用的UIkit功能了,您可能希望在即将到来的项目之一中使用它们!
Flexbox和网格
UIkit提供了用于构建响应式布局的Grid和Flex组件。 为了更好地理解这些组件的工作方式,让我们创建一个简单的布局。 在此之前,我们必须将uikit.min.css
文件添加到我们的示例中。
要求如下:
- 在最大767像素宽的视口中,所有列均垂直堆叠。
- 在大于767像素的视口上,第一和第三列的宽度为父级宽度的25%,而第二列的宽度为父级宽度的50%。
标记如下所示:
<div class="uk-container uk-container-center">
<div class="uk-grid">
<div class="uk-width-medium-1-4">
<div class="card">
<!-- content here -->
</div>
</div>
<div class="uk-width-medium-1-2">
<div class="card">
<!-- content here -->
</div>
</div>
<div class="uk-width-medium-1-4">
<div class="card">
<!-- content here -->
</div>
</div>
</div><!-- /uk-grid -->
</div><!-- /uk-container -->
注意我们列中的.card
元素。 出于风格原因,我们将应用一些基本样式:
.card {
background: #e0e0e0;
padding: 10px;
margin-top: 35px;
}
这是Codepen演示:
从上面的演示中可以看到(当视口宽度大于767px时) .card
元素不会填充父对象的整个高度。 假设我们要实现这一目标。
一种快速的解决方案是将目标元素的height: 100%
,对吗? 但是,这在某些浏览器(例如Safari)中不起作用,因此我们必须放弃该方法并寻找替代方法。 一种技巧是通过为列指定uk-flex
来将其定义为flex容器。 因此,现在如果再次测试页面,我们将看到.card
元素继承了父级高度。 如果您想了解有关该解决方案为何起作用的更多信息,建议您查看此Stack Overflow线程 。
这是更新的演示:
创建基于滚动的动画
如果您是基于滚动的动画的粉丝,那么您一定会喜欢UIkit的Scrollspy组件。 此组件使我们可以在上下滚动页面时触发动画和事件。 让我们看一个生动的例子来了解它是如何工作的。
对于此示例,我们将在项目中包含uikit.min.css
和uikit.min.js
文件。
代码结构与前面的示例相似。 我们的目标是在具有blue
类别的元素(总共五个元素)进入视口时触发不同的动画。 为了实现此行为,我们将data-uk-scrollspy
属性添加到目标元素。 它们的值是控制实际动画的可配置对象 。 例如, cls
对象属性存储动画类型 :
<div data-uk-scrollspy="{cls:'uk-animation-slide-left', repeat: true, delay: 300}">
所需标记的一部分如下所示:
<div class="uk-container uk-container-center">
<div class="uk-grid">
<!-- content here -->
<div class="uk-width-medium-1-2 uk-flex">
<div class="card blue" data-uk-scrollspy="{cls:'uk-animation-slide-left', repeat: true, delay: 300}">
<!-- content here -->
</div>
</div>
<div class="uk-width-medium-1-2 uk-flex">
<div class="card blue" data-uk-scrollspy="{cls:'uk-animation-slide-right', repeat: true, delay: 300}">
<!-- content here -->
</div>
</div>
<!-- content here/more animations -->
</div><!-- /uk-grid -->
</div><!-- /uk-container -->
这是相应的Codepen演示:
操纵SVG
UIkit提供了一种方便的方法来控制SVG的外观。 不必使用内联data-uk-svg
使HTML膨胀,可以使用img
标签加载data-uk-svg
,然后将data-uk-svg
属性添加到这些标签。 这样,图像将转换为嵌入式SVG,我们可以稍后对其进行操作。 如果将uikit.min.js
文件添加到我们的项目中,则可能会发生这种情况。
SVG的标记非常简单,如下所示:
<img src="IMAGE_PATH" alt="" data-uk-svg>
现在在CSS中,我们可以对其进行自定义。 例如,在我们的案例中,我们更改了一些基本样式:
svg {
width: 100px;
height: auto;
fill: maroon;
}
Codepen演示:
自适应背景图片
有时候,我们希望背景图片采用img
标签的响应行为。 为此,我们可以利用UIkit的Cover组件。 因此,首先我们将uk-invisible
类添加到img
标签,然后将其包装在具有uk-cover-background
类的父元素中。 接下来,可选地,我们可以使用Utility和Flex组件将内容放置在背景图像的顶部。
为了使其正常工作,我们必须在项目中包含uikit.min.css
文件。
考虑到这一点,要创建响应式背景图像,其内容在垂直和水平方向居中,我们需要如下所示HTML:
<div class="uk-cover-background uk-position-relative">
<img class="uk-invisible" src="IMAGE_PATH" alt="">
<div class="uk-position-cover uk-flex uk-flex-center uk-flex-middle">
<!-- content here -->
</div>
</div>
在我们CSS中,我们现在必须为顶级父对象指定背景图片(当然,我们也可以添加一个内联背景图片):
div.uk-cover-background {
background-image: url(IMAGE_PATH);
}
这给我们以下结果:
创建叠加
UIkit提供了Overlay组件来帮助构建图像叠加层。 这个组件的真正好处是这些叠加层以不同的样式出现,并提供许多有趣的选项。
对于此行为,唯一必需的文件是uikit.min.css
。 下面显示了构建四个叠加层所需的标记的示例:
<div class="uk-container uk-container-center">
<div class="uk-grid">
<div class="uk-width-small-1-2 uk-width-medium-1-4">
<figure class="uk-overlay uk-overlay-hover">
<img src="IMAGE_PATH" alt="">
<figcaption class="uk-overlay-panel uk-overlay-background uk-overlay-bottom uk-overlay-slide-bottom">
<!-- content here -->
<a class="uk-position-cover" href=""></a>
</figcaption>
</figure>
</div>
<div class="uk-width-small-1-2 uk-width-medium-1-4">
<figure class="uk-overlay uk-overlay-hover">
<img src="IMAGE_PATH" alt="">
<figcaption class="uk-overlay-panel uk-overlay-background uk-overlay-top uk-overlay-slide-top">
<!-- content here -->
<a class="uk-position-cover" href=""></a>
</figcaption>
</figure>
</div>
<div class="uk-width-small-1-2 uk-width-medium-1-4">
<figure class="uk-overlay uk-overlay-hover">
<img src="IMAGE_PATH" alt="">
<figcaption class="uk-overlay-panel uk-overlay-background uk-overlay-left uk-overlay-slide-left">
<!-- content here -->
</figcaption>
</figure>
</div>
<div class="uk-width-small-1-2 uk-width-medium-1-4">
<figure class="uk-overlay uk-overlay-hover">
<img src="IMAGE_PATH" alt="">
<figcaption class="uk-overlay-panel uk-overlay-background uk-overlay-right uk-overlay-slide-right">
<!-- content here -->
</figcaption>
</figure>
</div>
</div><!-- /uk-grid -->
</div><!-- /uk-container -->
不要害怕上面的代码。 大量归功于我们添加到图像中的许多帮助程序类。 为了更好地理解,请务必阅读此组件的文档。
这是嵌入式Codepen演示:
创建响应式全屏幻灯片
幻灯片组件是最酷的UIkit组件之一。 这使我们能够创建(看是否能猜到)漂亮的响应式幻灯片。 为了演示它,让我们构建一个响应式全宽度幻灯片。
这是我们需要的UIkit文件:
-
uikit.min.css
-
slideshow.min.css
-
slidenav.min.css
-
uikit.min.js
-
slideshow.min.js
幻灯片的代码如下所示:
<div class="uk-slidenav-position" data-uk-slideshow="{autoplay:true, kenburns:true, pauseOnHover: false}">
<ul class="uk-slideshow uk-slideshow-fullscreen">
<li>
<img src="IMAGE_PATH" alt="">
</li>
<li>
<img src="IMAGE_PATH" alt="">
</li>
<li>
<img src="IMAGE_PATH" alt="">
</li>
</ul>
<a href="" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous"></a>
<a href="" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next"></a>
</div>
这里有两件事值得一提:
-
data-uk-slideshow
属性的值是一个可配置的对象 ,它确定幻灯片的外观。 - 当我们将鼠标悬停在幻灯片上时,将显示导航箭头。 这是可选的,感谢Slidenav组件,我们已经实现了它。 同样,我们可以使用Dotnav组件生成点导航。
看看下面的相关Codepen演示:
创建粘性标题
另一个有用的组件是粘性组件。 让我们通过创建一个粘性标头来了解它的作用。
同样,这是必需的UIkit文件:
-
uikit.min.css
-
sticky.min.css
-
uikit.min.js
-
sticky.min.js
在标记中,我们将data-uk-sticky
属性添加到header
元素。 另外,仅出于风格原因,我们使用导航栏组件构建导航栏。
这是HTML代码的一部分:
<!-- content here -->
<header data-uk-sticky>
<div class="uk-container uk-container-center">
<nav class="uk-navbar">
<ul class="uk-navbar-nav">
<li class="uk-active">
<a href="">Home</a>
</li>
<!-- three more list items here -->
</ul>
</nav>
</div>
</header>
<!-- content here -->
在此示例中,我们没有将任何值传递给data-uk-sticky
属性。 但是,如果我们想要定制粘元素的默认行为,我们要修改的对象是作为一个值,这个属性通过。
相关的Codepen演示:
结论
我希望您喜欢UIkit的快速哨响之旅,并了解了我们可以使用这个惊人的框架构建的想法。 当然,还有很多其他很棒的组件可供我们使用,因此,我鼓励您进一步研究。 最后但并非最不重要的一点是,新UIkit版本(v.3)将在未来几个月内推出,其功能更加有趣。 敬请关注!
如果您对UIkit有任何疑问,请在下面的评论中告诉我。
uikit框架