Physical Address

Sagipora Sopore Baramulla 193201  Jammu & Kashmir

featured image

Scss vs Bootstrap vs Tailwind CSS

Scss vs Bootstrap vs Tailwind CSS is the talk of the town these days. People are concerned with choosing the right CSS...
sass vs bootstrap vs tailwind css

Scss vs Bootstrap vs Tailwind CSS is the talk of the town these days. People are concerned with choosing the right CSS framework for their next project. So, let’s clear some air about SCSS vs Bootstrap vs Tailwindcss.

sass vs bootstrap vs tailwind css

Before we go in further talking about each individually. One thing that should be clear scss is a preprocessor scripting language. Which in simple terms means that it’s just a subset of CSS. While bootstrap and tailwind are CSS frameworks and contain ready-made CSS classes and components waiting for you to use in your HTML with a few simple clicks. Let’s go deep into defining what each of them has to offer.

SASS or (SCSS):

sass vs bootstrap vs tailwind css

SASS (SCSS) is a preprocessor scripting language that is compiled into CSS (Cascading style sheets). It has two syntaxes, the original one and the sassy one. The original one called “the indented syntax” implements a syntax similar to Haml. It uses indentation to separate different code blocks and newline characters to separate rules. It is traditionally given a .sass file extension. As per the official website of SASS, SASS is short for syntactically awesome style sheets.

Also read: 10 CSS pro tips, code this not that

EXAMPLE:

$primary-color: #3bbfce
$margin: 16px

.content-navigation
  border-color: $primary-color
  color: darken($primary-color, 10%)

.border
  padding: $margin/2
  margin:  $margin/2
  border-color: $primary-color

The newer syntax known as sassy syntax or SCSS uses curly braces to separate code blocks like normal CSS. It is traditionally given a .scss file extension.

EXAMPLE: 

$primary-color: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $primary-color;
  color: darken($primary-color, 10%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $primary-color;
}

COMPILED CSS:

.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

FEATURES OF SCSS / SASS:

1. NESTING:

CSS doesn’t allow nesting. But with the help of SASS/SCSS, it is easy to implement nesting. Therefore making the code more readable and maintainable. Also, the nesting saves a lot of time when writing the code as well. The example of SASS/ SCSS nesting is

SCSS:

table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }
}
li {
  font: {
    family: serif;
    weight: bold;
    size: 1.3em;
  }
}

SASS: 

table.hl 
  margin: 2em 0
  td.ln 
    text-align: right
  
li 
  font: 
    family: serif
    weight: bold
    size: 1.3em

COMPILED CSS: 

table.hl {
  margin: 2em 0;
}
table.hl td.ln {
  text-align: right;
}

li {
  font-family: serif;
  font-weight: bold;
  font-size: 1.3em;
}

2. MIXINS:

Mixins are an important feature of sass that lets programmers declare a set of CSS declarations to be used again somewhere else. Moreover, these declarations can be added anywhere in the stylesheet by just adding a line of code.

WHAT ARE SCSS MIXINS?

Mixins are a set of CSS rules that can be reused throughout the stylesheet. It helps to keep the code very dry. Moreover, these declarations can be added anywhere in the stylesheet by just adding a line of code. The example of SCSS mixin are

SCSS: 

@mixin table-base {
  th {
    text-align: center;
    font-weight: bold;
  }
  td, th {
    padding: 2px;
  }
}

#data {
  @include table-base;
}

SASS: 

=table-base
  th
    text-align: center
    font-weight: bold
  td, th
    padding: 2px

#data
  +table-base

COMPILED CSS:


#data th {
  text-align: center;
  font-weight: bold;
}
#data td, #data th {
  padding: 2px;
}

3. Loops:

Loops like for, each, and while in sass allow for iterating over variables, which are used to apply different styles to elements with similar ids or classes

SASS:

$squareCount: 4
@for $i from 1 through $squareCount 
  #square-#{$i} 
   background-color: red
   width: 50px * $i
   height: 120px / $i

COMPILED CSS:

#square-1 {
  background-color: red;
  width: 50px;
  height: 120px;
}

#square-2 {
  background-color: red;
  width: 100px;
  height: 60px;
}

#square-3 {
  background-color: red;
  width: 150px;
  height: 40px;
}

Bootstrap:

bootstrap templates

Bootstrap is a free and open-source CSS created by Twitter inc. It is based on the fundamentals of responsive, mobile-first front-end web development. The Bootstrap templates for typography, forms, buttons, navigation and other interface components are based on CSS and some JavaScript(optionally).

Bootstrap itslef is written in HTML, CSS, Less, Sass(or SCSS) and JavaScript. It’s available under MIT License.

As of Now, Bootstrap holds the 10th rank for the most starred project on GitHub with over 152, 000 stars.

Bootstrap was originally named Twitter blueprint. It was developed by Twitter developers Mark Otto and Jacob Thornton as part of building a new internal tool to encourage consistency across internal tools.

