5 Best CSS Frameworks For Beginners In 2021

by

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.

Best CSS Frameworks In 2021

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.

Best CSS Frameworks In 2021

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.

Best CSS Frameworks In 2021

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.

Best CSS Frameworks In 2021

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.

Best CSS Frameworks In 2021

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

 

Leave a Comment