Shenoy / Prabhu CSS Framework Alternatives

Explore Five Lightweight Alternatives to Bootstrap and Foundation with Project Examples
1. ed
ISBN: 978-1-4842-3399-3
Verlag: Apress
Format: PDF
Kopierschutz: 1 - PDF Watermark

E-Book, Englisch, 179 Seiten

Learn how to use lightweight CSS framework alternatives to build intuitive websites. This book presents five project examples that use Skeleton, Miligram, UI Kit, Material Design Lite and Susy. 

This no-nonsense introduction will help you understand the concept of designing interactive websites using these frameworks with ease. Each framework is demonstrated through a practical project in an easy-to-understand manner. 
Web design is streamlined nowadays thanks to CSS frameworks and, although Bootstrap and Foundation rule the roost with web design, you don't need an exhaustive framework like these for smaller websites.You'll get a glimpse into additional front-end frameworks which basically are pre-prepared packages containing structure of files and folders of HTML and CSS documents (some with JavaScript functions) that help designers and developers build interactive and immersive websites. 
What You'll Learn
Delve deeper into the world of CSS designs Create interactive and immersive webpages with UI Kit, Material Design Life, and SusyBuild a landing webpage with Skeleton  
Design a product page for a Secure VPN product with Milligram Who This Book Is ForReaders who are familiar with basic knowledge of HTML, CSS, and JavaScript, and experienced web designers who aren't familiar with frameworks other than Bootstrap or Foundation.


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. 

Autoren/Hrsg.

Shenoy, Aravind

Prabhu, Anirudh

Inhaltsverzeichnis

1;Table of Contents;5
2;About the Authors;8
3;About the Technical Reviewer;9
4;Acknowledgments;10
5;Chapter 1: Choosing Lightweight Frameworks for Intuitive Web Design;11
5.1;What Are Frameworks?;12
5.2;Components of a CSS Framework;13
5.3;Advantages of Using a CSS Framework;14
5.4;Various Popular Frameworks;15
5.5;Bootstrap;15
5.6;Foundation;16
5.7;Materialize;17
5.8;Skeleton;18
5.9;Milligram;19
5.10;UIkit;20
5.11;Material Design Lite;21
5.12;Susy;21
5.13;Choosing a Framework;22
5.14;Concept of Grids;23
5.15;Summary;24
6;Chapter 2: Building a Landing Page with Skeleton;25
6.1;Installing Skeleton;25
6.2;Skeleton’s Grid System;29
6.3;An Overview of Skeleton’s Attributes;34
6.4;Building a Landing Web Page with Skeleton;35
6.4.1;Step 1: Defining the Content Area;35
6.4.2;Step 2: Completing the  Tag Content;38
6.4.3;Step 3: Defining the Freelance Portal;39
6.4.4;Step 4: Completing the Sections;42
6.4.5;Step 5: Designing a Sign-up Form;47
6.4.6;Step 6: Creating a Footer;48
6.5;Summary;49
7;Chapter 3: Building a Product Page with Milligram;51
7.1;Installing Milligram;51
7.2;Overview of the Milligram Framework;54
7.3;Grid System in Milligram;56
7.4;Building a Product Page with Milligram;58
7.4.1;Step 1: Defining the Header;58
7.4.2;Step 2: Defining the Navigation;61
7.4.3;Step 3: Defining the Banner Area;63
7.4.4;Step 4: Designing the Content Area;70
7.4.5;Step 5: Creating the Pricing Area;73
7.4.6;Step 6: Creating the Footer;75
7.5;Summary;78
8;Chapter 4: Introducing UIkit;79
8.1;Installing UIkit;79
8.2;Grids, Cards, Flex, and Width;81
8.3;Animations;99
8.4;Scrollspy with Animations;106
8.5;Accordions;110
8.6;Icons;114
8.7;Summary;116
9;Chapter 5: Material Design Lite Explained;117
9.1;Installing MDL;118
9.2;MDL Layout;119
9.3;Building an Intuitive Web Page Using MDL;131
9.3.1;Step 1: Creating the  Section;131
9.3.2;Step 2: Creating a Fixed Header with a Drawer;132
9.3.3;Step 3: Creating the About Section;136
9.3.4;Step 4: Inserting an Image with Content;143
9.3.5;Step 5: Developing the Content for the Moments Tab;146
9.3.6;Step 6: Designing the Footer Section;153
9.4;Summary;161
10;Chapter 6: Susy Explained;162
10.1;Creating a 4×3 Responsive Grid Layout;163
10.2;Summary;176
11;Index;177