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

By Aravind Shenoy and Anirudh Prabhu

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.

• Language: English
• Publisher: Apress
• Release date: Mar 10, 2018
• ISBN: 9781484233993

Book preview

© Aravind Shenoy and Anirudh Prabhu 2018

Aravind Shenoy and Anirudh PrabhuCSS Framework Alternativeshttps://doi.org/10.1007/978-1-4842-3399-3_1

1. Choosing Lightweight Frameworks for Intuitive Web Design

Aravind Shenoy¹  and Anirudh Prabhu²

(1)

C-wing, 809/810, Mahavir Trinkets, Behind Huma Adlabs C-wing, 809/810, Mumbai, Maharashtra, India

(2)

A-403, Govardhan Nagar, Mumbai, India

When it comes to web design, Bootstrap, Foundation, and Materialize are probably the first frameworks that come to a designer’s mind, given their massive range of components and attributes. However, when talking about light web projects, you do not usually need a comprehensive framework like Bootstrap or Foundation (again, depending on the complexity of your project). Usually, to build a small web site, lightweight frameworks can do the job effectively and cut down the bulk, or noise, associated with massive frameworks. For example, if your web site merely needs something like a grid or some popular components commonly found in most frameworks, then you should consider a lightweight framework.

Moreover, developing web sites and web applications from scratch is quite a tedious process as it involves writing a sizeable amount of code. Maintaining that code while the web site evolves adds to the complexity. Coding from scratch (as we like to call it) is quite an endeavor, and a framework can help you write a few lines of code and incorporate reusable sets of commonly used code that you can maintain quite easily. Clean coding and upkeep are tasks easily achieved using a framework.

Therefore, to simplify your web designing tasks, using a Cascading Style Sheets (CSS) framework is a good option. As mentioned earlier, there are plenty of frameworks on the Web other than Bootstrap, Foundation, and Materialize. These light frameworks are quite streamlined and remarkable, given their resourcefulness. The adage Good things come in small packages is applicable here.

In this chapter, we explain what frameworks are and introduce the popular Bootstrap, Foundation, and Materialize. Then we will review five lightweight frameworks: Skeleton, Milligram, UIkit, Material Design Lite, and Susy. These frameworks will be used throughout the book to build interactive and immersive web pages. In doing so, you’ll form a strong basis to select the one that best suits your development needs.

What Are Frameworks?

A framework is a premeditated set of concepts, modules, and standardized criteria that make the task of developing web sites and web applications easier. It provides generic functionality with already written modules and tailored components created in a standard manner. In short, it is a reusable software environment that allows web designers and developers to easily build their projects and solutions with minimal coding and without worrying about the low-level details. This reduces development time and provides easy upkeep and alterations whenever necessary.

Usually, there are two kinds of frameworks .

Front-end frameworks (CSS and JavaScript frameworks)

Back-end or server-side programming frameworks

While back-end frameworks are used by web developers and programmers to build applications on the server-side, front-end frameworks are used by web designers and developers for implementing the Cascading Style Sheets language.

In this book, you will get a glimpse into front-end frameworks, which basically are pre-prepared packages containing the structure of files and folders of Hypertext Markup Language (HTML) and CSS documents (some with JavaScript functions), which help designers and developers build interactive and immersive web sites.

Frameworks allow you to use a common standardized structure that cuts out much of the groundwork of writing code from scratch and helps you reuse components, modules, and libraries, freeing you up to focus on core tasks at a high level.

Components of a CSS Framework

The following are the basic components of a CSS framework:

Grids (structures that help organize the content and design the layout)

Typography elements

Cross-browser compatibility

Helper classes for positioning elements

Utility classes

Navigational elements

Source code written in preprocessors such as Sass and LESS

Media elements (badges, tooltips, comments, and so on)

Advantages of Using a CSS Framework

Though some people have advocated not using CSS frameworks, mainly because of issues such as bloated structure, ingrained HTML markup, and a common aesthetic across framework-based web sites, using a CSS framework has several benefits. You should try using a CSS framework for the following reasons:

Clean and consistent coding

Cross-browser compatibility

Grid-based design

The ability to incorporate healthy coding practices

Easy-to-build prototypes

Easy maintenance and upkeep

Allows reuse and clean homogenous code structure

Easy expandability and modifications

Solid documentation

Common ground for building immersive web sites

Accessibility

A budding developer can find it difficult to build web sites just based on pure HTML, CSS, and JavaScript. In addition, grid-based layouts help budding designers to position, structure, and design the layout quite easily. You do not have to reinvent the wheel, meaning you can get some hands-on experience without the intricacies and dilemmas that you will come across when you code from scratch. Good and clean coding practices are imperative when you grow as a web designer, and frameworks are all about awesome cohesiveness and consistent coding that will hold you in good stead in times to come.

Various Popular Frameworks

In this section, you will look at the most popular frameworks used by web designers across the globe. The most popular frameworks for designing web sites are Bootstrap, Foundation, and Materialize. Which one a developer chooses depends on the needs and requirements of a web site and its design. However, just because a framework is popular doesn’t mean it fits the bill when it comes to designing your projects. You need to consider several issues when it comes to selecting a framework; we’ll talk more about that later. Let’s now take a look at the various superlative frameworks that are in vogue today.

Bootstrap

Bootstrap is the most popular mobile-first framework in web design; it’s used extensively by developers across the globe (Figure 1-1). You can find more information on the official web site at http://getbootstrap.com/ .

../images/450102_1_En_1_Chapter/450102_1_En_1_Fig1_HTML.jpg

Figure 1-1

Bootstrap

Bootstrap adopts a mobile-first paradigm by which you can build responsive web sites. It comes with components, modules, JavaScript functions, and media queries that help developers build immersive web sites with ease.

Foundation

Foundation was the earliest responsive framework and is as massive and advanced as Bootstrap for building web products and services (Figure 1-2). Foundation comes with cool features such as Flex Grid and Motion UI . The latest version, Foundation 6, is quicker, is lighter in size compared to its earlier versions, and is a solid front-end framework for designing beautiful web sites, e-mails, and apps that look good on any device. You can find more information on the official web site at http://foundation.zurb.com/ .

../images/450102_1_En_1_Chapter/450102_1_En_1_Fig2_HTML.jpg

Figure 1-2

Foundation

Materialize

Materialize is a modern front-end framework based on Google’s Material Design philosophy that helps developers build and design immersive web sites (Figure 1-3). You can find more information on the official web site at http://materializecss.com/ .

../images/450102_1_En_1_Chapter/450102_1_En_1_Fig3_HTML.jpg

Figure 1-3

Materialize

Materialize has a superlative, creative user interface (UI) component library that incorporates cross-browser compatibility and device-agnostic capabilities for developing attractive and consistent web sites.

Skeleton

As mentioned earlier, sometimes you don’t need a large framework, especially if you