SCSS Mixins for responsive design, utility classes
Tags: scss, css, responsivedesign, webdev
Published: 2019-09-19 05:58:17

---
title: SCSS Mixins for responsive design, utility classes
published: true
description: SCSS Mixins for responsive design, utility classes
tags: SCSS, CSS, responsive design, web dev
---

**Problem:**

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.
Always wanted to also have utility classes for spacing (paddings, margins).

Easily rememberable class names which could make my problems disappear.
SCSS Mixins for responsive design, utility classes 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, assuming you have SCSS mixins which generate 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 to your worries. If you’re not using SCSS, then convert SCSS code to CSS using online converters.

Please import this file

https://github.com/malothnaresh/css-utilities/blob/master/common.scss
Usage:

Spacing utility classes:

The first mixing in this file creates most of the required spacing utility classes. The unit used is `rem`. And every count you specified is `0.25rem * #{count}`.

Eg:

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

Padding all sides: [p-0, p-1, …p–20]
Margin all sides: [m-0, m-1, …m-20]
Padding Left: [pl-0, pl-1, …pl-20]
Padding Right: [pr-0, pr-1, …pr–20]
Padding Top: [pt-0, pt-1, …pt–20]
Padding Bottom [pb-0, pb-1, …pb–20]
Margin Left: [ml-0, ml-1, …ml–20]
Margin Right: [mr-0, mr-1, …mr–20]
Margin Top: [mt-0, mt-1, …mt–20]
Margin Bottom: [mb-0, mb-1, …mb–20].
Row / Columns Divider:

The 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>
All class names according to screen sizes:

Extremely small screens (max-width: 480px):

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 (max-width: 768px):

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 (max-width: 1125px):

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 (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…

Medium Doc Link: https://medium.com/@cryptoipl/scss-mixins-for-responsive-design-utilities-classes-4194a25e7a99

Contribution by: Maloth Naresh