CSS Framework Alternatives (eBook)

Explore Five Lightweight Alternatives to Bootstrap and Foundation with Project Examples

Anirudh Prabhu, Aravind Shenoy (Autoren)

eBook Download: PDF

2018 | 1st ed.
XIII, 171 Seiten
Apress (Verlag)
978-1-4842-3399-3 (ISBN)

Infos

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 Susy
• Build a landing webpage with Skeleton  
  
• Design a product page for a Secure VPN product with Milligram 

Who This Book Is For

Readers 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. 

Inhalt

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

Produkt-Details

• Erscheint lt. Verlag: 10.3.2018
• Zusatzinfo: XIII, 171 p. 74 illus.
• Verlagsort: Berkeley
• Sprache: englisch
• Themenwelt: Mathematik / Informatik ► Informatik ► Web / Internet
• Schlagworte: CSS • Front-end web design • Material design lite • MDL • Milligram • Skeleton • Susy • UI Kit
• ISBN-10: 1-4842-3399-9 / 1484233999
• ISBN-13: 978-1-4842-3399-3 / 9781484233993