Bootstrap spacings, row / column division with SCSS mixins with responsive design

Problem:

1. When I start any new web application, I worry about responsive design. How am I going to handle the different view for different screen sizes. Always used to desire of having bootstrap kind of row / column spacing without having bootstrap.
2. Always wanted to also have utility classes for spacing (paddings, margins).
3. Easily rememberable class names which could make my problems disappear.

Above specified problems must have been faced by almost all the web application developers. If you’re using some CSS framework, they provide you different solutions for these. But, assume you have a SCSS mixins which generates you those classes and solves your problem in around 50 lines of CSS code instead of importing a complete framework (eg. Bootstrap).

Don’t worry, I have a solution for your worries. If you’re not using SCSS, then convert SCSS code to CSS here and copy generated CSS code to your project:

SCSS to CSS Compiler - CSS Portal

Please import this file

malothnaresh/css-utilities

Usage:

Spacing utility classes:

First mixin in this file creates most of the required spacing utility classes. Unit used is `rem`. And every count you specified is `0.25rem * #{count}`.

Eg:

1. p-0: Padding `0rem` to all sides;
2. m-0: Margin `0rem` to all sides;
3. p-1: Padding `0.25rem` to all sides;
4. m-2: Margin `0.50rem` to all sides;
5. p-3: Padding `0.75rem` to all sides;
6. m-4: Margin `1rem` to all sides;
7. pl-5: PaddingLeft 1.25rem;
8. mr-6: MarginRight 1.50rem;
9. pt-7: PaddingTop 1.75rem;
10. mb-8: MarginBottom 2rem;

All class names are:

1. Padding all sides: [p-0, p-1, …p–20]
2. Margin all sides: [m-0, m-1, …m-20]
3. Padding Left: [pl-0, pl-1, …pl-20]
4. Padding Right: [pr-0, pr-1, …pr–20]
5. Padding Top: [pt-0, pt-1, …pt–20]
6. Padding Bottom [pb-0, pb-1, …pb–20]
7. Margin Left: [ml-0, ml-1, …ml–20]
8. Margin Right: [mr-0, mr-1, …mr–20]
9. Margin Top: [mt-0, mt-1, …mt–20]
10. Margin Bottom: [mb-0, mb-1, …mb–20].

Row / Columns Divider:

Second mixin in this file gives you a row divided into 12 columns (Bootstrap’s style of row / column design pattern). Every row is “display: flex” with 12 columns (flexes).

Eg:

<div class=”row”>
<div class=”col-lg-3 col-md-6 col-sm-12 col-xs-12">This content would be 3 columns on large screens, 6 columns on medium screen, 12 columns on small and extremely small screen</div>
<div class=”col-lg-6 col-md-12 col-sm-6 col-xs-6"></div>
<div class=”col-lg-2 col-md-3 col-sm-9 col-xs-12"></div>
<div class=”col-lg-3 col-md-6 col-sm-12 col-xs-12"></div>
</div>

Mixins for Responsive Web Page

All class names according to screen sizes:

Extremely small screens (max-width: 600px — Mobile devices):

col-xs-1, col-xs-2, col-xs-3, col-xs-4, col-xs-5, col-xs-6, col-xs-7, col-xs-8, col-xs-9, col-xs-10, col-xs-11, col-xs-12.

Small screens (min-width: 600px, max-width: 768px — portrait tablets and large phones):

col-sm-1, col-sm-2, col-sm-3, col-sm-4, col-sm-5, col-sm-6, col-sm-7, col-sm-8, col-sm-9, col-sm-10, col-sm-11, col-sm-12.

Medium screens (min-width: 768px, max-width: 1200px — Landscape tablets, mini laptops):

col-md-1, col-md-2, col-md-3, col-md-4, col-md-5, col-md-6, col-md-7, col-md-8, col-md-9, col-md-10, col-md-11, col-md-12.

Large screens (min-width:1200px — Desktop / Monitor screens):

col-lg-1, col-lg-2, col-lg-3, col-lg-4, col-lg-5, col-lg-6, col-lg-7, col-lg-8, col-lg-9, col-lg-10, col-lg-11, col-lg-12.

Hope this bootstraps your styling… 😀