FEATURES OF BOOTSTRAP:

1. LESS as well as CSS files:

In addition to the old CSS files bootstrap also offers Less files.

2. Easly Customizable:

Bootstrap is designed based on 12-column grids, layouts, and components. Despite that, it can be easily customized. With a few simple changes, you can make a fixed grid or a responsive one according to your need.

3. Easy to Begin With:

Bootstrap is easy to begin with. The fact that it’s pretty simple to get started with is probably the best quality about bootstrap. In addition to that, there is no learning curve involved in bootstrap. It just takes a few minutes to set up things and a few more minutes to get in grips with it.

4. Pre-styles Components of Bootstrap:

Bootstrap comes with many pre-styled components out of the box. These components include
a. Drop-downs.
b. Button
c. Navigation
d. Badges Alerts
e. Progress Bar

5. Drop-down menu component:

With the help of bootstrap, it hardly takes a few minutes to set up a responsive drop-down menu component. It happens to be quite difficult, to include these components via different java-based plugins.

Also read: Reactjs best practices 2022, code this not that

6. Responsive Utility Classes:

Ask every CSS developer, what makes their life simple. The most common answer would definitely be utility classes. Bootstrap contains many responsive utility classes. These utility classes help developers hide or make appear different pieces of content depending on the size of the screen being used. This in turn helps developers to make mobile and tablet-friendly versions of their websites easily.

7. Bootstrap Templates:

In addition to the ready-made components and utility, bootstrap provides readily available templates to make it easy for simple and inexperienced users to create a website with just a few clicks and a tutorial of a few minutes.

Downside of Bootstrap: Free for all:

You must wonder why is Boostrap’s “free for all” is a downside. Well, the truth is, that it is. Since it’s free for all there is a higher probability of people implementing the same themes and components on their individual websites. It takes away the uniqueness of websites in a time when user experience is such an important aspect of a website.

Also, Read Best VSCode Extensions you should consider in 2022

How to set up Bootstrap in your website:

The best way to use bootstrap on your website is to link it to the bootstrap CDN. The method is different depending on the version.

1. Bootstrap 4:

Here is the starting template for bootstrap 4. After implementing the template, you can add the bootstrap components and classes to your elements.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
    -->
  </body>
</html>

2. Bootstrap 5:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

BOOTSTRAP ALTERNATIVES:

Following are some Bootstrap alternatives you can look into.

  1. BULMA
  2. PURE
  3. fOUNDATION BY ZURB
  4. SKELTION
  5. GROUNDWORK
  6. MUELLER
  7. CARDINAL
  8. POWERTOCSS

Also, Read Grid image gallery in CSS, in 5 minutes

Bootstrap jumbotron:
<div class="jumbotron">
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <hr class="my-4">
  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>
Bootstrap margin:

Assign Bootstrap margin classes such as mt-0 ml-1 p-3 etc More at afajfkd.com

Bootstrap border:

You can use bootstrap border utility classes to add or remove borders around the components. Some example classes are border border-top
border-right, border-left.

Lerna bootstrap:

Lerna Bootstrap is an npm package that Links local packages together and installs remaining package dependencies

Center buttons bootstap:

You can center the Bootstrap button vertically by using the align-middle class.

TAILWIND CSS:

tailwindcss introduction

Tailwind CSS is in short a utility-first CSS framework. It helps build custom user interfaces rapidly. Some popular features of Tailwind CSS are as follows

Features of Tailwind css:

  1. Highly Customizable
  2. Low-level css framework
  3. Faster UI building process
  4. It’s a utility-first CSS framework which means you can use utility classes to build to custom designs without writing CSS in traditional approach.

Advantages of Tailwind CSS:

  1. No need to use silly names for CSS classes and id’s
  2. Can customize the designs to create custom components.
  3. Makes the webiste responsive
  4. Less number of css lines in the code

How to install tailwind CSS?

Method 1: use Tailwind css via cdn:

<!-- add it to the head section of the html file -->
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
      rel="stylesheet">

Method 2: Installing Tailwind css va npm:

Step 1: initialize npm using the command ‘npm init -y’

npm init -y

Step 2: Download Tailwind CSS
npm install Tailwindcss

npm install tailwindcss

Step 3: Use the tailwind directive to inject tailwind’s base, components, utilities, styles into your CSS file using

@tailwind components
@tailwind base;
@tailwind utilities;

Step 4: Create a config file to customize the designs. (optional)

npx tailwind init

Step 5: Compile style.css and output it to the output.css. The output.css file is the actual file that will be shipped to the browser

npx tailwindcss build style.css -o output.css

Browsers that support tailwind css:

  • Google Chrome
    Firefox
    Microsoft Edge
    Safari

Examples of Tailwind CSS

<!doctype html>
<html>
<head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <link href="/dist/output.css" rel="stylesheet">
</head>
<body> 
 <h1 class="text-3xl font-bold underline"> 
   Hello world!  
