Scssfold

What is Scssfold?

This repository is a work in progress

Scssfold is a small utility-first CSS framework. Its purpose is to deliver reusable media-width aware utility classes, which speeds up the scaffolding process when developing user interfaces.

Requirements

• NPM
• Ability to compile SCSS

Due to the nature of how this framework works, it will increase the size of your final build dramatically. To circumvent this caveat, it is recommended that you purge any unused classes using purgecss.

Installation

Install the package

Start by installing the package using either NPM or Yarn as specified below.

$ yarn add scssfold
$ npm install scssfold --save

Include the package

Include the package by importing it in either a JavaScript or SCSS file. We recommend that you import the package in an SCSS file, since that enables you to customize the framework to your needs.

Basic (all modules)

Importing the base module will give you all the modules specified in the Modules section:

@import '~scssfold';

Select modules

In case you wish to import only a select number of the modules specified in the Modules section, you can target them directly as specified below.

@import '~scssfold/src/modules/spacing/margins';
@import '~scssfold/src/modules/spacing/paddings';

Responsiveness

All classes listed in the Modules section below can be prefixed with breakpoints, making them active only once the width of the browser matches the given breakpoint.

If for example, we wanted to use the flex class, but we'd only want it to be applied on screens that are equal to or greater than the md breakpoint, we can use it as such:

Take for example the below HTML. We apply the flex class, determining that the items should flex on the horizontal axis:

<div class="flex">
  <p>Item 1</p>
  <p>Item 2</p>
  <p>Item 3</p>
</div>

But what if we wanted the display: flex styling only to apply to screens that are equal to or greater than the md breakpoint? We could write it as such:

<div class="md:flex">
  <p>Item 1</p>
  <p>Item 2</p>
  <p>Item 3</p>
</div>

This applies to all classes delivered by Scssfold. Very convenient and yes - heavily inspired by Tailwind CSS.

Modules

Flex

• Align Content
• Align Items
• Align Self
• Columns
• Direction
• Grow
• Justify Content
• Justify Items
• Justify Self
• Order
• Percentage Width
• Shrink
• Sizing
• Wrap

Layout

• Container
• Container Fluid
• Row

Position

• Position

Reset

• Reset

Spacing

• Margin
• Padding

Visibility

• Display

Borders

• Border Radius

Why Scssfold?

I initially wrote this framework for myself, but chose to make it public for others to use. I've always been a fan of the BEM methodology. However, over the years, it became more and more clear to me that BEM is not an all-or-nothing approach. Sticking to the BEM methodology strictly resulted in a lot of repetitive CSS, which had both performance and development drawbacks. This framework aims to solve the issue of writing the rough layout of an application; spacings, columns, containers etc. - responsively.

I still use BEM for component styling but try to make components as context-unaware as possible, meaning they have no impact on the layout outside of the component. This makes them more reusable and contributes to a cleaner and more maintainable codebase.