CSS Framework Alternatives (eBook)

A Senior Technical writer by profession, Aravind Shenoy's core interests are Technical Writing, Content Writing, Content Development, Web Design, and Business Analysis. He was born and raised in Mumbai and resides there. A music buff - he loves listening to Rock n' Roll & Rap. Oasis, R.E.M, The Doors, Dire Straits, Coldplay, Jimi Hendrix, U2, Guns n’ Roses and Michael Jackson rule his playlists. An engineering graduate from the Manipal Institute of Technology and an author of several books, he is a keen learner and always believes that there is always a steep learning curve as Life is all about learning. In summary, as he quips “The most important thing is to be happy - it’s all that matters. After all, we are here for a good time, not a long time". Anirudh Prabhu is a UI Developer with more than 7 years of experience. He specializes in HTML, CSS, JavaScript, jQuery, Sass, LESS, Twitter Bootstrap. He has been involved in building training materiala for HTML, CSS and jQuery for twenty19 which is portal for providing training for freshers / interns, and has authored “Introducing Materialize,” "Introducing SEO,” and “Beginning CSS Preprocessors” for Apress. 

Table of Contents 5
About the Authors 8
About the Technical Reviewer 9
Acknowledgments 10
Chapter 1: Choosing Lightweight Frameworks for Intuitive Web Design 11
What Are Frameworks? 12
Components of a CSS Framework 13
Advantages of Using a CSS Framework 14
Various Popular Frameworks 15
Bootstrap 15
Foundation 16
Materialize 17
Skeleton 18
Milligram 19
UIkit 20
Material Design Lite 21
Susy 21
Choosing a Framework 22
Concept of Grids 23
Summary 24
Chapter 2: Building a Landing Page with Skeleton 25
Installing Skeleton 25
Skeleton’s Grid System 29
An Overview of Skeleton’s Attributes 34
Building a Landing Web Page with Skeleton 35
Step 1: Defining the Content Area 35
Step 2: Completing the < body>
Step 3: Defining the Freelance Portal 39
Step 4: Completing the Sections 42
Step 5: Designing a Sign-up Form 47
Step 6: Creating a Footer 48
Summary 49
Chapter 3: Building a Product Page with Milligram 51
Installing Milligram 51
Overview of the Milligram Framework 54
Grid System in Milligram 56
Building a Product Page with Milligram 58
Step 1: Defining the Header 58
Step 2: Defining the Navigation 61
Step 3: Defining the Banner Area 63
Step 4: Designing the Content Area 70
Step 5: Creating the Pricing Area 73
Step 6: Creating the Footer 75
Summary 78
Chapter 4: Introducing UIkit 79
Installing UIkit 79
Grids, Cards, Flex, and Width 81
Animations 99
Scrollspy with Animations 106
Accordions 110
Icons 114
Summary 116
Chapter 5: Material Design Lite Explained 117
Installing MDL 118
MDL Layout 119
Building an Intuitive Web Page Using MDL 131
Step 1: Creating the < head>
Step 2: Creating a Fixed Header with a Drawer 132
Step 3: Creating the About Section 136
Step 4: Inserting an Image with Content 143
Step 5: Developing the Content for the Moments Tab 146
Step 6: Designing the Footer Section 153
Summary 161
Chapter 6: Susy Explained 162
Creating a 4×3 Responsive Grid Layout 163
Summary 176
Index 177