5. Materialize
Best CSS Frameworks In 2021
Materialize UI components help in constructing attractive, consistent, and functional web pages and web apps while adhering to modern web design principles such as browser portability, device independence, and graceful degradation. Materialize is a UI component library created with CSS, JavaScript, and HTML.
Execute Materialize Online
For most of the examples given in this tutorial, Use this option to execute your Materialize programs on the spot and enjoy your learning.
<!DOCTYPE html>
<html>
<head>
<title>The Materialize Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
</head>
<body>
<div class = "card-panel teal lighten-2"><h3>Hello World!</h3></div>
</body>
</html>
Best CSS Frameworks In 2021
4. Bulma
Think of Bulma as a competitor to Bootstrap, despite the fact that it’s *just* CSS.?. Whether you need a visual component, or you want to understand how a component might be codified, with best practices and best-in-class documentation, Bulma’s here to help! ??
Bulma’s not even versioned 1.0 and has major adoption with 150K+ downloads a month and 26K+ stars on GitHub. Bulma solves a lot of problems—a lot.
Use NPM (recommended):
$ npm install Bulma
Starter template:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello Bulma!</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
</head>
<body>
<section class="section">
<div class="container">
<h1 class="title">
Hello World
</h1>
<p class="subtitle">
My first website with <strong>Bulma</strong>!
</p>
</div>
</section>
</body>
</html>
3. Tailwind CSS
Tailwind is a CSS framework for implementing custom designs, and even a component as simple as a button can look completely different from one site to another, so providing opinionated component styles that you’d end up wanting to override anyways would only make the development experience more frustrating.
Setting Up A Project With Tailwind CSS
To get Tailwind CSS installed we’ll start with a new project from scratch. So let’s get started with Tailwind CSS. Create a new project folder by using the following command:
$ mkdir tailwind-sample-01
Change into that newly created folder :
$ cd tailwind-sample-01
create a new package.json file by using the npm command in the following way:
$ npm init -y
This enables us to use the Node.js Package Manager (NPM) in the following steps to manage our dependencies within this project.
The first dependency which needs to be added to the project is the tailwind CSS package. Use the following command to install it:
$ npm install tailwindcss
In package.json insert the following build script:
"build": "postcss css/styles.css -o build/styles.css"
Creating An index.html File
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Tailwind CSS Demo</title>
</head>
<body>
<div class="h-64">
<div class="p-4 m-4 bg-green-600">
<h1 class="text-2xl font-bold text-white">Tailwind CSS Demo</h1>
</div>
<div class="p-4 m-4 bg-green-300 h-full">
<h2 class="text-green-900">Have much fun using Tailwind CSS</h2>
</div>
</div>
</body>
</html>
Best CSS Frameworks In 2021
2. Foundation
Foundation provides a responsive grid and HTML and CSS UI components, templates, and code snippets, including typography, forms, buttons, navigation, and other interface elements, as well as optional functionality provided by JavaScript extensions. Foundation is a responsive front-end framework.
Install with Foundation CLI
$ npm install --global foundation-cli
# or sudo npm install --global foundation-cli
Then use to create a new Foundation project:
$ foundation new
HTML Starter Template :
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation Starter Template</title>
<link rel="stylesheet" href="css/foundation.css" />
</head>
<body>
<h1>Hello, world!</h1>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Best CSS Frameworks In 2021
5. Bootstrap
The term is also used as a noun: A bootstrap is a business an entrepreneur with little or no outside cash or other support launches. Bootstrapping is building a company from the ground up with nothing but personal savings, and with luck, the cash coming in from the first sales.
Install with Bower
You can also install and manage Bootstrap’s Less, CSS, JavaScript, and fonts using Bower:
$ bower install bootstrap
Install with npm
$ npm install [email protected]
Install with Composer
$ composer require twbs/bootstrap
Basic template
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</body>
</html>
Download Bootstrap From Here
Also, Check Most Popular Databases In 2020