CSS Framework Alternatives - Explore Five Lightweight Alternatives to Bootstrap and Foundation with Project Examples

Table of Contents

About the Authors

About the Technical Reviewer

Acknowledgments

Chapter 1: Choosing Lightweight Frameworks for Intuitive Web Design

What Are Frameworks?

Components of a CSS Framework

Advantages of Using a CSS Framework

Various Popular Frameworks

Bootstrap

Foundation

Materialize

Skeleton

Milligram

UIkit

Material Design Lite

Susy

Choosing a Framework

Concept of Grids

Summary

Chapter 2: Building a Landing Page with Skeleton

Installing Skeleton

Skeleton’s Grid System

An Overview of Skeleton’s Attributes

Building a Landing Web Page with Skeleton

Step 1: Defining the Content Area

Step 2: Completing the  Tag Content

Step 3: Defining the Freelance Portal

Step 4: Completing the Sections

Step 5: Designing a Sign-up Form

Step 6: Creating a Footer

Summary

Chapter 3: Building a Product Page with Milligram

Installing Milligram

Overview of the Milligram Framework

Grid System in Milligram

Building a Product Page with Milligram

Step 1: Defining the Header

Step 2: Defining the Navigation

Step 3: Defining the Banner Area

Step 4: Designing the Content Area

Step 5: Creating the Pricing Area

Step 6: Creating the Footer

Summary

Chapter 4: Introducing UIkit

Installing UIkit

Grids, Cards, Flex, and Width

Animations

Scrollspy with Animations

Accordions

Icons

Summary

Chapter 5: Material Design Lite Explained

Installing MDL

MDL Layout

Building an Intuitive Web Page Using MDL

Step 1: Creating the  Section

Step 2: Creating a Fixed Header with a Drawer

Step 3: Creating the About Section

Step 4: Inserting an Image with Content

Step 5: Developing the Content for the Moments Tab

Step 6: Designing the Footer Section

Summary

Chapter 6: Susy Explained

Creating a 4×3 Responsive Grid Layout

Summary

Index