CSS 框架替代指南（一）-CSDN博客

原文：CSS Framework Alternatives

协议：CC BY-NC-SA 4.0

一、为直观的网页设计选择轻量级框架

什么是框架？

A framework is a premeditated set of concepts, modules, and standardized criteria that make the task of developing web sites and web applications easier. It provides generic functionality with already written modules and tailored components created in a standard manner. In short, it is a reusable software environment that allows web designers and developers to easily build their projects and solutions with minimal coding and without worrying about the low-level details. This reduces development time and provides easy upkeep and alterations whenever necessary. Usually, there are two kinds of frameworks .

前端框架(CSS 和 JavaScript 框架)
后端或服务器端编程框架

While back-end frameworks are used by web developers and programmers to build applications on the server-side, front-end frameworks are used by web designers and developers for implementing the Cascading Style Sheets language. In this book, you will get a glimpse into front-end frameworks, which basically are pre-prepared packages containing the structure of files and folders of Hypertext Markup Language (HTML) and CSS documents (some with JavaScript functions), which help designers and developers build interactive and immersive web sites. Frameworks allow you to use a common standardized structure that cuts out much of the groundwork of writing code from scratch and helps you reuse components, modules, and libraries, freeing you up to focus on core tasks at a high level.

CSS 框架的组件

The following are the basic components of a CSS framework:

网格(帮助组织内容和设计布局的结构)
排版元素
跨浏览器兼容性
用于定位元素的帮助器类
实用程序类别
导航元素
用 Sass 等预处理程序编写的源代码
媒体元素(徽章、工具提示、评论等)

使用 CSS 框架的优势

Though some people have advocated not using CSS frameworks, mainly because of issues such as bloated structure, ingrained HTML markup, and a common aesthetic across framework-based web sites, using a CSS framework has several benefits. You should try using a CSS framework for the following reasons:

干净一致的编码
跨浏览器兼容性
基于网格的设计
整合健康编码实践的能力
易于构建的原型
易于维护和保养
允许重用和干净的同质代码结构
易于扩展和修改
可靠的文件
构建沉浸式网站的共同基础
易接近

A budding developer can find it difficult to build web sites just based on pure HTML, CSS, and JavaScript. In addition, grid-based layouts help budding designers to position, structure, and design the layout quite easily. You do not have to reinvent the wheel, meaning you can get some hands-on experience without the intricacies and dilemmas that you will come across when you code from scratch. Good and clean coding practices are imperative when you grow as a web designer, and frameworks are all about awesome cohesiveness and consistent coding that will hold you in good stead in times to come.

各种流行的框架

In this section, you will look at the most popular frameworks used by web designers across the globe. The most popular frameworks for designing web sites are Bootstrap, Foundation, and Materialize. Which one a developer chooses depends on the needs and requirements of a web site and its design. However, just because a framework is popular doesn’t mean it fits the bill when it comes to designing your projects. You need to consider several issues when it comes to selecting a framework; we’ll talk more about that later. Let’s now take a look at the various superlative frameworks that are in vogue today.

引导程序

Bootstrap is the most popular mobile-first framework in web design; it’s used extensively by developers across the globe (Figure 1-1). You can find more information on the official web site at getbootstrap.com/ . 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 Figure 1-1Bootstrap Bootstrap adopts a mobile-first paradigm by which you can build responsive web sites. It comes with components, modules, JavaScript functions, and media queries that help developers build immersive web sites with ease.

基础

Foundation was the earliest responsive framework and is as massive and advanced as Bootstrap for building web products and services (Figure 1-2). Foundation comes with cool features such as Flex Grid and Motion UI . The latest version, Foundation 6, is quicker, is lighter in size compared to its earlier versions, and is a solid front-end framework for designing beautiful web sites, e-mails, and apps that look good on any device. You can find more information on the official web site at foundation.zurb.com/ . 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 Figure 1-2 Foundation

实现

Materialize is a modern front-end framework based on Google’s Material Design philosophy that helps developers build and design immersive web sites (Figure 1-3). You can find more information on the official web site at materializecss.com/ . 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 Figure 1-3Materialize Materialize has a superlative, creative user interface (UI) component library that incorporates cross-browser compatibility and device-agnostic capabilities for developing attractive and consistent web sites.

骨骼

As mentioned earlier, sometimes you don’t need a large framework, especially if you are embarking on a small project. Skeleton is a simple, responsive boilerplate and is extremely lightweight with 400 lines of code and with a mobile-based philosophy (Figure 1-4). You can find more information on the official web site at getskeleton.com/ . 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 Figure 1-4Skeleton

Milligram

Milligram is a minimalistic framework with just enough styles for small and interactive web sites (Figure 1-5). Its zipped file size is only 2KB. It comes with a mobile-first philosophy and supports the modern browser versions of Chrome, Firefox, Safari, IE, and Opera. Its cutting-edge features include the FlexBox grid system, and it is a simple, top-notch framework from a usability point of view. You can find more information on the official web site at milligram.io/ . 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 Figure 1-5 Milligram

UIkit

UIkit is a light and modular front-end framework for developing faster and powerful web interfaces (Figure 1-6). It has a massive collection of HTML, CSS, and JavaScript components and modules that can be extended with themes. It is flexible because it can be customized to give a unique feel to your web sites. You can find more information on the official web site at getuikit.com/v2/ . 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 Figure 1-6UIkit

材质设计精简版

Google released its own front-end framework called Material Design Lite (MDL) that is based on its Material Design philosophy (Figure 1-7). MDL is a lightweight framework with few dependencies and is focused on simple web sites such as blogs and landing pages. It allows you to customize styles and web sites designed using MDL degrade gracefully in legacy browsers. You can find more information on the official web site at getmdl.io/ . 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 Figure 1-7Material Design Lite

Susy！Susy

In today’s era of agile development and constant changes, the layout designs are crucial and cannot be restricted to a single framework, especially if your web site is intricate design-wise. With Susy (Figure 1-8), the settings are not set in stone, meaning you can use its integrated Sass-based libraries to create immersive layouts with potent structural designs. Susy is not a typical framework but more of a UI utility as it simplifies and streamlines the task of designing intricate grid layouts. You can find more information on the official web site at susy.oddbird.net/ . 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 Figure 1-8 Susy

选择框架

As you can see, we have covered many popular frameworks. Choosing the right framework is quite important and depends on the needs and requirement of your projects. Some frameworks are bloated, meaning they have too many built-in styles, which might not be required for a small project. The following are some of the factors that you should consider when choosing a framework:

一个现有的 web 项目可能已经在使用一个特定的框架，而该框架不能与您想要的框架一起使用。
对于与性能相关的问题，一些项目可能不需要与重量级框架相关的混乱。
您可能需要不同的预处理器支持，比如对于 LESS 或 Sass，它们没有与您想要的框架集成。
使用特定框架构建的网站可能看起来很相似，如果没有进行定制以提供真实的外观和感觉的话。

There are several other factors such as the ease of use, speed of configuration, usability, features, widgets, components, long-term support, and reliability that you need to consider when choosing a framework. In summary, you need to choose your framework based on the requirements and needs of the project; especially when choosing lightweight front-end kits for small projects, given the bloat and bulk associated with massive frameworks.

网格的概念

A grid system allows you to structure and stack content horizontally and vertically in an easy manner. It is easily adaptable for any web site or web application and has a lot of advantages. It is usually responsive, meaning it adjusts itself based on the browser or device width. So, it displays the content appropriately in a mobile device, a laptop, a tablet, or a desktop depending on the size of the device. Plus, you have media queries, which help you define the grid layout based on the device width. Grids are usually 12-column containers in many frameworks but can be customized using methods specific to the framework. You can have flexible layouts wherein you can divide the page into several regions and place content using the markup. Another concept catching on in CSS designs is the FlexBox . The difference between a grid and FlexBox layout is that grid layouts are two-dimensional, while a FlexBox is usually one-dimensional wherein you can lay out content in a row or a column. The choice of using a grid layout or a FlexBox depends on how you want to structure your content. With a FlexBox you space out the content and build a structure using that content. Suppose you have certain items; it is up to you to decide how much space each item should take. Grid layouts, on the other hand, are content-agnostic. In grid layouts, you create a layout and place the content into rows and columns. In most modern frameworks, both the grid and the FlexBox are supported. While the usability of the grid layout is awesome, a FlexBox can help you place things more aesthetically. For a detailed explanation of the grid concept , you can refer the Mozilla developer network web site, specifically the following web page, for in-depth information: developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout .

摘要

In this chapter, we gave you an overview of some popular CSS frameworks. We also covered the benefits of using a CSS framework. CSS frameworks are comprised of components, modules, libraries, navigational elements, typography, media queries, tailor-made widgets, and grid layouts that make web design a breeze. We also gave you an overview of grid and FlexBox layouts. We will now dedicate a chapter for each of the frameworks mentioned in the introduction of the chapter, starting with Skeleton. With each chapter, we use a progressive approach, meaning the next framework is more extensive and a framework’s resourcefulness increases as you move through the book.

二、使用框架构建登录页面

安装骨架

To get started, go to the Skeleton web site at getskeleton.com/ . You will see the Download button, which is highlighted in a red box in Figure 2-1. 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 Figure 2-1Skeleton download page Click Download to download the Skeleton .zip file. After unzipping the file, you will see the file structure shown in Figure 2-2. Figure 2-2 Content of the Skeleton framework The css folder is where you save your CSS files . By default, the css folder contains the Normalize and Skeleton style sheets. Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements. It makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing. You can find more information about Normalize on the official web site at necolas.github.io/normalize.css/ . You can also see the images folder where you can store your images. By default, the images folder contains the favicon image for Skeleton. The index.html file is your default web page. When you edit the page in Notepad++ or any editor, you will see the code displayed in Listing 2-1. Your page title here 😃 <!—FONT –––––––––––––––––––––––––––––––––––––––––––––-–– --> <!—CSS –––––––-––––––––––––––––––––––––––––––––––––––––– --> <!—Favicon ––––––––––––––––––––––––––––––––––––––––––––– -->

Basic Page

This index.html page is a placeholder with the CSS, font and favicon. It’s just waiting for you to add some content! If you need some help hit up the Skeleton documentation.

Listing 2-1Basic Skeleton Example Now click the index.html file to display the web page, as shown in Figure 2-3. 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

Figure 2-3Skeleton basic example in a browser

骨架网格系统

Like most other frameworks, Skeleton has its own grid system. It is essentially a 12-column grid with a maximum width of 960px. It is a responsive grid that adjusts itself depending on the browser/device size. Take a look at the code snippet in Listing 2-2 to understand how the grid system works.

One

Eleven

Two

Ten

Three

Nine

Four

Ten

Five

Seven

Six

Seven

Five

Eight

Four

Nine

Three

Ten

Two

Eleven

One

</div

Listing 2-2Skeleton Grid System Demonstrated In Listing 2-2, you define a element within which you define a

with the container class. Inside that, you define the

with the row class. Within that

, you define two

s, one with a column width of one column and other with a column width of eleven columns. Remember that the

with the column classes should be the immediate child of the

