Custom Bootstrap Theme With Sass

Setting Up Sass Environment

Install node js
Cr project folder “Bootstrap Project” on it in VS code
Run command inside this folder ⇒ Npm init
Fill up info and keywords with spaces:

Headover to npmjs.com and search dart-sass
npm i -g sass
npm install --save-dev sass
Headover to getbootstrap.com > npm i bootstrap@next –-save
Headover to fontawesome.com > start for free > select npm
npm install --save @fortawesome/fontawesome-free
Let’s add sass compilation script:

Create scss folder in root
Cr scss>style.scss
npm run compile:sass

But let’s add --watch flag

That’s it we setup our project

-------------------------------------------------------------------------------------------

Customizing Bootstrap

Cr scss > _custom.scss
Import bootstrap in _custom.scss

Inside style.scss add this custom partial:

Now find _variables file from ⇒ node_modules > bootstrap > scss > _variables.scss

Now inside this variable file let’s customize some variables:

Let’s change the theme colors:

Let’s customize Accordion Buttons for collapsing
So press ctrl+f inside bootstrap > scss > _variables.scss search accordion so here we have accordion variables so let’s copy some variables from here to _custom.scss

$accordion-icon-color
$accordion-icon-active-color
$accordion-icon-width
$accordion-button-icon
$accordion-button-active-icon

Now we need to replace svgs with plus-circle and dash-circle svgs so now we need bootstrap icons
So find icon and click on it to get svg code and then copy that code and paste it in the notepad now here let’s do some tricky stuff so copy first dimension’s path and replace that path code with bootstrap’s path code now add one more path code so copy entire path and add it to the svg in _custom.scss from notepad do the same with active icon code

File Structure for the Project

Cr 2 folders inside scss folder

scss > components folder
scss > sections folder

Cr some partials inside components folder:

components > _buttons.scss
components > _animations.scss
components > _mixins.scss
components > _typography.scss

Cr some sass files for the section folder:

sections > _navbar.scss
sections > _intro-section.scss
sections > _companies.scss
sections > _services.scss
sections > _testimonials.scss
sections > _faq.scss
sections > _portfolio.scss
sections > _get-started.scss
sections > _footer.scss

Now let’s import all these components > partials inside style.scss

Now let’s import all these sections > partials inside style.scss after importing components

NAVBAR

Navbar

Cr index.html in the root
Cr boilerplate there
Change Title
Add compiled css link
Link JS file in the bottom of the body
Get this Navbar code from bootstraps website

First change the .container-fluid with the .container inside navbar
Change .bg-light to .bg-primary to .navbar.navbar-expand-lg
Add justify-content-end to .collapse.navbar-collapse to move it to right
Inside .navbar-brand add an logo:

Cr folder images in the root and add images to it like logo.png
Add links

Inside _navbar.scss add this code

Then replace the .bg-primary with .menu (in index.html in .navbar)
Add this code inside the menu:

Let’s create Gradient Mixin because we are going to use it many times:

Now inside _buttons.scss

Add this class to the button in navbar (index.html)

Cr fontawesome.scss inside scss folder:

Now it compiles and we just need to link it to the index.html

Now we need to copy webfonts folder from the node_modules fontawesome-free and then paste this folder inside assets

You MUST follow this folder structure
Now inside _buttons.scss in span select i element and write this code:

Also add background-color: $white; to .btn-rounded
Let’s cr hover effect on the .btn-rounded:

Add this code on the .btn-rounded:

Now remove this button on small devices:

INTRO SECTION

Intro Section

Basic structure is

Then fill up first column with title, description, button

Now inside _typography.scss file we need to adjust this:

And a little changing in html

Navbar shadow
Navbar fixed top
Row of intro section need 2 more classes:

align-items-center
text-white

And inside _intro-section.scss file needs a little styling:

Now we need to change the font family of the intro section
The fonts we are using is poppins that you can get from google fonts for free
Now we need this font of different weights:

Regular 400
Medium 500
Semi-bold 600
Bold 700
Extra-bold 800
Black 900

Add this to intro:

Let’s give a class of lh-base (line-height)
Now let’s create on second column
And put this code there:

In _mixins add this:

Let’s replace the mixin with bootstrap classes:

Now we don’t need absoluteCenter mixin so we can comment it
Headover to the getwaves.io > copy svg code from here and then paste it in the end of the section before section closing tag
Change the path fill color to #fff

Now let’s create border animation

.border-animation will have this following styling inside intro-section.scss

Let’s create an animation in _animation.scss:

Now let’s add this animation to the .border-animation

Let’s add delay between two borders for creating an effect:
So as u know our markup is:

Let’s style it:

Then let’s customize a pulse-border animation a little bit let’s play with the opacity:

So now u can see we have the 2 borders
Now let’s change the color and animation delay:

Now let’s also take a look on responsiveness part:

