CSS-框架替代指南-一-

heading. Back in Listing 3-14, you define the second child

and define the

heading with the content, along with the links , which you define in the anchor tags. The third child

contains the conditions and policy links defined between the

and anchor tags. That sums up the code. Figure 3-12 shows the snapshot of the footer part of the code. Figure 3-12Output of the footer area

摘要

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)

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                                
                                                    <a class = "mdl-navigation__link" href = ""                      style = "color:white">INBOX                   <a class = "mdl-navigation__link" href = ""                      style = "color:white">SPAM                   <a class = "mdl-navigation__link" href = ""                      style = "color:white">TRASH                             
                     
              SUPERMAIL007                             INBOX                SPAM                           TRASH                       
                        
  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 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 that identifies the anchor as an MDL navigation link. You then use the words INBOX, SPAM, and TRASH as the content for the anchor tags. You complete this header section with a closing 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 .

                                     

                                 SUPERMAIL007             

                           

                 INBOX                SPAM                TRASH             

                     

              SUPERMAIL007                             INBOX                SPAM                TRASH                       

                                        

  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

    

  Cloud

    

  Cloud

    

  Cloud

    

  Cloud

    

  Cloud

    

  Cloud

    

  Cloud

    

  Cloud

    

  Cloud

    

  Cloud

    

  Cloud

    

  Cloud

    

  Cloud

    

  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     

           

        About       Moments     

       

      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             

                             keyboard_arrow_down                        

                     

                            

            

              

                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(pacdn.500px.org/2185509/e9a…);   background-image: linear-gradient(rgba(121,85,72, 0.3), rgba(121,85,72, 0.3)), url(pacdn.500px.org/2185509/e9a…);   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('udemy-images.udemy.com/course/750x…');   background-image: linear-gradient(rgba(63, 81, 181, 0.5), rgba(63, 81, 181, 0.5)), url('udemy-images.udemy.com/course/750x…');   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

              

              

                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('drscdn.500px.org/photo/21059…') center / cover;   background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.8)), url('drscdn.500px.org/photo/21059…') center / cover; } .play-card .mdl-card__title {   background: url('drscdn.500px.org/photo/22547…') center / cover; } .image-card {   background: url('s3-us-west-2.amazonaws.com/s.cdpn.io/2…') 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('drscdn.500px.org/photo/18734…') center / cover;   background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.8)), url('drscdn.500px.org/photo/18734…') center / cover; } .diet-card .mdl-card__title {   background: -webkit-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.8)), url('drscdn.500px.org/photo/10988…') center / cover;   background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.8)), url('drscdn.500px.org/photo/10988…') 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                        

                            

               

          

            email info@amp.com         

          

            twitter           Google+           Facebook         

        

             

                       

          

            
  • Help
            
  • Privacy & Terms
          

        

              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 tags to which you assign the mdl-mini-footer and mdl-color--brown-200 classes for the footer type due to which it will inherit the footer type and brown color. Within this section, you define the position of the footer using the mdl-mini-footer__left-section, which will align it to the left. You then define the link list using the

  and
  • tags. Moving on, you define the custom styles for the preceding code, as shown in Listing 5-14. .contact-intro {   color: rgba(255, 255, 255, 0.87); } .contact-panel {   padding: 6em 4em;   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; } .mdl-textfield {   display: block;   width: 100%;   padding: 20px 0; } @media screen and (min-width: 800px) {   .subscribe-button {     float: right;   } } .address-panel {   background-color: #dbdef1;   color: rgba(255, 255, 255, 0.87); } .address-panel .material-icons {   position: relative;   top: 0.2em;   display: inline-block ;   height: 30px;   width: 30px;   line-height: 30px;   background-color: #ff4081;   padding: 0.5em;   border-radius: 50%; } .mdl-mini-footer, .mdl-mini-footer .mdl-logo, .mdl-mini-footer--link-list a, .mdl-mini-footer__link-list a {   color: rgba(0, 0, 0, 0.54); } ul {   list-style-type: none; } /* UTILITIES */ .clearfix:after {   content: "";   display: table;   clear: both; } .float-right {   float: right; } .float-left {   float: left; } Listing 5-14Custom Styles for Listing 5-13 In Listing 5-14, you define the color for the contact and assign the padding and display properties for the contact-panel section. You also define the display type, width, and padding for the text fields in the form. You shift the submit button of the form to the right of the form section. For the same button, you use the clearfix and float properties to automatically clear the child elements without using any additional markup. You move on to define the background color of the panel along with the panel color. You also define the position, height, inline block display, padding, and border radius for the material icons. You set the color to the logo and link list of the footer. You remove the listing bullets from the list using the list-style- type : none; property. Figure 5-13 shows how the final page will look. Figure 5-13Complete web page with the footer section

    摘要

    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. 1.创建项目目录。
    2. 2.在创建的目录中执行 npm init 命令。这将初始化目录中的节点项目，并创建执行项目所需的文件和目录。参见图 6-1 。图 6-1 使用 npm init 创建项目
    3. 3.使用以下命令通过 NPM 安装 Susy:NPM install Susy 但是，如果您使用的是 Linux 或 Mac，则需要使用 sudo 来执行安装。由于在本例中我们使用的是 Mac，我们将使用以下命令:sudo npm install susy 图 6-2 显示了我们输入该命令的终端。图 6-2 Susy 的安装
    4. 4.您将安装一个名为 Grunt 的任务运行器(一个构建自动化工具)。当你需要执行重复的任务时，比如缩小、编译、单元测试和林挺等等，Grunt 是非常有用的。它在很大程度上简化了任务，是实时 web 设计项目中非常好的工具包。关于安装 Grunt 的步骤，请参考以下网站:gruntjs.com/installing-grunt。npm 安装–保存-开发任务
    5. 5.为 Grunt 安装 Sass 插件。这可以通过以下命令完成:NPM install grunt-contrib-sass-save-dev 然而，如果您使用的是基于 Mac 或 Linux 的系统，则需要在前面的命令之前添加 sudo，如图 6-3 所示。图 6-3 安装用于 Grunt 的 Sass 插件
    6. 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. 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；彩色-灰色-深色:# 333；//断点 mobile-landscape:30 rem；//480 px $table t:40 rem；//640 px$平板全:48rem//768 px $desktop:64 rem；//1024 px$宽屏: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!