with the row class. To define one column, you use the one column class. Similarly, to define eleven columns, you use the eleven columns class. For two columns, the class is two columns. Note that you use an inline CSS style of <style=“text-align:center; border: 1px solid black;”> with each column to align the text in the center and dedicate a black border of 1px for each column. You use the
element for spacing between each row. Basically, the code in Listing 2-2 defines different rows with a

class and defines columns of different widths. Figure 2-4 shows the output of the code on execution. 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

Figure 2-4Skeleton grid system demonstrated As you can see in Figure 2-4, the first row has two columns defined with widths of one and eleven columns, respectively. The second row has two columns with widths of two and ten columns , respectively. Similarly, you define eleven rows each with two columns of varying widths. Now you have an idea how the grid system works in Skeleton.

骨骼属性概述

Let’s take a look at some attributes of the Skeleton framework.

Skeleton 的排版基础是 Raleway，一个基于 Google 的排版。字体大小默认为 HTML 的字体大小，版式保留类似于 HTML 基本版式的属性，如锚点、粗体、强调和下划线。
骨架中的按钮可以使用 button-primary 类创建，这很容易区分。如果不想要增强按钮，也可以选择标准按钮。为此，您只需使用 button 类，而不是 button-primary。您还可以使用元素定义一个按钮，或者在 button 或 button-primary 类中使用一个锚标记
使用
代码样式可以通过使用`类来设置。对于几个代码块，可以在一个
```
元素中使用元素。
```
Skeleton 中的表格类似于 HTML 表格，其中使用了和元素。与 HTML 类似，使用定义表格行，定义表格数据，定义表格标题；您将所有内容包装在主元素中。
Skeleton 使用以最小宽度为目标的移动优先查询。查询之外的样式适用于所有设备。这样做是为了防止手机和平板电脑等小型设备解析大量未使用的 CSS。框架根据设备大小使用以下媒体查询大小:
- 手机:400 像素
- Phablet: 550px
- 平板电脑:750 像素
- 桌面:1000 像素
- HD 桌上型电脑:1200px

Skeleton also comes with many helper classes that can be used to limit the elements within a container , float the element to the left or right, and clear the floats on both sides.

用框架构建登陆网页

In this section, you will create a landing page for a freelance portal called RemoteDesk . The landing page shows the various things you can do on the freelance portal. You will design a web page that shows several aspects of the freelance portal along with company information and other basic features. We will divide the process of building the web page into six Steps. After these six Steps, you will have a complete landing page.

步骤 1:定义内容区域

You will define the tags and then move on to include the necessary links for Skeleton and Normalize (included by default in Skeleton) and the custom style sheet in the tags (more about that in the code explanation). Then you will define the section after the tags and within the tags. Inside the tags, you will define the

class with the necessary rows and columns with the required content. Essentially, each content area will be encapsulated in an element with the row class. Depending on the content, you will divide the area into sections using elements with the columns class in that section’s parent row. Let’s look at Listing 2-3. Best Freelance management app

RemoteDesk.com

Listing 2-3Defining the Content Area As you can see in Listing 2-3, you define the viewport size inside the head section. A viewport controls the way a web page is displayed on a mobile device. If you do not use a viewport, a mobile device will render the page in a typical desktop screen width. Setting a viewport helps you exercise control over a page’s width and scaling on varied devices. You can find more about viewports at developers.google.com/speed/docs/insights/ConfigureViewport . Then, by default in Skeleton, you set the links for Normalize and Skeleton. Remember that if the path to your files is different, you need to specify so. For now, they should be in the root folder , so the default path is good to go. Then you define the path for the custom style sheet called as style.css , which you will place in the css folder. You define a tag and assign the container class to it. The container is the main centered wrapper. You define a

element and assign a row class to it. Inside that

element, you define three

s. The first

contains the content RemoteDesk.com and spans two columns. The next

spans eight columns, and you assign the value between the

tags. Essentially, &nbsp creates a nonbreaking space. It is used in programming and web design to create a space in a line that cannot be broken with word wrap. Using it will help create multiple spaces that are visible on a web page and not only in the source code. (We are using this because there are no offset classes in Skeleton compared to other frameworks like Bootstrap and Foundation.) The third

spans two columns and contains the Sign Up button, which we create using the button-primary class. Figure 2-5 shows the output of the code. 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

Figure 2-5The output of the content area

步骤 2:完成标签内容

Now, you will create the rest of the content within the tags. You will start with inserting an image, as shown in Listing 2-4. (Refer to the entire code in the code bundle to see the positioning of the various elements; we have included code in steps in the code bundle so that you can have a better understanding of each step. Finally, index.html contains the entire code for the landing page.)

Listing 2-4Inserting the Header Image You have just used the row class and assigned a class called masthead to it. The image is defined in the code in the style sheet called Style.css. The image referred to, masthead.png, is located in the images folder where you will keep all the images. In style.css, you define the code, as shown in Listing 2-5. .masthead{ background: url(“img/masthead.png”) no-repeat center; height: 462px; background-size: cover; } Listing 2-5Inserting Header Image Remember that the code shown in Listing 2-5 is the code in the custom CSS style sheet called style.css . You assign a height of 462px and center the image. You also assign the value cover to the background-size property; this scales the background image to be as large as possible so that the background area is fully covered by the image. Now on executing the index.html page , you will get the output shown in Figure 2-6. 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

Figure 2-6Output of the header image

步骤 3:定义自由职业门户

Next, you will create a later section of the page where you define the features of the freelance portal . To create this section, let’s look at the code snippet shown in Listing 2-6.

Plenty of rewarding projects

RemoteDesk is a great place to find more clients, and to run and grow your own freelance business.

Freedom to work on ideal projects. On RemoteDesk, you run your own business and choose your own clients and projects. Just complete your profile and we’ll highlight ideal jobs. Also search projects, and respond to client invitations.
Wide variety and high pay. Clients are now posting jobs in hundreds of skill categories, paying top price for great work.
More and more success. The greater the success you have on projects, the more likely you are to get hired by clients that use Upwork.

Listing 2-6Defining the Content Area for the “Rewarding” Section In Listing 2-6, you create another

with the row class. You also assign a rewardingContent custom class to it. Then, you divide the section of the page into two rows each spanning six columns in width. The first

within the

with the row class is assigned a width of six columns using the six columns class. You assign a heading inside it. You create a list using the

tags and define the list items using the
tags. Then, you create the second
spanning six columns where you insert an image using the tag. You also add a custom rewardingImg class to it. Next, you can see what to do with the custom classes, rewardingContent and rewardingImg, in the style.css style sheet, as shown in Listing 2-7. .rewardingContent { margin-top:10px; } .rewardingImg { width: 75%; margin: 0 auto; display: block; } Listing 2-7Defining Styles Related to the “Rewarding” Section In this code, you add a margin to the rewardingContent class to set the whitespace around the border. You use the display: block for the rewardingImg so that it occupies the space of the parent element. (You need to use the display: block property because Skeleton does not have any utility classes for responsive images.) You also define a width for the image and center it using margin: 0 auto. Figure 2-7 shows the later section of the page as created in Step 3. Figure 2-7Output of the “rewarding” section

步骤 4:完成各部分

Next, you will create the remaining three sections using the code in Listing 2-8.

Get hired quickly

RemoteDesk makes it easy to connect with clients and begin doing great work.

Streamlined hiring. RemoteDesk’s sophisticated algorithms highlight projects you’re a great fit for.
Top Rated and Rising Talent programs. Enjoy higher visibility with the added status of prestigious programs.
Do substantial work with top clients. RemoteDesk pricing encourages freelancers to use Upwork for repeat relationships with their clients.

Work efficiently, effectively.

With Upwork, you have the freedom and flexibility to control when, where, and how you work. Each project includes an online workspace shared by you and your client, allowing you to:

Send and receive files. Deliver digital assets in a secure environment.
Share feedback in real time. Use Upwork Messages to communicate via text, chat, or video.
Use our mobile app. Many features can be accessed on your mobile phone when on the go.

Get paid on time

All projects include Upwork Payment Protection — helping ensure that you get paid for all work successfully completed through the freelancing website.

All invoices and payments happen through RemoteDesk. Count on a simple and streamlined process.
Hourly and fixed-price projects. For hourly work, submit timesheets through RemoteDesk. For fixed-price jobs, set milestones and funds are released via Upwork escrow features.
Multiple payment options. Choose a payment method that works best for you, from direct deposit or PayPal to wire transfer and more.

Listing 2-8Adding Content to the Remaining Sections As shown in Listing 2-8, you create three rows using three

s with the row class. In the first

containing the row class, you create two

s each spanning six columns. In the first child

, you insert an image using the tag, and in the second child

, you create a heading followed by creating a list using the

and
tags. In short, you create the next three content blocks using a similar technique as you did in Step 3. Similarly, you create a similar structure for the remaining two
s with the row class by inserting two child
s, each spanning six columns. You also insert an image and create an unordered list similar to the previous
s. Then, you define the CSS styles for the custom CSS code in the style.css style sheet just like you did in Step 3. Listing 2-9 shows the CSS style sheet code. .rewardingContent,.hiredContent,.workEfficiency,.getPaid{ margin-top:10px; } .rewardingImg,.hiringImg,.messagingImg,.paidImg { width: 75%; margin: 0 auto; display: block; } Listing 2-9Adding Styles for the Remaining Sections Figure 2-8 shows the output of the code in Step 4. Figure 2-8Output of the content of the remaining sections

步骤 5:设计注册表单

In this Step, you will create a small sign-up form. Listing 2-10 shows the code for the form.

Ready to get hired?

Listing 2-10Sign-up Form In Listing 2-10, you create a

and assign the row class to it. You then add three

s with the columns class within the

with the row class. You then add inputs in the first two

s for the full name and e-mail. Here you use a utility class provided by Skeleton; for example, u-full-width is used so that the fields occupy the full width of the container. You then place a Sign Up button in the last

. Figure 2-9 shows the output of the form. 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

Figure 2-9Output of the sign-up form

步骤 6:创建页脚

Finally, you will create the footer. Listing 2-11 shows the code for the footer section.

Company Info

About us Customer Stories Press Career RemoteDesk Blog Terms of service Privacy Policy

Additional Services

Enterprise Solutions Enterprise Summit Business resources

Browse

Freelancers by skills Freelancers by region Find Jobs Hiring Resources

Listing 2-11Footer In Listing 2-11, you create a

tag and assign a row class to it. Within that

, you create three child

s, each spanning four columns using the four columns class. The first child

contains anchor links, , for the company information. The second child

contains anchor links for the additional services, whereas the third child

contains anchor links for the Browse section. Figure 2-10 shows the footer section of the web page. 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

Figure 2-10Output of the footer section You have just designed a landing page for the RemoteDesk freelance portal using Skeleton!

摘要

Skeleton is a simple framework that beginners can adopt quickly. It has a clean and concise code base. However, Skeleton does have its drawbacks.

它缺少其他框架提供的几个 CSS 特性。正因为如此，使用 Skeleton 的开发时间比同类产品要长。
12 列流体网格支持的最大宽度为 960 像素。
另一个缺点是缺乏社区支持。这个框架的最后一次更新是在三年前。此外，许多“拉”请求和问题仍然是开放的，这意味着所有的差异都还没有随着实质性的更新而得到解决。

Therefore, when it comes to massive, immersive web sites, Skeleton falls short. Nevertheless, it is a handy utility suitable for web projects, meant mainly for smaller screens. In the next chapter, you will design a product page with Milligram, another intuitive lightweight framework.

三、使用 Milligram 建立产品页面

安装 Milligram

There are different ways you can install Milligram. In this section, you will learn how to install Milligram by downloading the Milligram files. Go to the Milligram web site at milligram.io/ and click the Download Milligram button, as highlighted in Figure 3-1. The zip file will be downloaded. 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 Figure 3-1Milligram download page Figure 3-2 shows the file structure . Figure 3-2Content of the Milligram framework The CSS files (both the usual ones as well as the minified versions) are present in the dist folder. Figure 3-3 shows the file structure. 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 Figure 3-3File structure of Milligram framework (source: Milligram) You can also download the Milligram files or install it using Bower, NPM, or Yarn. For installation through Bower, NPM, and Yarn, you need to use the following commands from the command-line prompt: $ bower install milligram $ npm install milligram $ yarn add milligram Once you download Milligram, add the tags for the files in the head section of your HTML code. There is a preferred way of using Milligram that we will be showing in this chapter, which is to use a content delivery network (CDN) . A CDN is basically a system of distributed networks delivering web pages and other web content according to the geographic location of the users, the source of the web pages, and the location of the CDN server. There are many benefits of using CDN.

降低服务器负载
实现快速内容交付
确保高可用性
促进高并发网络主干容量
更好地控制资产交付

You can add the CDN code for Milligram using the following lines of code: The first line of code is the CDN link for the Google Roboto font. The second line of code is for the Milligram CSS minified file.

Milligram 框架概述

In this section, you will get an overview of the various attributes of Milligram before you learn how to build a product page with the framework.

在字体设计上，Milligram 坚持 CSS3 的 rem 单位思想，为根元素定义了一个单一的字体大小，然后所有其他的 rem 单位都是该根元素的一个百分比，从而提供了更容易的可维护性和更简洁的代码。顺便说一下，Milligram 使用 Roboto 字体系列作为其排版的默认字体。
以 Milligram 为单位的块引号被引用在
标记之间。在`标签之间定义了一个代码元素。如果你需要一个块，在
```
标签中包装元素。
```
clearfix 实用程序与 clearfix 类一起使用，而 float 由 float-left 和 float-right 类定义，这取决于您是否希望分别向左和向右浮动。
与 HTML 类似，以 Milligram 为单位的列表在

