logo
Roman Kovalchik
Contact
Development

Helpers.scss. Library for comfortable CSS workflow

Sep 19, 2021
78
  1. Minimum Requirements
  2. Description
  3. Intuitive
  4. Responsive
  5. Flexible
  6. Mobile First
  7. Colors
  8. Lightweight

Minimum Requirements

Using Helpers.scss library assumes that user is familiar with the following tools: HTML, CSS, SCSS, npm.

Tested with npm package SASS since version 1.35.2:

// package.json

"devDependencies": {
  "sass": "^1.35.2"
}

Older versions of the SASS preprocessor may throw errors when converting the library to pure CSS.

Description

The Helpers.scss library has a lot in common with the well-known TailwindCSS and Bootstrap libraries. But according to the author, it is even more intuitive and flexible to use for the developer.

The main idea is to apply approximately 95% of styles using pre-built classes. Without writing any CSS.

<span class="f-600 f-15 d-in-bl px-10 py-5 po-re">awesome</span>

But what if to automate the process of elements responsiveness for all screen sizes? Without writing styles, and even additional classes.

Intuitive

Unlike TailwindCSS, Helpers.scss uses a shorter way of writing classes. But it is also more intuitive for the developer.

The most commonly used classes consist of just one letter per prefix. These are all classes for text styles and display property:

<div class="f-600 f-15 f-up f-it d-fl d-in-fl d-bl d-in-bl d-gr d-no"></div>
font-weight: 600; // f-600
font-size: 15px; // f-15
text-transform: uppercase; // f-up
font-style: italic; // f-it
display: flex; // d-fl
display: inline-flex; // d-in-fl
...

The classes that are responsible for padding and margin are structured as follows:

<div class="p-15 px-10 py-15 pt-5 m-20 mx-35 mr-auto"></div>

Classes for columns layout are formed in exactly the same way as the classes in the Bootstrap library:

<div class="container">
  <div class="row">
    <div class="offset-lg-2 col-lg-10 col-md-8"></div>
  </div>
</div>

All other classes are formed according to the following rule:

The first two letters of a property + the first two letters of each word of the value of this property + a numeric value (optional).

Sounds confusing, but in fact everything is very simple:

text-align: center; // te-al-ce
overflow: hidden; // ov-hi
overflow-x: visible; // ov-x-vi (one letter [x] in the absence of the second)
flex-grow: 1; // fl-gr-1
align-items: flex-end; // al-it-fl-en
position: absolute; // po-ab
z-index: -1; // z-in--1 (additional hyphen [minus] in case of negative value)
border-top-left-radius: 5px; // bo-to-le-ra-5

// cases when you have to use three letters of the property value
// due to duplication of classes
background-size: cover; // ba-si-cov 
background-size: contain; // ba-si-con
position: static; // po-sta
position: sticky: // po-sti

// classes with step 0.1 in numeric property values are multiplied by 10
letter-spacing: 0.1px; // le-sp-1
letter-spacing: 1.2px; // le-sp-12
line-height: 1.2; // li-he-12
line-height: 2; // li-he-20
transition: 0.3; // tr-3
opacity: 0.7; // op-7

Responsive

Helpers.scss uses relative unit rem for the values of all the numeric properties of its classes that are related to size.

This means that the size of an element, be it text (font-size), margin/padding or block size (width / height), directly depends on the font size of the <html> tag, which is 16px by default.

This is how it works:

html {
  font-size: 16px; // default html tag font size value
}

// HTML   // SCSS                             // CSS
f-24      font-size: #{math.div(24, 16)}rem;  font-size: 1.5rem;  // 24px
p-60      padding:   #{math.div(60, 16)}rem;  padding:   3.75rem; // 60px

The rem value is multiplied by the font size of the <html> tag in order to get the pixel value: 1.5 x 16 = 24.

Let’s change the font size of the <html> tag for medium screens:

html {
  font-size: 16px;
  @media (max-width: 991.98px) {
    font-size: 15px;
  }
}