So actually what we did here is that we first set the fontsize for the mobile device (iPhone 6/7/8 Plus) and then we applied the media query of bootstrap and set the font size of 1.5rem for large devices

COMPANIES SECTION

Companies Section

Basic Markup:

Now we need two lines after this heading so in the _typography.scss we will make this line:

Now we need companies logos so we need 6 images of the logos and then another container after the first container

Markup is gonna be something like this inside the .container div

Now in here .companies class we are going to style inside _companies.scss

Let’s add shadow to call logos:

Now let’s make it look good for large devices so we are going to use another breakpoint for the columns:

Now let’s add hover effect:

SERVICES SECTION

Our Services Section:

Basic Markup:

Then we need to style this text also so inside the _typography.scss i need to change the font family to the poppins

Next we need another container after this first container so the markup is going to look like

And now in the _typography.scss we need to customize a border-right a little bit:

Now we need to add content to the services section for this we need another container for the content so the markup is going:

Now let’s fill this all

Repeat the same process with the others in zigzag view

2nd one needs to be in second column of 2nd row

display-3–-title: web development
Icons class: fas fa-code

3rd one’s content needs to be in the first column of the 3rd row

display-3–-title: cloud hosting
Icons class: fas fa-cloud-upload-alt

Next we need the illustrations so we need the services folder of 3 illustrations inside images folder
So the below is the 2nd column of the first row:

After adding all illustrations we need to style it so open up _services.scss file:

Next we need to implement gradient on the title

And then inside markup i have to setup icon to .icon.d-block
Now I need to push the illustration to the edges

1st column of the image ⇒ text-end
2nd column of the image ⇒ text-start
3rd column of the image ⇒ text-end

Also need to change the .services__content to the .services__pic for illustrations

Next we need to check our section is fully responsive
.heading-line set it to .mb-1

In _typography.scss

TESTIMONIALS SECTION

Testimonials Section:

Basic Markup:

Now let’s style in the _testimonials.scss

Now let’s add waves from the website:
Down direction for top wave and up direction for bottom wave:
Copy svg and paste
Change fill color to white #fff
Similarly do the same for the bottom one like:

Let’s add carousel from bootstrap components
Copy code of carousel with captions

Add it in markup by creating another row inside the same container
And remove extra buttons and controls

Now again inside _testimonials.scss let’s style it a little bit:
So first style cards and nested elements of the card
Let’s change the buttons we don’t need previous and next words here instead we need icons based buttons:

Then set the picture element:

Then .testimonials__name:

FAQ?

SECTION

FAQs Section:

Basic Markup:

Now go to getbootstrap.com > components > accordion > first example copy it and paste it inside next row:

Make 4 accordion items
Next change padding of the accordion that we get from _variables.scss under accordion styling copy $accordion-padding-y $accordion-padding-x and set both values to 1.5rem:

PORTFOLIO SECTION

Portfolio Section:

Basic Markup:

Then we need buttons for filtering items or projects:

Then I need 9 portfolio items all of them looks as the first one:

Now let’s style the content inside _portfolio.scss:

Inside _mixin.scss add this:

This is mixin file code:

@use '../custom' as *;

// GRADIENT MIXIN

@mixin gradient {

background: linear-gradient(to right, rgba($primary, 0.95), rgba($secondary, 0.95));

}

// ABSOLUTE CENTER

@mixin absoluteCenter {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

// TRANSITION PROPERTY

@mixin transitionProperty {

transition-duration: 1s;

transition-property: all;

}

GET STARTED SECTION

Get Started Section:

Basic Markup:

We need a class of .gradient inside _typography.scss file and code of gradient from _mixins.scss
Inside _get-started.scss add this:

Now in the next row first column add this code:

100% Satisfaction Guaranteed

</h4>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam alias optio minima, tempore architecto sint ipsam dolore tempora facere laboriosam corrupti!

</p>

What will be the next step?

</h3>

<li>We'll prepare the proposal.</li>

<li>we'll discuss it together.</li>

<li>let's start the discussion.</li>

</ul>

</div>

Again to styling part: _get-started.scss:

.cta-info {

padding: 3rem;

margin: 1rem 0;

&__list {

position: relative;

list-style-type: none;

display: block;

padding-top: 0.5rem;

padding-left: 0.5rem;

margin-bottom: 0.7rem;

li::before {

font-family: "Font Awesome 5 Free";

content: "\f00c";

font-weight: 600;

margin-right: 0.5rem;

font-size: 1.2rem;

}

To get the unicode of check icon copy that code from fontawesome/cheatsheet

Now let’s create a form in the second column:

start your project

</h4>

</div>

</div>

</div>

</div>

submit

</button>

</div>

</form>

</div>

Style form

https://tablericons.com/

Search This Blog

Web Development With ABSAR

Custom Bootstrap Theme With Sass - Absar Ahmad Developer

Comments

Post a Comment

Popular posts from this blog

BOOTSTRAP COURSE by Absar

Archive

Labels