Physical Address
Sagipora Sopore Baramulla 193201 Jammu & Kashmir
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.
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 (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
$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.
$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;
}
.content-navigation {
border-color: #3bbfce;
color: #2b9eab;
}
.border {
padding: 8px;
margin: 8px;
border-color: #3bbfce;
}
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;
}
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.
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;
}
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 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.
In addition to the old CSS files bootstrap also offers Less files.
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.
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.
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
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
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.
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.
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
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.
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>
<!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>
Following are some Bootstrap alternatives you can look into.
Also, Read Grid image gallery in CSS, in 5 minutes
<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>
Assign Bootstrap margin classes such as mt-0 ml-1 p-3 etc More at afajfkd.com
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 is an npm package that Links local packages together and installs remaining package dependencies
You can center the Bootstrap button vertically by using the align-middle class.
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
<!-- add it to the head section of the html file -->
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet">
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
<!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>
<!-- 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>
<!--
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>
You can find Tailwind CSS templates at TailwindUI
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.
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.
[…] Also Read: Scss vs Bootstrap vs Tailwind CSS […]
[…] Want to learn a CSS framework but don’t know which one, consider reading Scss vs Bootstrap vs Tailwind CSS […]
[…] 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. Learn more about SCSS at Scss vs Bootstrap vs Tailwind CSS. […]
[…] Also Read: Scss vs Bootstrap vs Tailwind CSS […]
[…] Scss vs Bootstrap vs Tailwind CSS January 23, 2022 […]
[…] Scss vs Bootstrap vs Tailwind CSS January 23, 2022 […]