Create Our Own CSS Frameworks part-4

What Will I Learn?

• Make Container
• Make Helper CSS

Requirements

• Intermediate CSS
• Basic SASS
• Watch part1, part2, andpart3

Difficulty

• Intermediate

Tutorial Contents

Make Container

We have made the base layout in the previous tutorial, in this tutorial we will create a new element that is the container.

Why we should create a container?

The container is used to wrap multiple columns, so we can adjust the width of our content needs, so web content will look more neat and elegant. We can create a variable to store the container value so that later if we want to change the value we just change the value on its variable, not on every element that uses the value of the container.

Make a variable for container

We have learned how to create SASS variable in tutorial Part3. We can add variable like this $nameofvariabel.

Create variable in SASS:

$container-size: 960px

I created the $container-size variable name. and the value is 960px , you can set the value by your own will.

Make class in SASS :

.container
    max-width: $container-size
    margin: 0 auto

• .container: This is name of class . So latter i will use it as a wrapper of .columns
• max-width: $container-size: We use property of CSS. That is max-width . It's mean you can limit its maximized width. And the value we get from the variables we have created $container-size
• margin: 0 auto: in CSS we can provide margins in the following order -> top, right, bottom,left (0, 0, 0 , 0). But we can shorten the writing in this way -> vertical, horizontal (0,0).
  but must be remembered, the vertical and horizontal values are the same.

Implement in HTML :

<div class="container"> //wrapper columns
        <div class="columns">
            <div class="column is-half">
                <h1>is-half</h1>
            </div>
            <div class="column is-one-fifth">
                <h1>is-one-fifth</h1>
            </div>
            <div class="column is-one-fifth">
                <h1>is-one-fifth</h1>
            </div>
        </div>  
    </div>

• .container: We create a .container as a wrapper, so the elements we input into the element of the container class. Open your project and command prompt path with gulp.

We can see the result of the container class effect. The content of our web is in the middle because we have set the margin of left and right auto. So the content automatically adjusts to the screen size.

Make Helper CSS

When using CSS, there are small things that we often use repeatedly in the element. therefore we need to create a helper class. I will give you some example, you can create and add your CSS helper class.

Text-align-center

Class name : txt-center

SASS :

.txt-center
text-align:center

Use :

<div class="txt-center"></div>

Text-align-left

Class name : txt-left

SASS :

.center
text-align:left

Use :

<div class="txt-left"></div>

Text-align-right

Class name : txt-right

SASS :

.txt-right
text-align:right

Use :

<div class="txt-right"></div>

Position relative

Class name : relative

SASS :

.relative
Position:relative

Use:

<div class="txt-left"></div>

Display inline-block

Class name : inline-block

SASS :

.inline-block
display:inline-block

Use :

<div class=" inline-block "></div>

Positon absolute

Class name : absolute

SASS :

. absolute
position:absolute

Use :

<div class="absolute"></div>

There are many helpers that can make, above is one example, you can add according to your requirement and property that often use. Thank you for following this tutorial, hopefully useful.

Curiculum

• CSS Frameworks part-1
• CSS Frameworks part-2
• CSS Frameworks part-3

---

Posted on Utopian.io - Rewarding Open Source Contributors

---