CSS: Enhancing the beauty of websites!
Beauty always attracts! :D. The same is the case with websites. The more attractive it is, the more traffic comes to your websites! Therefore, Strong visual design has always been every developer’s focus, because it is always said that, “The first impression is the last impression”. Here the first impression refers to the look and structure of the websites.
Cascading Style Sheets, commonly referred to as CSS, is an integral part of the modern web development process. It’s the language for describing the presentation of web pages, including colors, layouts, fonts, and variations in display for different devices and screen sizes. Did you ever wondered who created CSS! Well, CSS was first proposed by Håkon Wium Lie on October 10, 1994. At the time, Lie was working with Tim Berners-Lee (father of HTML) at CERN. But on December 17, 1996, W3C (World wide web Consortium) published the first standard for CSS.
CSS provides beauty to your websites; without CSS your website would look plain text on white background. If you want to modify any page, add buttons, effects to your websites, then strong CSS skills will be helpful!
Earlier HTML tags included attributes to define how the content was to be displayed by a browser but today CSS is used to concentrate these attributes in a single, separate file.
Simple HTML code specifies “what” content is to be displayed whereas the CSS code defines “how” the content is to be displayed. Apart from creating effects on websites, you can also create games using HTML and CSS. Isn’t that amazing how CSS is cascading its way these days! Moreover, CSS has excellent support in today’s browsers. It is easy to learn and produces better and cleaner code than applying all those styles directly to your HTML.
When tags like, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. The development of large websites, where fonts and color information were added to every single page, became an extended and expensive process, and to resolve this problem, the CSS was created, and thus, it came into existence! The style definitions are normally saved in external .css files. CSS always saves a lot of work. It can help you control the layout of multiple websites all at once.
CSS Frameworks:
No wonder, then, that CSS frameworks emerged over time and took most of the pain away. Today we can’t imagine coding without our favorite CSS framework, as targeting multiple screen sizes has become a necessity. In simple terms, a CSS framework may be a collection of CSS style-sheets that are prepped and ready to use.
Let’s say you suppose to build a website and you want to your CSS framework. How would you choose? In this blog, we are going to take a look at some of the CSS frameworks to let you choose as per your need!
- Bootstrap: An initiative and backed by Twitter, and takes the credit for introducing responsive design on a large scale. Bootstrap is one of the best CSS frameworks and has the largest community support. This is an open-source framework with built-in HTML, LESS, SASS, and JavaScript. Currently, Bootstrap 4.6.0 is its latest stable version. It supports all modern browsers. The best advantage of Bootstrap is, this framework has great JavaScript components with custom files or CDN. Bootstrap achieved responsive design by introducing the idea of a grid. A grid is an invisible partition of the screen into columns (along with the width). You no longer have to design separately for different sizes of screens, all you need to do is to include relevant Bootstrap classes, and the design would automatically adjust for different screen sizes.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap Example</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script></head><body><div class="container"><h3>Tabs With Dropdown Menu</h3><ul class="nav nav-tabs"><li class="active"><a href="#">Home</a></li><li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1 <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Submenu 1-1</a></li><li><a href="#">Submenu 1-2</a></li><li><a href="#">Submenu 1-3</a></li></ul></li><li><a href="#">Menu 2</a></li><li><a href="#">Menu 3</a></li></ul></div></body></html>
With Bootstrap, you can have rapid prototyping and provides greater consistency with your code. As of today, Bootstrap has the biggest ecosystem among front-end frameworks. It offers, rich, out of the box and almost all UI components ranging from navigation, forms, cards, progress bars, buttons, alerts, and many more. Amongst all the CSS frameworks, Bootstrap is the only one that supports SASS and LESS. Many large corporations and Tech giants adopted the use of Bootstrap in their websites or apps. Apple used Bootstrap for its Apple Music and Apple Maps web apps.
2. Tailwind: Tailwind is a utility-first, open-source CSS framework. Like other CSS frameworks like Bootstrap or Materialize CSS Tailwind CSS doesn’t come along with predefined components. Instead, Tailwind CSS operates on a lower level and provides you with a collection of CSS helper classes. By using the helper classes, you can rapidly create a custom design with ease. Tailwind CSS is not opinionated and lets you create your unique design. When Tailwind CSS was barely released no one paid attention. But in recent times, developers started adopting it due to more productivity, unique design, small bundle size of code, customizable and configurable.
<section class="px-4 sm:px-6 lg:px-4 xl:px-6 pt-4 pb-4 sm:pb-6 lg:pb-4 xl:pb-6 space-y-4"><header class="flex items-center justify-between"><h2 class="text-lg leading-6 font-medium text-black">Projects</h2><button class="hover:bg-light-blue-200 hover:text-light-blue-800 group flex items-center rounded-md bg-light-blue-100 text-light-blue-600 text-sm font-medium px-4 py-2"><svg class="group-hover:text-light-blue-600 text-light-blue-500 mr-2" width="12" height="20" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 5a1 1 0 011 1v3h3a1 1 0 110 2H7v3a1 1 0 11-2 0v-3H2a1 1 0 110-2h3V6a1 1 0 011-1z"/></svg>New</button></header><form class="relative"><svg width="20" height="20" fill="currentColor" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" /></svg><input class="focus:border-light-blue-500 focus:ring-1 focus:ring-light-blue-500 focus:outline-none w-full text-sm text-black placeholder-gray-500 border border-gray-200 rounded-md py-2 pl-10" type="text" aria-label="Filter projects" placeholder="Filter projects" /></form><ul class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2 gap-4"><li x-for="item in items"><a :href="item.url" class="hover:bg-light-blue-500 hover:border-transparent hover:shadow-lg group block rounded-lg p-4 border border-gray-200"><dl class="grid sm:block lg:grid xl:block grid-cols-2 grid-rows-2 items-center"><div><dt class="sr-only">Title</dt><dd class="group-hover:text-white leading-6 font-medium text-black">{item.title}</dd></div><div><dt class="sr-only">Category</dt><dd class="group-hover:text-light-blue-200 text-sm font-medium sm:mb-4 lg:mb-0 xl:mb-4">{item.category}</dd></div><div class="col-start-2 row-start-1 row-end-3"><dt class="sr-only">Users</dt><dd class="flex justify-end sm:justify-start lg:justify-end xl:justify-start -space-x-2"><img x-for="user in item.users" :src="user.avatar" :alt="user.name" width="48" height="48" class="w-7 h-7 rounded-full bg-gray-100 border-2 border-white" /></dd></div></dl></a></li><li class="hover:shadow-lg flex rounded-lg"><a href="/new" class="hover:border-transparent hover:shadow-xs w-full flex items-center justify-center rounded-lg border-2 border-dashed border-gray-200 text-sm font-medium py-4">New Project</a></li></ul></section>
Tailwind automatically removes all unused CSS using PurgeCSS by scanning the HTML and removing unused classes, which means your final CSS bundle is the smallest it could be. Most Tailwind projects ship less than 10KB of CSS to the client. The availability of utility classes makes it easier to make complex responsive layouts freely. One of the biggest chores that developers have is of naming things. The problem is even more in HTML and CSS as there can be thousands of classes. Another problem is context-switching, jumping to see the CSS change. In Tailwind, the naming decisions are already taken for you (you might find it a little bit weird because they are not as per semantic naming conventions) and since you’re just removing/adding classes from HTML, there is zero context-switching. Tailwind will never encourage you to design the same site twice. Even with an equivalent color palette and sizing scale, it is easy to create a similar component with a completely different look within the next project. Tailwind UI is a set of UI components to get started with and is guaranteed to help you find your perfect starting point. If you are tired of your current framework and wanted to try something new and radical, Tailwind is here you’re looking for.
3. Bulma: Bulma is relatively a new entrant in CSS frameworks, launched in 2016. It’s a responsive, modern, open-source CSS framework, built-in HTML, SASS, and CSS flexbox. Its attractiveness lies in a strict, CSS-only approach (no JavaScript components), and elegant defaults. It also has the most readable CSS classes. Bulma’s syntax is consistent and intuitive, so it’s easy to learn and simple to interpret if you didn’t write the code yourself. Bulma is lightweight and very easy to use. The main advantage of using Bulma is that its box model is fully based on Flexbox. Its built-in components are responsive in design with a mobile-first approach and optimized vertical reading. Bulma is highly modular, comprises ~40 .sass files (Sass is a CSS extension language that Bulma uses), each of which handles a different interface component. It is rich in components similar to Bootstrap. It provides a good amount of consistency and can be used alternatively to Bootstrap.
<div class="card"><div class="card-image"><figure class="image is-4by3"><img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image"></figure></div><div class="card-content"><div class="media"><div class="media-left"><figure class="image is-48x48"><img src="https://bulma.io/images/placeholders/96x96.png" alt="Placeholder image"></figure></div><div class="media-content"><p class="title is-4">John Smith</p><p class="subtitle is-6">@johnsmith</p></div></div><div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.Phasellus nec iaculis mauris. <a>@bulmaio</a>.<a href="#">#css</a> <a href="#">#responsive</a><br><time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time></div></div></div>
4. Foundation: Foundation is one of the most advanced CSS frameworks, open-source, built-in HTML, CSS, SASS, and JavaScript. This framework uses the SASS compiler which provides faster development than the default compiler. It’s technically wrong to say Foundation is a CSS framework. It is, but it’s been built as a large and modular set of tools to solve common frontend problems. There are separate framework offerings for websites and emails, heavily optimized for their respective domains. It also comes with CLI, which sounds very weird to web developers. Unlike Bootstrap, Foundation gives full control over its UI. As a result, a newcomer might find it complex. When it comes to Customization, nobody can beat Foundation thanks to its flexibility. Its minimalist approach to pre-built UI components allows designers to create their unique designs. It has a powerful grid system and is rich in UI components with complete responsive design and cool JavaScript plugins. It also comes with an advanced responsive image system, form-validation, pricing table component, and more. It also supports current modern browsers. At last, I would like to say, Foundation overkill for most simple websites, but for large ones, it’s a boon!
The experienced developers will surely recognize.
Now since you got to know much about CSS, you can choose to learn any of the above CSS frameworks as all are unique and best in their own way and can create wonderful, attractive, and useful things!