标签中分别定义为有序列表、无序列表和描述列表。每个列表项都被包装在类似 HTML 的
- 标签之间。
按钮由 button 类定义，带有锚标记
以 Milligram 为单位的表格类似于 HTML 表格，其中使用了和元素。与 HTML 类似，使用定义表格行，定义表格数据，定义表格标题，然后将所有内容包装在主元素中。
和 Skeleton 一样，Milligram 使用以最小宽度为目标的移动优先查询。查询之外的样式适用于所有设备。这样做是为了防止手机和平板电脑等小型设备解析大量未使用的 CSS。Milligram 根据设备大小使用以下媒体查询大小:
- 比移动设备/屏幕大:40 雷姆(640 像素)
- 大于平板设备/屏幕:80 雷姆(1280 像素)
- 大于桌面设备/屏幕:120 雷姆(1920 像素)

Milligram 网格系统

Grids in Milligram use the CSS Flexible Box Layout module standard wherein the grid is fluid, shrinking based on the browser at smaller sizes. The entire grid system is responsive with a maximum width of 112rem (1120px). See Listing 3-1 to understand the grid system in Milligram. Grid system

One

Two

Three

Four

One

Two

Listing 3-1Grid System in Milligram In the code, you use the CDN links for the Google fonts and the Milligram minified CSS file. You also define the viewport. Just like Skeleton, the entire code is wrapped in a

element with a container class. All columns are defined within a row just like in many grid-based frameworks. However, Milligram is different from other frameworks in that you can add any number of columns within a row. You are not restricted to 12 columns like with many popular frameworks. In Listing 3-1, initially you define a row within the

with the container class. Then, you define four columns within that row using the column class. You use inline styles for assigning a border and aligning the text to the center for each column. Then you define another row and a column using a column class. Then you define another column within that row and use the column-50 class along with the column-offset-25 class. What the column-50 class does is assign a column width of 50 percent to the column, which will allocate 50 percent of the column content within the parent row. The column-offset-25 class moves the column to the right by 25 percent column space for that parent row. Figure 3-4 shows the output of the code. 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

Figure 3-4Implementation of grid system of Milligram In Figure 3-4, you can see four columns, named One, Two, Three, and Four, in the first row. The second row has a column named One and a column named Two, which is offset by 25 percent and occupies 50 percent of the row width.

用 Milligram 建立产品页面

Now that you have a brief idea about Milligram, you will learn how to create a product page with Milligram. The Product page contains information about a Virtual Private Network (VPN) along with its features and pricing.

步骤 1:定义标题

Let’s look at the code in Listing 3-2 to start the first step of building the secure VPN product page. Secure VPN

Your IP: 115.166.129.152

Your Location: Unknown

Your Status: UNPROTECTED

Listing 3-2 Defining the Header In Listing 3-2, you define the viewport and add the CDN links for the fonts and the Milligram CSS minified file. Then you introduce a link for the style.css custom CSS file. After defining the links in the tag, you create a element with the container class in it. Then you define a

with the row class. You assign another custom class called contactArea to it, which you will use to define the custom CSS code. Next, you define a

with a column of 50 percent width within the parent row and offset it by 50 percent within that row by using the column-50 and column-offset-50 classes. Within that

, you create three

s wherein you define the content that comprises the IP address, location, and status. Then, you define the custom CSS code using the contactArea and contactColumn classes in the custom style.css file. Listing 3-3 depicts the code in the style.css custom CSS file using the contactArea and contactColumn classes for the corresponding