</h1>
</body>
</html>

Tailwind CSS responsive navbar:

<!-- This example requires Tailwind CSS v2.0+ -->
<nav class="bg-gray-800">
  <div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
    <div class="relative flex items-center justify-between h-16">
      <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
        <!-- Mobile menu button-->
        <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
          <span class="sr-only">Open main menu</span>
          <!--
            Icon when menu is closed.

            Heroicon name: outline/menu

            Menu open: "hidden", Menu closed: "block"
          -->
          <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
          <!--
            Icon when menu is open.

            Heroicon name: outline/x

            Menu open: "block", Menu closed: "hidden"
          -->
          <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
      <div class="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
        <div class="flex-shrink-0 flex items-center">
          <img class="block lg:hidden h-8 w-auto" src="https://tailwindui.com/img/logos/workflow-mark-indigo-500.svg" alt="Workflow">
          <img class="hidden lg:block h-8 w-auto" src="https://tailwindui.com/img/logos/workflow-logo-indigo-500-mark-white-text.svg" alt="Workflow">
        </div>
        <div class="hidden sm:block sm:ml-6">
          <div class="flex space-x-4">
            <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
            <a href="#" class="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium" aria-current="page">Dashboard</a>

            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Team</a>

            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Projects</a>

            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Calendar</a>
          </div>
        </div>
      </div>
      <div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
        <button type="button" class="bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
          <span class="sr-only">View notifications</span>
          <!-- Heroicon name: outline/bell -->
          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
          </svg>
        </button>

        <!-- Profile dropdown -->
        <div class="ml-3 relative">
          <div>
            <button type="button" class="bg-gray-800 flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
              <span class="sr-only">Open user menu</span>
              <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
            </button>
          </div>

          <!--
            Dropdown menu, show/hide based on menu state.

            Entering: "transition ease-out duration-100"
              From: "transform opacity-0 scale-95"
              To: "transform opacity-100 scale-100"
            Leaving: "transition ease-in duration-75"
              From: "transform opacity-100 scale-100"
              To: "transform opacity-0 scale-95"
          -->
          <div class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
            <!-- Active: "bg-gray-100", Not Active: "" -->
            <a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a>
            <a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
            <a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Mobile menu, show/hide based on menu state. -->
  <div class="sm:hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1">
      <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
      <a href="#" class="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium" aria-current="page">Dashboard</a>

      <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Team</a>

      <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Projects</a>

      <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Calendar</a>
    </div>
  </div>
</nav>

An example of Tailwind CSS login:

<!--
  This example requires Tailwind CSS v2.0+ 
  
  This example requires some changes to your config:
  
  ```
  // tailwind.config.js
  module.exports = {
    // ...
    plugins: [
      // ...
      require('@tailwindcss/forms'),
    ],
  }
  ```
-->
<div>
  <label for="price" class="block text-sm font-medium text-gray-700">Price</label>
  <div class="mt-1 relative rounded-md shadow-sm">
    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
      <span class="text-gray-500 sm:text-sm">
        $
      </span>
    </div>
    <input type="text" name="price" id="price" class="focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-7 pr-12 sm:text-sm border-gray-300 rounded-md" placeholder="0.00">
    <div class="absolute inset-y-0 right-0 flex items-center">
      <label for="currency" class="sr-only">Currency</label>
      <select id="currency" name="currency" class="focus:ring-indigo-500 focus:border-indigo-500 h-full py-0 pl-2 pr-7 border-transparent bg-transparent text-gray-500 sm:text-sm rounded-md">
        <option>USD</option>
        <option>CAD</option>
        <option>EUR</option>
      </select>
    </div>
  </div>
</div>

Tailwind CSS templates:

You can find Tailwind CSS templates at TailwindUI

Need to choose between Scss vs Bootstrap vs Tailwind CSS

To be a good developer needs good development tools. There are tons of tools out there in the wild. The problems occur when you have to choose between different options.

CONCLUSION OF Scss vs Bootstrap vs Tailwind CSS

The Scss vs Bootstrap vs Tailwind CSS is nowadays such an important thing to clear and grasp. There aren’t any blogs that haven’t talked about SCSS vs Bootstrap vs Tailwind CSS. The simple answer to all o this fuss depends on your needs. If you want to write your own custom CSS then SCSS or scss is there to help you. If you don’t want to start from scratch just choose one of the BOOTSTRAP OR TAILWIND CSS.

Newsletter Updates

Enter your email address below to subscribe to our newsletter

6 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

Trending now

mongodb
MongoDB Installation And Setup On Android
reactjs
How To Install And Create Reactjs App On Android
github
GitHub Repos That You Won’t Believe Exist
best vscode extensions
Best VSCode Extensions you should consider in 2022
Programming & Tech Digest
Programming and Tech innovations delivered straight to your inbox for free.