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:
This content would be 3 columns on large screens, 6 columns on medium screen, 12 columns on small and extremely small screen
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
Top comments (0)