// HTML   // SCSS                             // CSS
f-24      font-size: #{math.div(24, 16)}rem;  font-size: 1.5rem;  // 22.5px
p-60      padding:   #{math.div(60, 16)}rem;  padding:   3.75rem; // 56.25px 

As a result, we get a reduced copy of the design of the entire page. Also all proportions are preserved. To achieve this, we just applied one CSS property to one tag.

Sounds cool 🔥

Responsive classes

Helpers.scss provides the ability to automatically make elements responsive. But it also allows the developer to control this process by himself.

Each class has its responsive counterparts, with an additional endings in the name. These endings are responsible for a specific breakpoints of the screen width in pixels.

By default, Bootstrap grid breakpoints are used, as this grid is the most widely used by developers:

// screen width    // slug
1399.98px          'xxl'
1199.98px          'xl'   
991.98px           'lg'   
767.98px           'md'   
575.98px           'sm'
<!-- Example of use -->
<div class="f-18 f-16-md d-fl al-it-ce-lg fl-di-co-md"></div>
Responsive classes use px unit of measurement, and as a result, their values are no longer dependent on the font size of the <html> tag.

Let’s look at a specific case for a better understanding.

For example, you are completely satisfied with the appearance of the automatic page responsiveness. But the text of the paragraphs turned out to be too small, and you would like to keep its original size.

Then the markup and styles will look like this:

<p class="f-18 f-16-lg">The text we want to keep
with a font size of 16px starting from medium screens,
avoiding automatic responsiveness</p>
html {
  font-size: 16px;  // .f-18 = 18px;
  @media (max-width: 991.98px) {
    font-size: 15px; // .f-18 = 16.875px; .f-16-lg = 16px;
  }
  @media (max-width: 767.98px) {
    font-size: 14px; // .f-18 = 15.75px; .f-16-lg = 16px;
  }
  @media (max-width: 575.98px) {
    font-size: 13px; // .f-18 = 14.625px; .f-16-lg = 16px;
  }
}

Another situation is when you need to leave the text size or element size fixed for all screens. To do this, there are classes generated using pixels in their values and are formed by adding an underscore.

<p class="f-15_ wi-200_">The text we want to keep
with a font size of 16px and 200px width on all screens,
avoiding automatic responsiveness</p>

Responsive classes make it possible to control the appearance of a page on all screens. Doing it beautifully, quickly and very easily.

Flexible

The Helpers.scss library is written in such a way that any developer has the opportunity to customize it to suit his requirements.

First of all, you can change the values and names of breakpoints, the width of the container for each breakpoint and the maximum number of columns:

// variables.scss

/* maximum grid columns in a row */
$max-columns: 12;

/* responsive classes tiles depends on breakpoints; from highest to lowest */
$grid-breakpoints: (
  'xxl': 1399.98px,
  'xl': 1199.98px,
  'lg': 991.98px,
  'md': 767.98px,
  'sm': 575.98px,
);

/* container max widths depends on breakpoints; from lowest to highest */
$container-max-widths: (
  'sm': 540px,
  'md': 720px,
  'lg': 960px,
  'xl': 1140px,
  'xxl': 1320px,
);

You can set the maximum size for most CSS properties with a numeric value, and the step between some of them:

// variables.scss

/* numeric variables */
$padding-margin-max: 100;
$padding-margin-step: 5;
$font-size-max: 54;
$width-height-max: 800;
$width-height-step: 5;
$border-radius-max: 24;
$border-width-max: 5;
$transition-max: 4;
$z-index-max: 10;

By using these variables, you can be sure that any class with a numeric value you need will be converted to pure CSS. This makes it possible to markup pages with Pixel Perfect accuracy.

Also, easily add your own classes and each will be generated for all the breakpoints:

// custom-classes.scss

// SCSS                                          // CSS
/* add your own classes here */
.full-min-height#{$breakpoint-name-with-dash} {  .full-min-height {
  min-height: 100vh;                               min-height: 100vh;
}                                                 }

                                                  @media (max-width: 991.98px) {
                                                    .full-min-height-lg {
                                                      min-height: 100vh;
                                                    }
                                                  } 
                                                  ...

