Aravind Shenoy - CSS Framework Alternatives: Explore Five Lightweight Alternatives to Bootstrap and Foundation With Project Examples

CSS Framework Alternatives: Explore Five Lightweight Alternatives to Bootstrap and Foundation With Project Examples — read online for free the complete book (whole text) full work

Below is the text of the book, divided by pages. System saving the place of the last page read, allows you to conveniently read the book "CSS Framework Alternatives: Explore Five Lightweight Alternatives to Bootstrap and Foundation With Project Examples" online for free, without having to search again every time where you left off. Put a bookmark, and you can go to the page where you finished reading at any time.

Light

Font size:

↓

↑

Georgia Tahoma Arial Verdana

Reset

Interval:

↓

↑

Bookmark:

Make

1234567...21

Aravind Shenoy and Anirudh Prabhu 2018

Aravind Shenoy and Anirudh Prabhu CSS Framework Alternatives

1. Choosing Lightweight Frameworks for Intuitive Web Design

Aravind Shenoy 1 and Anirudh Prabhu 2

(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 designers 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, youll 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 doesnt 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; well talk more about that later. Lets 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; its used extensively by developers across the globe (Figure .

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 .

Next page

1234567...21

Light

Font size:

↓

↑

Georgia Tahoma Arial Verdana

Reset

Interval:

↓

↑

Bookmark:

Make

Similar books «CSS Framework Alternatives: Explore Five Lightweight Alternatives to Bootstrap and Foundation With Project Examples»

Look at similar books to CSS Framework Alternatives: Explore Five Lightweight Alternatives to Bootstrap and Foundation With Project Examples. We have selected literature similar in name and meaning in the hope of providing readers with more options to find new, interesting, not yet read works.

Maria Antonietta Perna

Bootstrap: Related Tools & Skills

Maria Antonietta Perna

8 Practical Bootstrap Projects

Maria Antonietta Perna

Learn Bootstrap: The Collection

Ajdin Imsirovic

Bootstrap 4 Cookbook

Shenoy Aravind

Learning Bootstrap

Hong

Practical web design: learn the fundamentals of web design with HTML5, CSS3, Bootstrap, jQuery, and Vue.js

Harmeet Singh

Learning Web Development with React and Bootstrap

Bhaumik S.

Bootstrap Essentials

Silvio Moreto

Bootstrap By Example

Niska

Extending Bootstrap

Kevin Lyn.

Bootstrap 3.3: A Guide Book for Beginners to Learn Web Framework Fast!

Thoriq Firdaus

Responsive Web Design by Example

Discussion, reviews of the book CSS Framework Alternatives: Explore Five Lightweight Alternatives to Bootstrap and Foundation With Project Examples and just readers' own opinions. Leave your comments, write what you think about the work, its meaning or the main characters. Specify what exactly you liked and what you didn't like, and why you think so.