s. .contactArea{ background: #666; color: #fff; text-align: right } .contactColumn{ font-size: 12px; display: inline-block; margin-right: 10px; } Listing 3-3Defining CSS for the Header In Listing 3-3, you define the background as gray and the color of the words as white for the contactArea class. You align the text to the right. For the

that is defined by the contactArea class, you define the font size as 12px and use a margin. You use the display: inline-block property, which essentially creates a grid of boxes that fills the browser width and wraps it. Here, it helps the content blocks of the header to retain their block-level characteristics and helps them appear next to each other without using a float attribute. Figure 3-5 shows the output of the code. 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

Figure 3-5Output of the header area In Figure 3-5, you can see the elements floated to the right with the IP address and the rest of the content.

步骤 2:定义导航

Let’s now look at the code in Listing 3-4 to proceed with step 2.

Listing 3-4 Defining the Navigation In Listing 3-4, you create a

and assign a row class to it. You also assign a custom navigation class to it, wherein you will define the custom CSS code in the style.css style sheet . You then create a

within the

with the row class and assign a column width of 25 percent to it by using the column-25 class. You also add a logo custom class to it. You then insert an image for that

using the element. The path to the images is set to the images folder, with the logo.png as the image name. Within the same row, you create another

and assign a column width of 50 percent to it using the column-50 class for that parent row, and you offset that column by 25 percent to the right. You define the content in anchor link, , tags. Listing 3-5 shows the custom CSS code linked to the code in Listing 3-4. .logo { text-align: left; } .logo img { width: 25%; margin: 10px 0; } .navigation{ background: #ffc400; text-align: right; padding: 10px 0; font-weight: bold; } .navigation a{ color: #000; padding: 5px; border: 2px solid #000; } Listing 3-5Defining the CSS for the Navigation As you can see in Listing 3-5, you define an image width of 25 percent and set a margin for it. In the navigation class, you define dark orange as the background color and align the text to the right. You set the padding and define the bold font weight for it. To the anchor links containing the Home, Pricing, Support, and Login links, you assign the black color and a black border with a padding of 5px. Figure 3-6 shows the output of the code. In Figure 3-6, you can see the orange background and the links in the anchor tags (i.e., Home, Pricing, Support, and Login) to the right of the screen. You can also see the logo on the left of the screen. 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

Figure 3-6Output of the navigation

步骤 3:定义横幅区域

Let’s look at the code in Listing 3-6 to see the next step in the coding process for the secure VPN product page.

Listing 3-6HTML for the Banner Area In Listing 3-6, you define the

tags and assign the row class as well as the custom mastHead class to it. Inside that row, you define a

with a column of 60 percent width for the row for the

tag. Listing 3-7 shows the corresponding code for the mastHead class in the custom style.css style sheet. .mastHead { height: 450px; overflow: hidden; background: #ffc400; color: #000; } .mastHead h1,.mastHead h2,.mastHead h3,.mastHead h4,.mastHead h5,.mastHead h6{ color: #000 } Listing 3-7CSS for the Banner Area What you have done is set the height of the

with the mastHead class to 450px and set the background to dark orange, the same color as in step 2. Then, you define black color to the content in that section. You also set the color of all the headings in that section to black with the mastHead class. Now you will split the sprite image shown in Figure 3-7 into three parts for the App Store, Google Play, and Windows Phone Store . The rest of the image for the Mac App Store and Windows PC will not be displayed on the page. 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

Figure 3-7Sprite image for store icons You define the code for the unordered list in Listing 3-8 within which you assign a column width of 60 percent, after the headings. Listing 3-8Adding Store Information to the Banner Area As you can see from the code in Listing 3-8, you define the unordered list and assign the custom srote -badges class to it. You define the list in the anchor tags and assign the store-ios, store-android, and store-winphone custom classes to it. The corresponding custom CSS code in the style.css style sheet for the unordered list will look like Listing 3-9. ul.srote-badges{ list-style: none; } ul.srote-badges li a, .srote-badges a { display: inline-block; background: url(img/store-badges-70x245.png) no-repeat 0 0 #fff; width: 245px; height: 70px; border-radius: 4px; } .srote-badges a.store-ios { background-position: 0 0; } .srote-badges a.store-android { background-position: 0 -70px; } .srote-badges a.store-winphone { background-position: 0 -140px; } Listing 3-9Adding the CSS for Store Icons In Listing 3-9, you set list-style as none to remove the bullets. Further, you set the background as the sprite image by assigning the link to that image. Then, you define the width and height for it. You also assign a border-radius setting of 4px to the image . Next, you split the image into the first three parts and set the background position to 0 for the first part, -70px for the next part, and -140px for the third. The rest of the image cannot be seen. Next you define an Android phone image, as shown in Figure 3-8, to the right using another

within the same section class. 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

Figure 3-8Application image for the banner area You assign a column width of 40 percent for the parent

tag and add the mastHeadImage class to it. Listing 3-10 shows the code within the entire

tags after incorporating everything from the sprite images into this Android image.

Secure your data. Protect your privacy

Protect your IP address and surf the web anonymously

Listing 3-10Adding the Application Image to the Banner Area Listing 3-11 shows the corresponding custom CSS code for the

element with the last mastHeadImage class. .mastHeadImage{ background: url(“img/android-device1.png”) no-repeat; background-size: cover; background-position: 0 15px; } Listing 3-11Adding the CSS for the Application Image in the Banner Area In Listing 3-11, you refer to the background and assign the image link. Then you set background-size to cover and set background-position as 15px. Figure 3-9 shows the output of the entire code so far. 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

Figure 3-9Code output so far

步骤 4:设计内容区域

Moving Forward, you will design the content area . Listing 3-12 shows how to proceed with building the “benefits” section.

BENEFITS OF USING VPN IN TOUCH

Unblock Websites

Bypass internet restriction and access to any websites: Unblock Facebook, Unblock Youtube.

Secure Your Data

Encrypt your private data before sending it from your computer, smartphone or tablet over the internet.

Bypass content restrictions

Watch Netflix and BBC iPlayer, no matter where you are. Use Skype, Viber and all Voip services without restrictions.

Protect Your Privacy

Hide your IP address, protect your online identity while browsing and surf the web anonymously.

Wifi Hotspot Security

Prevent sniffers and hackers from stealing your private data while using public hotspots.

Data Saving and Ad Blocker on Mobile

Save more bandwidth on your mobile 3G/4G data plan. Clear your mobile screen of obtrusive ads with Ad Blocking mode.

Listing 3-12HTML for the Content Area In Listing 3-12, you use a

tag and enclose a

with a row class. Within that parent row, you use the

heading to define the content for the level 3 heading. After that
, you create a
with the row class. You create two
s each with a column width of 50 percent of the parent
using the column-50 class. You define a level 4
and a paragraph element,
, with their respective content within each child

. Repeat the process three more times, wherein you create two
s within a parent
with a row class. Similarly, define
and
under each child

with their respective content. Figure 3-10 shows the output of the code. Figure 3-10Output of the content area

步骤 5:创建定价区域

Next, you will create a pricing table wherein you will list the subscription price for the monthly, half-yearly, and yearly timeline. Let’s look at the code in Listing 3-13.

Pricing Overview

pricing	1 Month	6 Months	1 Year
Price	$9.98/month	$2.99/month	$2.49/month
Save	0%	50%	75%

Listing 3-13HTML for the Pricing Area In Listing 3-13, you define the

tags within which you define the tables. Initially, you define a

with a row class where you use a heading of

with the column class to define the content, i.e., Pricing Overview. Then, you create a
with the row class after the preceding
and assign another
with the column class within it. Moving forward, you define the table headings and the table rows with the list of items in the table, which is quite similar to the way you create tables in HTML. Place the content within the
tags. Figure 3-11 shows the output of the code. Figure 3-11Output of the pricing area

步骤 6:创建页脚

Finally, you will create a footer for your product page. Let’s look at the code in Listing 3-14 to understand how you design the footer of the web page.

Listing 3-14HTML for the Footer In Listing 3-14, you define the footer content within the

摘要

In this chapter, you designed a page for a secure VPN product. Milligram is an awesome utility for lightweight projects. However, there are some constraints such as the maximum device size of 1120px and a lack of utility classes, which are required for massive immersive projects. Nevertheless, Milligram is an intuitive framework that doesn’t come with the bulk of huge frameworks and is especially helpful when you want to build simple mobile web pages. In the next chapter, you will look at another engaging framework, UIkit, which is quite useful for lightweight web projects.

四、UIkit 简介

安装 UIkit

Go to the official web site at getuikit.com/ . The Download button is on the upper-right side of the screen, as shown in Figure 4-1. 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 Figure 4-1UIkit download page After clicking Download, the zipped file gets downloaded. After unzipping the folder, the folder tree structure looks like Figure 4-2. Figure 4-2Content of UIkit framework You can also install UIkit with prebuilt JavaScript, CSS, and Less source files with NPM, or you can clone the repo to get all the source files including build scripts. To clone the repo, you need to use the following command: git clone git://github.com/uikit/uikit.git Another easy way to include the compiled files of all UIkit versions is to use the CDN files on the Cloudflare content delivery network. You include all the necessary files in your markup as shown in Listing 4-1. Listing 4-1Including UIkit in Your Web Page

网格、卡片、柔性和宽度

UIkit has a flexible grid system. UIkit’s grid items are all stacked by default. To add a grid , you need to add the uk-grid attribute to the

element. Usually, we use the card component to demonstrate the grid functionality; the card element contains the card, the card body, and an optional card title. Listing 4-2 depicts the code for the normal card component.

Cloud Computing

Cloud Computing is a computing infrastructure and software model for enabling access to shared pools of configurabel resources such as computer networks, servers, and storage including services which can be rapidly provisioned with minimal management effort over the internet or intranet

Listing 4-2Card Component of UIkit In this code, you include the links for the UIkit framework in the section. You include the jQuery code, the UIkit JavaScript code, and the UIkit icon files in the links. Then, you create a tag and assign a padding of 10px all over. Next, you create a

and assign the uk-card, uk-card-default, and uk-card-body classes in addition to assigning a width of half for the parent container using the uk-width-1-2 class. The uk-card class defines the card, while the uk-card-default class is the default styling for the card. The uk-card-body class defines the body for the card. Then, you use the

element to define a third-level heading for the card title and add a uk-card-title class to it. Next, you define random content within the
tags. Figure 4-3 shows the output of the code. Figure 4-3Output of card component of UIkit You can have cards of different colors. Let’s look at an example of how you assign different colors to the cards in UIkit; see Listing 4-3.




Default

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.





Primary color

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.





Secondary

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.



Listing 4-3Adding Colors to the Card Component of UIkit In the code sample in Listing 4-3, you create a parent
and assign a uk-grid attribute to it. By default, all items in the grid will be stacked. So, you assign a width class to the items to align it next to each other. In this example, to assign an equal width to all items within the parent
, you have to add a common uk-child-width-1-3 class to it. What this class does is assign a width of one-third of the parent container to all the items in the grid. You also add a uk-grid-small class to it. This applies a small gutter. Usually, the grid component comes with a default gutter, but this uk-grid-small class applies a small gutter instead. Then, you create three child
s and assign the uk-card and uk-card-default and uk-card-body classes to create a normal card. For the second item, you use a uk-card-primary class instead of the default class. For the third item, you use a uk-card-secondary class instead of the default class. You also assign the same title to all three items using the uk-card-title class within the
tag for all three items. Figure 4-4 shows the output of the code. Figure 4-4Output of colored card components of UIkit Instead of the default styling, you can use a hover class so that you can create a hover effect on the card. The only thing you need to do is add a uk-card-hover class to each child
for each of the items. The line will look as shown in Listing 4-4 where you use the uk-card-hover class for the
element with the default card color.
Listing 4-4Adding Hover Effect to the Card Components Similarly, you add the uk-card-hover class to the primary and secondary colored
items. On hovering, you can see the hover effect , which is quite handy in anchors and other aspects in web design. You can use different size modifiers that will increase the padding in the card. Listing 4-5 contains the code that depicts how to use smaller and larger padding.



Default

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.





Primary color

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.





Listing 4-5Using Size Modifiers with Card Components Here you define two cards with the same content , but you use uk-card-small for the child
for the default card and use the uk-card-large class for the child
with the primary color. The rest of the code is the same for both child
s. Figure 4-5 shows the output of the code. Figure 4-5Output of using size modifier with card component The width class is used in conjunction with the card component to split content into responsive columns. Now let’s understand the width class better using some examples; see Listing 4-6.


One Third



One Third



One Third




Half



Half




One-fourth



Three-fourth


Listing 4-6Using Width Classes Along with Card Component In the preceding code sample , you create a parent
under which you center the text for all the items by using a uk-text-center class in the parent
. Then, you add a uk-grid attribute for the parent
. For each child
, you use a width of one-third for each item in the parent container (i.e., the parent
). You define the code for the card in a
within the
for each item containing the width class. Similarly, you create another parent
. Here you use the same coding strategy, but you use two child items. You assign a width of half for each item for that parent
. Also in the previous parent
, you use a primary color for all the items. Here you use the default color for the cards. You move on to create another parent
with the uk-grid attribute like in the previous parent
s. Here you create two
s, but you assign a secondary color to the cards, and you assign a width of one-quarter to the first item and three-quarters to the second item using the uk-width-1-4 and uk-width-3-4 classes. Figure 4-6 shows the output of the code. Figure 4-6Output of the code so far Instead of assigning a width to each item, if the items are of the same size, then you can use the uk-child-width-* class to it where * stands for the dimensions of each items. For example, uk-child-width-1-4 will apply a width of one-quarter of the parent container to all the items. Let’s look at this with a code sample; see Listing 4-7.


Cloud



Cloud



Cloud



Cloud



Cloud


Listing 4-7Using the uk-child-width-* Class to Adjust the Width of the Inner Components In the code, you use a common uk-child-width-1-4 in all items in the parent
. Then you define the child
s with the card element code. Figure 4-7 shows the output of the code. Figure 4-7Using the uk-child-width-* class to adjust the width of the inner components As you can see in Figure 4-7, the width classes with fractions will break in to a new row if they exceed their container’s width. However, to evenly split them in the same row, you can use the expand class as shown in Listing 4-8.


Cloud



Cloud



Cloud



Cloud



Cloud


Listing 4-8Implementing uk-child-width-expand for Evenly Sizing the Inner Elements As you can see, you can use uk-child-width-expand to evenly split all the items in the same row without going to the next row. Figure 4-8 shows the output of the code. Figure 4-8Evenly sizing the inner elements You can also define a custom width for some items in the code and use them in conjunction with the uk-child-width classes. Let’s look at the code in Listing 4-9 to see an example.


Spread



Custom



Spread



Spread


Listing 4-9Defining Custom Width for Inner Element In Listing 4-9, you use uk-child-width-expand as the common class to the parent
. However, in the second child
, you use a custom width of uk-width-2-3 and let the other child
s remain the same. What happens is that the second item will encompass a width of two-thirds the parent container, while the other items will be evenly split in the same row. Figure 4-9 shows the output of the code. Figure 4-9Defining custom width for inner elements You can use the FlexBox component in UIkit. It helps you build interactive grid layouts. Let’s look at an example to understand it better; Listing 4-10 shows an example of how FlexBox can be used.

First

Second

Third

Listing 4-10Using FlexBox with UIkit In the code, you use the uk-flex class with the parent
. Then, you define three items in the child
s and use a uk-margin-left for the second and third items to create space between the items. By default, all items will be aligned to the left along with the content and height, as shown in Figure 4-10. Figure 4-10Using FlexBox with UIkit You can align the flex items to the right and center and even add equal space between the items using the uk-flex-right, uk-flex-center, and uk-flex-around classes. Listing 4-11 shows the code where all the items are centered.

First

Second

Third

Listing 4-11Aligning Flex Item Figure 4-11 shows the output of the code. Figure 4-11Aligning flex items You can use responsive classes with the flex items where @s added to the flex classes will affect device widths of 640px or higher, @m affects device widths of 960px or higher, @l affects device widths of 1200px or higher, and @xl affects device widths of 1600px or higher. See Listing 4-12.

FIRST

SECOND

THIRD

Listing 4-12Using Responsive Classes with Flex Items In the code in Listing 4-12, you define uk-flex-left@m and uk-flex-center@l to the parent
s. Then you define the child
s just like in the previous examples. On the large screen, the flex items will be centered, whereas the items will be aligned to the left on a small screen. The vertical alignment of items is possible in Flexbox. Let’s look at an example in Listing 4-13. You can also define the item order as shown in the same example.

Cloud 1

Cloud 2

Cloud 3

Listing 4-13Vertically Aligning the Flex Items As you can see, you can use uk-flex-column in the parent
. So, the output will be as shown in Figure 4-12. Figure 4-12Vertically aligning the flex items However, in the same code in Listing 4-13, you define responsive classes in the first and third items. You use uk-flex-last@m and uk-flex-first@l for the first item. You use uk-flex-first@m uk-flex-last@l for the third item. Therefore, while the preceding output was for the large screen, on small and medium screens, the first item, Cloud 1, will be the last item, whereas the third item, Cloud 3, will be the first item, as shown in Figure 4-13. Figure 4-13Vertically aligning the flex item Finally, coming back to grids, you can also use nested grids in UIkit. Let’s look at the code in Listing 4-14 to understand it better.


FIrst 1-1





Nested 2-1



Nested 2-2




Listing 4-14Using Nested Grids in UIkit Here, you create a parent
and assign a child width of half to it. Then, you create two child
s. You define a normal card in the first child
. However, in the second child
, you assign a width of half for each subchild
. Figure 4-14 shows the output of the code. Figure 4-14Using nested grid in UIkit You can match the height of all the
s irrespective of the content of all the items. Listing 4-15 shows the code for this.


Lorem ipsum dolor sit amet, consectetur adipisicing elit



Lorem ipsum dolor sit amet, consectetur adipisicing elitLorem ipsum dolor sit amet, consectetur adipisicing elit



Lorem ipsum dolor sit amet, consectetur adipisicing elitLorem ipsum dolor sit amet, consectetur adipisicing elitLorem ipsum dolor sit amet, consectetur adipisicing elitLorem ipsum dolor sit amet, consectetur adipisicing elit


Listing 4-15Matching the Heights of the Elements As you can see, you use the uk-grid-match class in the parent
. Then, you create three items just as in the previous examples . Figure 4-15 shows the output of the code. Figure 4-15Output of the code so far

动画片

UIkit has a plethora of animations that impart a certain degree of immersive behavior to your web sites. Let’s look at the example in Listing 4-16 to understand the behavior of animations in a web page.

Fade

Scale Up

Scale Down

Shake

Left

Top

Bottom

Right

Listing 4-16 Adding Animation In Listing 4-16, you create the parent

to which you assign the uk-child-width-1-4 class. This aligns the items in a row with each item taking one-quarter of the space of the parent container. You assign the uk-grid attribute as in the previous examples. Then, you proceed to create eight child

s. To each child

, you assign the uk-animation-toggle class due to which there will be a hover effect that will trigger the animation. Then, you create a card in a sub

inside those child

s. Since there are eight items, you assign these eight animation classes to each child

uk-animation-fade class for the first child 这为项目创建了一个渐变效果。
uk-animation-scale-up class for the second child 这创建了一个渐变效果，其中项目按比例放大。
英国-动画-第三个孩子的缩小比例这创建了一个项目缩小的淡入淡出效果。
uk-animation-shake for the four child 这产生了一种摇动效果，其中物品似乎在振动。
uk-animation-slide-left for The fifth 该项目从左边开始滑动。
uk-animation-slide-top for The sixty 该项目从顶部开始滑动。
uk-animation-slide-bottom for The seven 该物品从底部滑动。
uk-animation-slide-right for the eight 这个项目从右边开始滑动。

Figure 4-16 shows the output of the code. 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 Figure 4-16Adding animation When you hover over the items, you can see the animation effect as defined in the code. For example, when you hover over the first item, it will fade. On hovering over the fifth item, the item will slide from the left. You can also define the space or distance of the animation. All you need to do is add the appropriate top, right, bottom, or left animation class. For example, uk-animation-slide-left-small will create a left sliding effect from a shorter distance, whereas uk-animation-slide-left-medium will create a left sliding effect from a longer distance. The distance is already predefined by a fixed pixel value. Let’s look at the code example in Listing 4-17 to understand it better.

Left Small

Top Small

Bottom Small

Right Small

Left Medium

Top Medium

Bottom Medium

Right Medium

Listing 4-17Adding Animations with Space and Distance In Listing 4-17, you follow the same code as in Listing 4-16, the only difference being the addition of the distance to the animation class . You define the classes as uk-animation-slide-left-small, uk-animation-slide-top-small, uk-animation-slide-bottom-small, and uk-animation-slide-right-small to create the sliding animation effect from the left, top, bottom, and right for a shorter distance. Similarly, you use the uk-animation-slide-left-medium, uk-animation-slide-top-medium, uk-animation-slide-bottom-medium, and uk-animation-slide-right-medium classes to define a medium distance for the sliding effect animation from the left, top, bottom, and right. Figure 4-17 shows the output of the code. 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

Figure 4-17Adding animations with space and distance When you hover over the items, they will display the behavior as defined and explained in the code. For example, when you hover over the sixth item, the item will slide in from the top from a larger distance compared to the second item, which slides from the top in a shorter distance. If you observe the animations so far, all of them are incoming; however, to make them outgoing, you can use the reverse function. All you need to do is add a uk-animation-reverse class to the element, as shown in Listing 4-18.

Fade

Right

Listing 4-18Adding Reverse Animation In Listing 4-18, you create two card items inside the parent

that span half of the parent grid. For the first child

, you define the fade animation class followed by the uk-animation-reverse class. For the second child

, you define the animation sliding effect from the right. However, you also define the uk-animation-reverse class to it similar to the first child

. Figure 4-18 shows the output of the code. 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

Figure 4-18Adding reverse animation When you click the first item, it will fade in the reverse way (i.e., outgoing). Similarly, when you click the second item, it will slide from left to the right (i.e., in the reverse direction) and fade away.

带动画的 Scrollspy

Scrollspy helps you trigger events when you scroll your page. It can be used with the animation class extensively to create an awesome effect for your web pages. Let’s understand it by means of a coding example, as shown in Listing 4-19. (Inside the

tags, there is a load of content. For the entire content, refer to the code bundle.)

Lorem ipsum …(loads of text)

Cloud

Cloud Computing is the new revolution

Cloud

Cloud Computing is the new revolution

Listing 4-19Adding Scrollspy In Listing 4-19, you define two paragraph elements and fill them with loads of text. Then you define a

class, and to this parent

you assign a uk-child-width-1-2@m class to define the width of the two child

elements within the grid defined by the uk-grid-match and uk-grid classes. Then you create two child

s; you create basically two card items, and you assign the uk-scrollspy=“cls: uk-animation-slide-left; repeat: true” attribute to the first child

and uk-scrollspy=“cls: uk-animation-slide-right; repeat: true” to the second child

. This will make the cards slide from the left and right, respectively, when you scroll down to that section of the page. You use the repeat: true property to repeat the effects when you scroll to that section of the page. The output of the code will display two paragraphs of content. When you scroll down the page, the cards will slide from the left and right automatically. Figure 4-19 displays the two cards, which slide in from the left and right, respectively, when you scroll to that section. 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

Figure 4-19Adding Scrollspy If you want to create items with the same animation effect, you do not have to define the Scrollspy animation separately for each item. You can club them together by using the target property to the class in the scrollspy attribute. Listing 4-20 shows an example of this.

… Lorem Ipsum…(loads of text)…

Lorem ipsum (loads of text)…

Top Animation

Animation effect: Slides from the Top

Top Animation

Animation effect: Slides from the Top

Top Animation

Animation effect: Slides from the Top

Listing 4-20Adding Scrollspy In Listing 4-20, you define the grid and assign the uk-child-width-1-3@m class to it to assign a width of one-third of the parent container width. Then, you apply the following scroll spy property to the parent

: uk-scrollspy=“cls: uk-animation-slide-top; target: > div > .uk-card; delay: 500; repeat: true” This defines the animation for all the child items when you scroll down to that section. Here, you use cls: uk-animation-slide-top to create an animation effect wherein the element slides from the top. Then, you follow it up with target: > div > .uk-card; in the same line, which will target the card defined by the

with the uk-card class. Thereon, you create a delay of 500ms and use the repeat attribute here too. Next, you go on to create three card items. The output of the code will show text, and on scrolling down below the text, the three card items will slide in from the top, as shown in Figure 4-20. 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

Figure 4-20Adding Scrollspy

手风琴

An accordion helps to stack items, which, when clicked, will display information. It helps reduce the overload of information on a web page. Listing 4-21 shows an example of an accordion in UIkit.

Cloud


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fermentum justo urna. Nam blandit diam ac erat congue, ullamcorper vulputate odio tempus. Quisque maximus dolor sit amet nisi lacinia euismod. Pellentesque laoreet, tortor malesuada volutpat luctus, augue diam venenatis risus
Cloud


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fermentum justo urna. Nam blandit diam ac erat congue, ullamcorper vulputate odio tempus. Quisque maximus dolor sit amet nisi lacinia euismod. Pellentesque laoreet, tortor malesuada volutpat luctus, augue diam venenatis risus
Cloud


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fermentum justo urna. Nam blandit diam ac erat congue, ullamcorper vulputate odio tempus. Quisque maximus dolor sit amet nisi lacinia euismod. Pellentesque laoreet, tortor malesuada volutpat luctus, augue diam venenatis risus

Listing 4-21Adding an Accordion In Listing 4-21, you create a list using the

tag. You need to assign the uk-accordion class to it. This will create the accordion. Then, you create three list items using the
tags. You assign the uk-open class to the first list item so that it is open by default. Inside the first item, you define the heading of the accordion using the uk-accordion-title class with the
tag. Then, you create a
and assign the uk-accordion-content class to it. You define the content within that
using the paragraph
tags; similarly, to the other two list items, you define the content and heading of the accordion. However, remember not to use the uk-open class for these two list items as the uk-open class is to be used only for that accordion that displays content by default. Figure 4-21 shows the output of the code. Figure 4-21Adding an accordion If you want all the accordions to show the content without the other collapsing, then use the multiple: true property with the uk-accordion attribute. Listing 4-22 shows an example of multiple accordions that are open and shows content without collapsing.
- Cloud
  
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fermentum justo urna. Nam blandit diam ac erat congue, ullamcorper vulputate odio tempus. Quisque maximus dolor sit amet nisi lacinia euismod. Pellentesque laoreet, tortor malesuada volutpat luctus, augue diam venenatis risus
- Cloud
  
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fermentum justo urna. Nam blandit diam ac erat congue, ullamcorper vulputate odio tempus. Quisque maximus dolor sit amet nisi lacinia euismod. Pellentesque laoreet, tortor malesuada volutpat luctus, augue diam venenatis risus
- Cloud
  
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fermentum justo urna. Nam blandit diam ac erat congue, ullamcorper vulputate odio tempus. Quisque maximus dolor sit amet nisi lacinia euismod. Pellentesque laoreet, tortor malesuada volutpat luctus, augue diam venenatis risus
Listing 4-22Adding Multiple Accordions The example is the same as that of the previous accordion example; except here, you use the uk-accordion=“multiple: true” property with the main
- tag. The output of the code will show the first accordion open and the remaining closed. However, when you click the other two accordions, it will show the content without any of the accordions collapsing, as shown in Figure 4-22. Figure 4-22Adding multiple accordions

核标准情报中心

Finally, let’s talk about icons in UIkit. If you remember the section of the code examples, you use the following line of code: This line is for the Scalable Vector Graphic icons, which are baked-in to UIkit. The best part of SVG icons is that they can be colored and styled with CSS to give an aesthetic look. Listing 4-23 shows an example of a few icons used in UIkit.

Listing 4-23Implementing Icons In Listing 4-23, you initially create the Home, Trash, Users, and Phone icons. For this, you use the anchor tags with the href attribute. Then, you create the first icon (i.e., home) by using the property uk-icon=“icon: home”. As you can see, you assign the icon: home value to the uk-icon property. Similarly, you assign the trash value for the uk-icon for the trash using the uk-icon=“icon: trash” property. You go on to create icons for users and the phone. You also use the uk-margin-small-right class for the spacing between the icons. For social media button icons, you use the additional class uk-icon-button with the tags. For the first social media icon button (i.e., Twitter), you use the uk-icon-button class followed by the uk-icon=“icon: twitter” property. As you can see, the icon: twitter value is assigned to the uk-icon attribute. Similarly, you create the Facebook and Google Plus icons. Figure 4-23 shows the output of the code . 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 Figure 4-23Implementing icons

摘要

As you learned in this chapter, UIkit is an expansive but light framework compared to heavyweights such as Bootstrap and Foundation. In the next chapter, you will learn about Material Design Lite, which is another amazing and intuitive framework.

五、材质设计简要说明

安装 MDL

MDL can be downloaded in several ways. One of the easiest ways is to go to getmdl.io/started/index.html#download . You will see a Download MDL button, as shown in Figure 5-1. 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 Figure 5-1Download link for MDL Click the button to download a zipped file containing the various CSS and JavaScript files. Figure 5-2 shows the tree structure of the unzipped components. Figure 5-2Structure of files in MDL The preferred way of including MDL in your document is to use the CDN links for the icons, CSS, and JavaScript files, as shown here: Just include the three lines of the preceding code in your HTML page and you are good to go. We already defined the advantages of using CDN links in the previous chapters, and the creators of MDL also recommend using the CDN links. Alternatively, you can download and build MDL from the GitHub portal or by using Node or Bower . In this chapter, we will stick to showing the preferred way (in other words, using CDN-hosted files in your markup file) to demonstrate various examples.

MDL 布局

In this section, you will look at some of the layout components of MDL so you can understand the MDL grid and other important attributes such as the footer and the tabs. Initially, you will look at the header and drawer concepts in MDL by way of some simple examples. Listing 5-1 shows a fixed header and a normal drawer in MDL.

SUPERMAIL007

Come Undone

Listing 5-1Fixed Header with Normal Drawer in MDL In Listing 5-1, you can see the code for the fixed header and a normal drawer. Let’s look at each line of code to understand how it works. In the head section, you include all the CDN files for the MDL framework. Then, you create a body tag in which you will define the functional markup for the fixed header example. Then, you code a

and assign the mdl-layout, mdl-js-layout, and mdl-layout–fixed-header classes to it. The mdl-layout class identifies the container as an MDL component and is part of the outer container element. The mdl-js-layout class adds MDL behavior to the layout and is part of the outer container element. The mdl-layout–fixed-header class makes the header always visible, even on small screens. Then, you define the HTML

tag wherein you assign the mdl-layout__header class to it. The assigned class identifies the container as an MDL component. Within the

tag, you code a

and assign the mdl-layout__header-row class to it. The mdl-layout__header-row class identifies the container as an MDL header row and is mandatory on a header content container. Inside the

, you create a tag and assign the mdl-layout-title class to it that identifies the layout title text and that is needed on the layout title container. You use SUPERMAIL007 as the title content for the header. You then code another

to which you assign the mdl-layout-spacer class, which results in filling the remaining space and is usually used to align the elements to the right. Then, you create the navigation element with the

tag. Continuing, you create a

element and assign the mdl-layout__drawer class to it, which identifies the container as an MDL drawer. Then, you create a element within that

and assign the mdl-layout-title class to it, which identifies the title text to the container. You use the content SUPERMAIL007, which is the same as the content for the header title in the

section. Then, you create the navigation element with the

tag and assign the mdl-navigation class to it, which identifies the container as an MDL navigation group. You create three anchor links using the tag and assign the mdl-navigation__link class to it, which identifies the anchor as an MDL navigation link. You then use the words INBOX, SPAM, and TRASH as the content for the anchor tags. Next, you create a tag to define the layout’s primary content and assign the mdl-layout__content class to it. The mdl-layout__content class is mandatory for defining the container as the MDL layout content. You then use the closing tags. Figure 5-3 shows the code output. 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

Figure 5-3Output of the fixed header and a normal drawer As you can see, you have created a fixed header that is visible on smaller screens too. In addition, when you click the navicon (i.e., the menu icon), the drawer slides out, as shown in Figure 5-4. 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

Figure 5-4Drawer slides showing the content For a fixed drawer, all you need to do is to introduce the mdl-layout–fixed-drawer class to the first

within which the whole functional markup is defined. The

line of code looks like this:

Figure 5-5 shows the output of the code. 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

Figure 5-5Fixed drawer Suppose you want a scrollable header that scrolls with the content. In such a scenario, you can remove the mdl-layout–fixed-header class from the first parent

. In the

tag, you need to introduce the mdl-layout__header—scroll class. The rest of the code is the same, except that you need to put comprehensive content within the layout content tag. The output will be similar, but when you scroll, the header will not be fixed but will scroll with the content. Kindly refer to the code bundle for the entire code and output. In Listing 5-2, you will look at the code for a fixed header with scrollable tabs .

INBOX SPAM TRASH

SUPERMAIL007

Lorem ipsum dolor sit amet… (content)

Lorem ipsum dolor sit amet, …(content)

Lorem ipsum dolor sit amet…(content)

Listing 5-2Fixed Header with Scrollable Tabs In Listing 5-2, you define the parent

and assign the mdl-layout, mdl-js-layout, and mdl-layout–fixed-header classes to it. You then create a

tag to which you assign the mdl-layout__header class. Then, you create another

within the

tags to which you assign the mdl-layout__header-row class. You proceed to code a tag to which you assign the mdl-layout-title class. You define the title content as SUPERMAIL007 . Next, you create the tabs. You create a

element to which you assign the mdl-layout__tab-bar and mdl-js-ripple-effect classes. The mdl-layout__tab-bar class identifies the container as an MDL tab bar, whereas the mdl-js-ripple-effect class is used for the immersive ripple effect. You then create three anchor links to which you assign the #scroll-tab-1, #scroll-tab-2, and #scroll-tab-3 href attributes, respectively. You also assign the mdl-layout__tab classes to each anchor link. In the first anchor link, you assign the is-active class because it should be active by default. Use the

closing tag to wrap up this section of the code. You then proceed to create a drawer similar to the example in Listing 5-1. Next, you define the layout content within the tags and assign the mdl-layout__content class to the tag. You then create the first

tag and assign the mdl-layout__tab-panel class to it. Only for this

tag, you introduce the is-active class. Then you assign an ID whose value is the href attribute to the first anchor tag created in the

tag (i.e., scroll-tab-1). Next, you create a

and assign the page content class to it and define the content. Similarly, you create two more sections similarly, the only difference being the ID assigned to them. You assign scroll-tab-2 and scroll-tab-3 as the value of the ID for the second and third sections, respectively. Moving forward, you complete the code with the necessary closing tags. Figure 5-6 shows the output of the code. 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

Figure 5-6Output of scrollable tabs (We have used random content of Lorem Ipsum… in the code to illustrate this example, for the entire code with the massive content, refer to the code bundle for this chapter.) Next, you will learn about the grid system in MDL. The grid system in MDL is quite easy and helps lay out the content for multiple devices based on different screen sizes. By default, a grid in MDL has 12 columns for the desktop screen, 8 for tablets, and 4 for phone sizes, and cells are laid out sequentially in a row. As written on the MDL web site, there are two exceptions in MDL grid system.

如果一个单元格不适合某个屏幕大小的行，它将进入下一行。
如果某个单元格的指定列大小等于或大于当前屏幕大小的列数，则它会占据整行。

Listing 5-3 shows the code sample for a grid layout.

Cloud

6 (8 tablet)

4 (6 tablet)

2 (4 phone)

Listing 5-3 Grid Layout Listing 5-3 uses the following classes:

mdl-grid:将标识为 mdl 网格组件
mdl-cell:将标识为 mdl 单元
mdl-cell - 1-col:将单元格的列大小设置为桌面屏幕上 12 个单元格中的 1 个单元格
mdl-cell - 4-col:将单元格的列大小设置为桌面屏幕上 12 个单元格中的 4 个
mdl-cell - 8-col-tablet:在 tablet 屏幕上将单元格的列大小设置为 8 个单元格
mdl-cell - 6-col-tablet:在 tablet 屏幕上将单元格的列大小设置为 6 个单元格
mdl-cell - 4-col-phone:在电话屏幕上将单元格的列大小设置为 4 个单元格

If you see the code, you have used the mdl-grid class for the first parent

. You move on to create 12 child

s for 12 cells, and you use inline CSS styles for the borders of each cell. You assign mdl-cell and mdl-cell–1-col to each cell in the code, defining a total of 12 cells. Next, you create another parent

, and similar to the first

, you assign the mdl-grid class to it. Then, you create three child

cells and assign mdl-cell and mdl-cell–4-col classes for it. In the next parent

, you create a grid with three cells and define screen sizes for each child

cell by customizing the size of each cell on the default desktop, tablet, and phone. Figure 5-7 shows the output of the code. 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

Figure 5-7Grid system sample in MDL Now that you have gained insight into some of the components of MDL, let’s look at an example: how to build a web page with MDL.

使用 MDL 构建直观的网页

In this section, you will take a look at the process of building a web page for Anirudh Prabhu, co-author of this book. It is a simple example. We will divide it into several steps and then apply the finishing touches to create an aesthetic page.

步骤 1:创建部分

Listing 5-4 shows step 1, wherein you create the section of the web page and include all the JavaScript and CSS files. Website Using Material Design Lite Listing 5-4 Section with All the JavaScript and CSS Files In Listing 5-4, you include the viewport attribute and the MDL files. You also add a custom style sheet, i.e., style. css .

步骤 2:创建带抽屉的固定页眉

In this section, you will add a code snippet between the tags wherein you will define a fixed header and the header tile along with the drawer. See Listing 5-5.

Anirudh Prabhu

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur officiis animi, soluta ab deserunt dolore fugit voluptatem laboriosam, magni. Eligendi quia quasi qui cupiditate optio fugit vel, suscipit harum illum.

Listing 5-5Defining a Fixed Header and the Header Tile Along with the Drawer In Listing 5-5, initially, you define the

element to which you assign the mdl-layout, mdl-js-layout, mdl-layout–fixed-header, and mdl-layout–fixed-tabs classes. Then, you define the

tag to which you assign the mdl-layout__header class. Within the

tags, you create another

to which you assign the mdl-layout__header-row class, followed by creating a element where you define the layout title using the mdl-layout-title class. Close the

tag and code another

for the fixed tabs to which you assign the mdl-layout__tab-bar and mdl-js-ripple-effect classes. Once you define the name of the tabs and close the concluding

tag, you define the code for the drawer. You code a

and assign the mdl-layout__drawer class to it. You create the layout title for the drawer and then code another

to which you assign a custom avatar class. Then you introduce an image with the help of the tags. Next you code another

, and you define the content for the drawer text. Next, you define the custom CSS styles in the style.css file, as shown Listing 5-6. .mdl-layout__drawer-button, .mdl-layout__drawer-button i { color: white; } @media (max-width: 900px) { .mdl-layout__drawer-button { width: 100%; margin: 0; background-color: transparent; } } img { max-width: 100%; height: auto; display: block; } .avatar { height: 200px; width: 200px; margin: 0 auto 2em; } .avatar-img { height: 200px; width: 200px; margin: 0 auto; border-radius: 50%; } .drawer-text { padding: 1em; text-align: center; } Listing 5-6Defining the Custom CSS styles In Listing 5-6, you define the color of the drawer button as white and define the background color for it. Then, you define the style for the image, i.e., the maximum width along with the height and display attributes. You define the styles for the avatar class and for the avatar-img classes, in other words, for the height, width, and margin (and the border radius for the image). Finally, you use custom styles to center the drawer text. Figure 5-8 shows the output of the code. 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

Figure 5-8Output of a header and drawer If you click the navicon to display the sliding drawer, you can see the drawer image and content, as shown in Figure 5-9. 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

Figure 5-9Sliding drawer content

步骤 3:创建“关于”部分

You will now define the content for the About section , as shown in Listing 5-7.

I’m Anirudh Prabhu

I’m a passionate mobile photographer

Welcome to my web page! I wish to display my mobile photography thru this web page.

Various mobiles and gadgets with which i have performed photography.

Xiaomi MI3

OnePlus 2

Sony DSC QX100

Listing 5-7About Section Code In Listing 5-7, you code a tag to which you assign the mdl-layout__content class. You create a

and assign the mdl-layout__tab-panel and is-active classes to it. You also assign an ID of fixed-tab-1 to it, which is the href attribute for the anchor tag for the About section content. Within this, you code another

to define the page content. You create another section within and assign the custom class hero-section to it. Within this, you create another

to which you assign the custom hero-text class along with the mdl-typography–text-center class. This centers the text. You then define the content using different typography classes such as mdl-typography–display-2 and mdl-typography–display-1, which decides the font weight of the content. Next, you create a button, a circular one also called the fab button, by defining the mdl-button, mdl-js-button, mdl-button—fab, mdl-js-ripple-effect, and mdl-button—accent classes to define the look of the button. You used a drop-down MDL arrow and embed it in the button. After the hero section, you define a new parent

and assign the grid functionality to it. You then define the content for this introduction section. You define the mdl-cell mdl-cell–12-col class to it so that the content occupies 12 columns on a desktop. After you jot down the content, you then create three circles by using mdl-cell, mdl-cell–5-col, mdl-cell–1-col-tablet, and mdl-cell–hide-phone. This defines the cells based on the screen size such as tablets and phone, especially mdl-cell–hide-phone, which hides the content on a small phone. Next, you create the topic container section wherein you define the content that will eventually be placed next to the circles. Now you create custom styles for the section, as shown in Listing 5-8. .hero-section { height: 100vh; /* IE11 doesn’t like min-height / width: 100%; margin: 0; padding: 0; background-color: rgba(121,85,72, 0.6); background-image: -webkit-linear-gradient(rgba(121,85,72, 0.3), rgba(121,85,72, 0.3)), url(https://pacdn.500px.org/2185509/e9a80e8a5bb01d46da6830d55a34c6c61146d27d/cover_2048.jpg?2); background-image: linear-gradient(rgba(121,85,72, 0.3), rgba(121,85,72, 0.3)), url(https://pacdn.500px.org/2185509/e9a80e8a5bb01d46da6830d55a34c6c61146d27d/cover_2048.jpg?2); background-position: center center; background-repeat: no-repeat; background-size: cover; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin: auto; } .hero-text { color: white; margin: auto ; } @media screen and (max-width: 580px) { .hero-text p { white-space: pre-line; } } .kitty-hero__text-button, .mdl-button–fab.kitty-hero__text-button { position: absolute; bottom: -28px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } / ABOUT KITTY INTRO + CARDS / .intro-section, .cards-section { max-width: 960px; } / ABOUT KITTY INTRO */ .intro-section, .mdl-grid.intro-section { padding: 5em 2em 5em; } .about-kitty p { max-width: 640px; margin: auto ; } .circle-container { width: 100%; min-height: 100px; padding: 2em 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .circle-container .circle { height: 16px; width: 16px; background-color: #c51162; border-radius: 50%; margin: 0 3px 9px; } .topics-container { padding: 2em 0; } .topics-container .topic { font-size: 20px; margin: 0 2px 5px; } @media screen and (max-width: 480px) { .topics-container .topic { margin-bottom: 0.5em; } } .embedded-img { max-width: 150px; max-height: 150px; margin: 0.5em; border-radius: 50%; } Listing 5-8Custom Styles In the custom style sheet, you are essentially defining the background image, height, width, color, and flex characteristics for the hero section. You thereon define the text for the content with the custom hero-text class. You then define the maximum width of the intro-section followed by assigning the margin and padding for the paragraphs as well as for the element defined with the about-kitty class (which incidentally defines the circles and their respective topics). Next, you define the styles for the circle container and the subsequent circles. Moving forward, you define the styles for the topic container and topics along with the media query. Finally, you define the maximum width and height along with the border radius for the embedded image. Figure 5-10 shows the output of the code. 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

Figure 5-10Output of the About section

步骤 4:插入包含内容的图像

Now you will develop both the About and Moments tabs, as shown in Listing 5-9.

              Taking an image, freezing a moment, reveals how rich reality truly is.

              — Anonymous

Listing 5-9Code for About and Moments Tabs In Listing 5-9, you code a

and assign the mdl-grid, mdl-grid–no-spacing, and fullwidth- panel classes. While the mdl-grid–no-spacing class modifies the grid cells to have no margin between them, the fullwidth-panel class creates a panel that has a size of the entire grid. Within that

, you create another

and allocate a space of 12 columns using the mdl-cell–12-col class. You assign the typography class to the content and center the text. You also use the quote-panel styling for the content using the quote-panel class. You then create a quote using the HTML

tags. Moving forward, you assign custom styles for the panel and insert a background image in the custom CSS style sheet, i.e., style.css, as shown in Listing 5-10. /* FULLWIDTH BACKGROUND SECTION */ .fullwidth-panel { color: white; background-color: rgba(156, 39, 176, 0.6); } .fullwidth-panel p { max-width: 640px; margin: auto; } .quote-panel { background-image: -webkit-linear-gradient(rgba(63, 81, 181, 0.5), rgba(63, 81, 181, 0.5)), url(‘https://udemy-images.udemy.com/course/750x422/394968_538b_7.jpg’); background-image: linear-gradient(rgba(63, 81, 181, 0.5), rgba(63, 81, 181, 0.5)), url(‘https://udemy-images.udemy.com/course/750x422/394968_538b_7.jpg’); background-position: center 5%; background-repeat: no-repeat; background-size: cover; padding: 4em 2em 2em; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-line-pack: start; align-content: flex-start; } @media screen and (min-width: 800px) { .quote-panel { background-position: center 0; padding: 6em 2em; } } @media screen and (min-width: 1200px) { .quote-panel { background-position: center 8%; padding: 10em 2em 8em; } } Listing 5-10Assigning Custom Styles In Listing 5-10, you assign the white color and define the background color to the section containing the fullwidth- panel class. You also define the maximum width and set an auto margin to it. Then, for the section pertaining to the quote-panel class, you insert a background image and define its position and size along with the padding. Using media queries, you assign the background position and padding for both the 800px and 1200px screen sizes. Figure 5-11 shows the output of the code. Figure 5-11Image with text

步骤 5:为“时刻”选项卡开发内容

Next, you will create the content for the second fixed tab, called Moments, which is next to the About fixed tab, as shown in Listing 5-11.

Roses everywhere

Roses everywhere in flower market

Random flower

Lilac

Lilacs are a beloved, fragrant shrub that produce clusters of light-purple flowers.

Beautiful sunset at aguada beach

Beautiful sunset at aguada beach in Goa

Listing 5-11Code for Second Set of Fixed Tabs In Listing 5-11, you define the content for the second fixed tab, called Moments. Initially, you code a

and assign the grid class to it. You then jot down the code for four cards. For the first card, you use the mdl-card class and assign the space of 6 columns for the desktop and 12 columns for the tablet size using the mdl-cell, mdl-cell–6-col, and mdl-cell–12-col-tablet classes. Then, you define a shadow for aesthetics using the mdl-shadow–2dp class. Next, you code a

and assign a title for the card using the mdl-card__title class. Thereon, you define the title text using the mdl-card__title-text class. Next, you assign the supporting content to the title using the mdl-card__supporting-text class. Similarly, you create three more cards using different names for the content. After you create the cards, you define custom styles in the custom style.css sheet, as shown in Listing 5-12. /* CARDS SECTION */ .cards-section { padding: 5em 0; } .mdl-card__title { min-height: 300px; } .mdl-card__title > .mdl-card__title-text { color: white; } .home-bringing-card .mdl-card__title { background: -webkit-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.8)), url(‘https://drscdn.500px.org/photo/210599845/q%3D80_h%3D300/v2?webp=true&sig=94f8683780d7d009224f477342bf4c34740920b5b75576cb8793ff52e7229b1a’) center / cover; background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.8)), url(‘https://drscdn.500px.org/photo/210599845/q%3D80_h%3D300/v2?webp=true&sig=94f8683780d7d009224f477342bf4c34740920b5b75576cb8793ff52e7229b1a’) center / cover; } .play-card .mdl-card__title { background: url(‘https://drscdn.500px.org/photo/225478901/q%3D80_h%3D450/v2?webp=true&sig=ddd21866e9502c5f56aef387adf4cc0553513de4582ed30a5bc57ba817f43b06’) center / cover; } .image-card { background: url(‘https://s3-us-west-2.amazonaws.com/s.cdpn.io/234228/image-card.jpg’) center / cover; } .image-card > .mdl-card__actions { height: 52px; padding: 16px; background: rgba(0, 0, 0, 0.6); } .image-card__title { color: #fff; font-size: 14px; font-weight: 500; } .litter-card .mdl-card__title { background: -webkit-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.8)), url(‘https://drscdn.500px.org/photo/187345183/q%3D80_h%3D450/v2?webp=true&sig=883a5a5734775d4b4084bd4f5fe7cd7ac9728bf0b6fc5d4ee91a522444023e6e’) center / cover; background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.8)), url(‘https://drscdn.500px.org/photo/187345183/q%3D80_h%3D450/v2?webp=true&sig=883a5a5734775d4b4084bd4f5fe7cd7ac9728bf0b6fc5d4ee91a522444023e6e’) center / cover; } .diet-card .mdl-card__title { background: -webkit-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.8)), url(‘https://drscdn.500px.org/photo/109883725/q%3D80_h%3D450/v2?webp=true&sig=29611a8077b1b73ce190f28e138ed7147973317e15ba8c9ed418a4f797683df8’) center / cover; background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.8)), url(‘https://drscdn.500px.org/photo/109883725/q%3D80_h%3D450/v2?webp=true&sig=29611a8077b1b73ce190f28e138ed7147973317e15ba8c9ed418a4f797683df8’) center / cover; } .card-small { min-height: auto; } .card-small > .mdl-card__title { color: rgba(0, 0, 0, 0.87); height: auto; min-height: auto; } .card-small .mdl-card__title-text { font-size: 16px; } .card-small .mdl-card__title-text:before { content: “”; display: inline-block; margin-right: 0.5em; width: 18px; height: 18px; background-color: #c51162; border-radius: 50%; } Listing 5-12Defining Custom Styles in the Custom style.css Sheet In Listing 5-12, you assign the padding for the section containing the cards-section class. You then define the minimum height and the white color for the card title section. Thereon, you define the custom styles and insert a background image for each of the four cards. Moving on, you define the minimum height of the card for smaller screens in addition to defining the color, height, and minimum height for the smaller screen-sized cards and the section containing the card title. You also define the font size, margins , height, background color, and border radius for the styling of the cards on smaller screens, as well as the title text. Figure 5-12 shows the output of the code. 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

Figure 5-12Moments tab content

步骤 6:设计页脚部分

Finally, you will design a form and the footer section , as shown in Listing 5-13.

Your name

Your email

Join my fans

info@amp.com

twitter Google+ Facebook

Listing 5-13Form and the Footer Section In Listing 5-13, you code a

and assign the grid class along with the no spacing class. You then define the space occupied by the grid columns on a tablet, phone, and desktop screen sizes. You assign custom classes to it so that you can use custom styles in the style.css sheet. You also assign the brown shade to this section using the mdl-color–brown-50 class. Moving forward, you define the form within the tags. Inside the tags, you create a

and assign mdl-textfield, mdl-js-textfield, and mdl-textfield–floating-label to design the text fields and use the MDL behavior for those fields. You create the Name and Email fields by adding the mdl-textfield__input to the input tag and mdl-textfield__label to the tags apart from defining the type of the text fields. You then create a button. First, you create a container for the button by using the button-container class. Then, you define another

element within that

and assign the mdl-button, mdl-js-button, mdl-button—raised, mdl-js-ripple-effect, and mdl-button—accent classes. This creates the button, assigns the mdl behavior, and creates the required effects and color to the button . Then, you create a form. Once you are done with the form, you create the contact panel section to the right side of the form. You define another

and assign the column space for the cells depending on the screen size. You then define the typography, color contrast, and font using the mdl-typography–title-color-contrast, mdl-typography–text-nowrap, and mdl-typography–font-thin classes. Thereon, you define the e-mail icon using the material-icons class to the enclosed tags. Then, you create another paragraph tags and create three anchor tags and define the button classes for the Twitter, Google+, and Facebook buttons using the mdl-button, mdl-js-button, mdl-button—raised, and mdl-js-ripple-effect classes. Finally, you define the footer by using the

摘要

In this chapter, you learned about the subtle nuances of the intuitive MDL framework. It is a lightweight framework and can help you design an interactive web site with ease. It is quite resourceful and is a vital cog in the wheel for small projects compared to heavyweight frameworks because it helps you build remarkable, immersive web pages. In the next chapter, you will look at the last light framework/utility covered in this book, called Susy.

六、Susy 简介

创建 4×3 响应网格布局

There are many ways to install Susy, but for this example, we will be using Node Package Manager (NPM ) and a task runner called Grunt to get going. We will walk you through each phase in this example. Follow these steps:

1.创建项目目录。
2.在创建的目录中执行 npm init 命令。这将初始化目录中的节点项目，并创建执行项目所需的文件和目录。参见图 6-1 。图 6-1 使用 npm init 创建项目
3.使用以下命令通过 NPM 安装 Susy:NPM install Susy 但是，如果您使用的是 Linux 或 Mac，则需要使用 sudo 来执行安装。由于在本例中我们使用的是 Mac，我们将使用以下命令:sudo npm install susy 图 6-2 显示了我们输入该命令的终端。图 6-2 Susy 的安装
4.您将安装一个名为 Grunt 的任务运行器(一个构建自动化工具)。当你需要执行重复的任务时，比如缩小、编译、单元测试和林挺等等，Grunt 是非常有用的。它在很大程度上简化了任务，是实时 web 设计项目中非常好的工具包。关于安装 Grunt 的步骤，请参考以下网站:gruntjs.com/installing-grunt。npm 安装–保存-开发任务
5.为 Grunt 安装 Sass 插件。这可以通过以下命令完成:NPM install grunt-contrib-sass-save-dev 然而，如果您使用的是基于 Mac 或 Linux 的系统，则需要在前面的命令之前添加 sudo，如图 6-3 所示。图 6-3 安装用于 Grunt 的 Sass 插件
6.在项目根目录下创建 Gruntfile.js。这个文件需要包含所有普通任务运行者的信息，如清单 6-1 所示。module . exports = function(grunt){//项目配置。grunt . init config({ sass:{ dist:{ options:{ style:’ expanded ‘，require: ‘susy’ }，files:{ ’ CSS/style . CSS ‘:’ scss/style . scss ’ } })；//加载提供“sass”任务的插件。grunt . loadnpmtasks(’ grunt-contrib-sass ')；//默认任务。grunt.registerTask('default ‘，[’ sass '])；};清单 6-1 Grunt 任务运行器的配置图 6-4 显示了文本编辑器中的配置。图 6-4 Grunt 任务运行程序的配置 grunt.initConfig 部分包含项目所需的 Grunt 配置。接下来，从github.com/gruntjs/grunt-contrib-sass加载项目所需的 Sass 插件 Grunt。您可以按照前面提到的网站上的安装过程来安装 Sass 插件。加载插件后，您可以定义需要自动化的任务。请参考相同的网站以查看详细的过程。
7.在 sass 目录中创建您的 Sass 文件。对于本项目，您将创建一个 4×3 网格布局，通常用于显示照片库。清单 6-2 显示了网格的 HTML 代码。<！DOCTYPE html>Susy 示例
- <Li class = "李 > <李 class = " block _ _ item "></李> <李 class = " block _ _ item "></李> <李 class = " block _ _ item "></李> <李 class = " block _ _ item "></李> < /ul >
8.在 scss 文件夹的 style.scss 文件中定义 Sass 代码。这个文件的代码如清单 6-3 所示。首先，使用 Sass 的@import 组件将 Susy 导入到 Sass 文件中。接下来是定义 susy 配置，它在 Susy()中指定。该配置将包含列数、装订线、容器最大宽度等的值。然后使用 Sass 变量为媒体查询定义颜色和断点。接下来，您将为类容器和 block_item 定义样式。您使用 Susy 框架中可用的 mixins 容器()、gutter()和 gallery()。container() mixin 将容器位置设置为居中，并在配置中指定最大宽度。同样，gutter()设置装订线间距。gallery() mixin 用于创建所需的块布局。这个 mixin 接受所需的列数作为参数。@导入“susy”；$susy:(列:12，槽:1/4，容器:71.25rem，全局框大小:边框，)；//colors $ color-primary:# 38a1d 6；$ color-secondary:# 16f4d 0；$ color-thirty:# fcee 21；$ color-grey:# a1ac b5；$ color-grey-light:# DCE 8 ef； $KaTeX parse error: Expected 'EOF', got '#' at position 10: 彩色-灰色-深色:#̲ 333；//断点$ mobile-landscape:30 rem；//480 px $ table t:40 rem；//640 px $平板全:48rem//768 px $ desktop:64 rem；//1024 px $宽屏 : 71.25 r e m / / 1140 p x ∗ b o x − s i z i n g : b o r d e r − b o x ；宽屏:71.25rem//1140 px * { box-sizing:border-box；} %clearfix { &:在{内容: ""之后；显示:表格；明确:两者都有；} } body { padding:0 . 625 rem；} .容器{ @ include container()；}节{ @ extend % clearfixmargin-bottom:gutter()；} .块{ margin:0；@ extend % clearfix} .block _ _ item { background-color:$ color-thirty；身高:8 雷姆；margin-bottom:gutter()；列表样式:无；&:n-last-child(-n+2){ margin-bottom:0；} @ media(min-width:$ table t){ @ include gallery(4)；&:n-last-child(-n+3){ margin-bottom:0；} } @ media(min-width:$ desktop){ @ include gallery(3)；&:n-last-child(-n+4){ margin-bottom:0；} } }清单 6-3 定义样式
9.使用以下命令从终端根目录中运行 Grunt 文件
10.style.scss 文件编译成 style.css，现在当你点击 HMTL 文件时，你会看到如图 6-5 所示的输出。图 6-5 4×3 网格的输出

If you resize the browser, then you will see that the grid behaves in a responsive way as defined in the code. Also, if you check the style.css file created by compiling the style.scss Sass file, you can see the code shown in Listing 6-4. * { box-sizing: border-box; } section:after, .block:after { content: “”; display: table; clear: both; } body { padding: 0 .625rem; } .container { max-width: 71.25rem; margin-left: auto; margin-right: auto; } .container:after { content: " "; display: block; clear: both; } section { margin-bottom: 1.6949152542%; } .block { margin: 0; } .block__item { background-color: #fcee21; height: 8rem; margin-bottom: 1.6949152542%; list-style: none; } .block__item:nth-last-child(-n+2) { margin-bottom: 0; } @media (min-width: 40rem) { .block__item { width: 32.2033898305%; float: left; } .block__item:nth-child(3n + 1) { margin-left: 0; margin-right: -100%; clear: both; margin-left: 0; } .block__item:nth-child(3n + 2) { margin-left: 33.8983050847%; margin-right: -100%; clear: none; } .block__item:nth-child(3n + 3) { margin-left: 67.7966101695%; margin-right: -100%; clear: none; } .block__item:nth-last-child(-n+3) { margin-bottom: 0; } } @media (min-width : 64rem) { .block__item { width: 23.7288135593%; float: left; } .block__item:nth-child(4n + 1) { margin-left: 0; margin-right: -100%; clear: both; margin-left: 0; } .block__item:nth-child(4n + 2) { margin-left: 25.4237288136%; margin-right: -100%; clear: none; } .block__item:nth-child(4n + 3) { margin-left: 50.8474576271%; margin-right: -100%; clear: none; } .block__item:nth-child(4n + 4) { margin-left: 76.2711864407%; margin-right: -100%; clear: none; } .block__item:nth-last-child(-n+4) { margin-bottom: 0; } } /*# sourceMappingURL=style.css.map */ Listing 6-4Style.css This is how the mixins and variables created in Sass were compiled to CSS code, helping you keep the content and styling separate .

摘要

In this chapter, you got an overview of Susy. With Susy, you can develop interactive and advanced grid layouts for your web designing projects. The learning curve of grids is steep, and the more you delve deep, you will realize that there is much more to learn. In a way, more is less (pun intended). In this book we covered five frameworks that you can use instead of Bootstrap, Foundation, and Materialize. We stressed how these lightweight frameworks provide enough capability to design immersive web sites. However, this book was just an introduction to these frameworks. You are just on the shore of the island; the sea of knowledge is far beyond. In addition to these frameworks, there are several other user interface kits and web design toolkits that can make your web designing projects a breeze. Ideally, this book has helped you gain insight into the inner workings of these streamlined frameworks and whetted your appetite to go for more. Keep learning!