Mobile First

Helpers.scss allows developer to use the Mobile First design principle. According to this principle, site page is primarily adapted for the screens of mobile devices. And accordingly responsive design for other screens is being achieved using breakpoints.

In this case, the CSS query @media (max-width: ) is replaced with @media (min-width: ).

All you need to do is change the value of the mobile-first variable:

// variables.scss

/* mobile first design principle */
$mobile-first: true; // false by default

Still, the functionality of automatic responsiveness is preserved. But now, instead of decreasing the font size of the <html> tag as the screen shrinks, it needs to be increased as the screen grows:

html {
  font-size: 16px;
  @media (min-width: 576px) {
    font-size: 17px;
  }
} 

Colors

Helpers.scss provides color classes as well. In order to use them, you need to specify the colors inside the library:

// variables.scss

/* colors */
$colors: (
  'grayfc': #fcfcfc,
  'blueff': #0077ff,
  'blueff-8': rgba(0, 119, 255, 0.8),
  'tr': transparent,
);

After that, you can use the classes for the color of the text, background and borders. All the same classes are provided for the hover event with the ending [-hover]:

<div class="c-grayfc bg-bluff bg-tr-ma5 bo-grayfc c-bluff-hover"></div>

Adding your own event is also quite simple:

// colors.scss

// adding :focus event for color classes

// Before adding                  // After adding
&-hover:hover {                   &-hover:hover {
 #{$property}: $color-hex;          #{$property}: $color-hex;
}                                 }
/* add your own events here */    /* add your own events here */
                                  &-focus:focus {
                                    #{$property}: $color-hex;
                                  }
<!-- Example of use -->
<div class="c-grayfc c-blueff-focus c-grayfc-focus-ma3"></div>

An example of creating a colored border only on the left side of an element:

<div class="bo-le-st-so bo-le-wi-2 bo-blueff"></div>
// for this you need to set the border style with border-left-style
border-left-style: solid; // bo-le-st-so
border-left-width: 0.125rem; // bo-le-wi-2 (2px)
border-color: #0077ff; // bo-blueff

To simplify the development process, it is highly recommended to convert Helpers.scss once and temporarily include it in a separate CSS file. This should be done for the reason that the process of converting the library to pure CSS might take a lot of time by the standards of the Front-end workflow.

I also recommend to read the article on how my development environment for the WordPress project is organized WP-Starter. WordPress theme starter template.

Lightweight

Before releasing the project, you need to remove all unused Helpers.scss classes from the output CSS file.

For this purpose I use npm package gulp-purgecss.

You will be surprised how tiny a CSS file can be when released. This is achieved by reusing pre-defined classes instead of writing the same styles for different elements.

To simplify the structure of the HTML tree, it is recommended to apply the @extend SCSS directive for elements with the same repetitive classes. File extended.scss is already created and imported inside the library.

<!-- before -->
<div class="f-10 c-blueff d-fl fl-di-co-md po-re ov-hi"></div>
<div class="f-10 c-blueff d-fl fl-di-co-md po-re ov-hi"></div>

<!-- after-->
<div class="my-item"></div>
<div class="my-item"></div>
// extended.scss

.my-item {
  @extend .f-10, .c-blueff, .d-fl, .fl-di-co-md, .po-re, .ov-hi;
}

That’s all. Share your experience of using such a technology and tips for improving the Helpers.scss library in the comments.

Be kind.

Sep 19, 2021
Like 2

Leave a Reply

Your email address will not be published.

formjs Development
Oct 12, 2021
72
0

Form.js. jQuery library for working with forms via AJAX

Form.js is a tiny library that makes it much easier to work with forms asynchronously on the client side.

images-wordpress Development
May 29, 2022
25
0

Dealing with images while writing a WordPress project

Best practices working with images writing a Wordpress theme.

learn-english-1024x570 Education
Sep 08, 2021
47
1

How to learn a foreign language. Practical guide

I have studied English since the first grade of high school, attending school Olympiads. After high school, I studied English at the institute...