Fork me on GitHub

A Customizable Front End Utility Library for Developers

Custility is a powerful set of truly customizable css utility classes, made to greatly aid in the development of potentially large and ambitious websites and apps that need a mountain of flexibility. Every class name and breakpoint can be bent to your will, allowing you to even configure it to your current project’s naming guidelines. These were initially built up by Kris Van Houten, but feel free to contribute!

This library does not focus on visual things like buttons, form inputs, tables, typography, and things of the like, but serves more as a toolbox for your website or app. I am currently working on a separate library that does handle the visual portion, but that will take more time to build.

Get Started

Custilty has several quick start options available:

Take only what you need to survive

I’ve done my best to make it so that adding Custility to your project doesn’t add any unnecessary size to your compiled files. If there is a particular module you don’t need, then don’t include it in your build. Additionally, all the mixins required for each module are isolated to help ensure my code doesn’t interfere with yours.

Bend it to your will

Provide your own responsive break points or turn them off entirely on a per module basis, customize class names, and change the value of any computed value.

Bro, do you even BEM?

Custility was made with BEM in mind, but if you haven’t jumped on the train yet, we got you covered. Simply change the value of variable name $spacer to '-' and you’ll feel right at home. Promise.

Modules

Here’s some of the modules that Custility offers:

Flexbox grid

(back to top)

Yes, another grid. So why did I make this one? Because while moving away from Bootstrap, I needed a FlexBox based grid that was incredibly flexible, allowing me to utilize all the most common uses for FlexBox with the addition or removal of a class. This grid was the result.

Prefixes

By default, responsive breakpoint based class names are generated for you. If you would like to generate non-responsive breakpoint class names, set the variable $include-responsive-grid to false. If you do this, the only column prefix will be .col--, otherwise you will have the following:

Rows

Columns

Suffixes

The suffixes are the values you can append to the end of the row and column prefixes (i.e., .col--xs--8), to impact the grid layout of the elements. Unless you edit the corresponding alias variable values, your options will be named the following:

Rows

Columns

Examples

  <div class="row row--md--sb">
    <div class="col--xs--6 col--md--4">
      Will only be four columns wide on screens 769px wide and greater
    </div>
    <div class="col--xs--6 col--md--a--c">
      Will be six columns wide and aligned center on screens 769px wide and greater
    </div>
    <div class="col--xs--12 col--md--first">
      Will be full width and displayed first on screens 769px wide and larger
    </div>
  </div>

Variables

The following are the variables that are used, along with their default values, which may be modified to your liking.

  // Grid Variables
  $include-offset-columns: true;
  $include-responsive-grid: true;
  $grid-columns: 12;
  $grid-gutter: 30px;
  $screen-params: (
    xs: $screen-xs,
    sm: $screen-sm,
    md: $screen-md,
    lg: $screen-lg,
    xl: $screen-xl
  );

  // Display Aliases
  $row-alias: row;
  $column-alias: col;
  $flex-end-alias: fe;
  $flex-start-alias: fs;
  $space-between-alias: sb;
  $space-around-alias: sa;
  $align-alias: a;
  $justify-alias: j;
  $flush-alias: flush;
  $first-alias: first;
  $last-alias: last;
  $wrap-alias: w;
  $nowrap-alias: nw;
  $stretch-alias: str;
  $offset-alias: o;

Display

(back to top)

These utilities allow you to control the display of elements, and are very simple to use.

Prefixes

By default, responsive breakpoint based class names are generated for you. If you would like to generate non-responsive breakpoint class names, set the variable $include-responsive-display to false. If you do this, the only display prefix will be .dsp--, otherwise you will have the following:

Suffixes

The suffixes are the values you can append to the end of the display prefixes (i.e., .dsp--xs--none), to impact the visibility and appearance of the element. Unless you edit the corresponding alias variable values, your options will be named the following:

Examples

  <div class="dsp--xs--none dsp--xl--blk">
    Will only be visible on screens 1200px wide and greater
  </div>
  <div class="dsp--xs--inl-blk dsp--xl--none">
    Will be an inline block up to 1200px, from there it will be hidden
  </div>
  <div class="dsp--xs--sb">
    Will use flexbox's `space-between` feature on all screen sizes
  </div>

Variables

The following are the variables that are used, along with their default values, which may be modified to your liking.

  // Display Variables
  $include-responsive-display: true;
  $display-params: $screen-params;

  // Display Aliases
  $display-alias: dsp;
  $block-alias: blk;
  $inline-alias: inl;
  $none-alias: none;
  $space-between-alias: sb;
  $space-around-alias: sa;

Margin

(back to top)

Within Custility, you can have consistent control over the margin you add to elements.

Prefixes

By default, there are six margin prefixes that determine the size of the margin to be added. While the names and sizes can be changed by overriding the $margin-params variable, out of the box they are the the following:

Suffixes

The suffixes that can be added to the margin class give you a lot of flexibility as to where and how margin will be applied. Unless you edit the corresponding alias variable values, your options will be named the following:

Examples

  <div class="mar--x--y mar--xl--x">
    Will have no margin on the y-axis but xl margin on the x-axis
  </div>
  <div class="mar--xs--t mar--md--r">
    Will have 16px margin on the top and md margin on the right
  </div>
  <div class="mar--lg--b">
    Will have lg margin on the bottom
  </div>

Variables

The following are the variables that are used, along with their default values, which may be modified to your liking.

  //Margin Variables
  $include-margin: true;
  $margin-params: (
    0: 0,
    xs: $base-space,
    sm: ($base-space * 2),
    md: ($base-space * 3),
    lg: ($base-space * 4),
    xl: ($base-space * 5)
  );

  // Margin Aliases
  $margin-alias: mar;
  $left-alias: l;
  $right-alias: r;
  $top-alias: t;
  $bottom-alias: b;
  $center-alias: c;
  $vertical-alias: y;
  $horizontal-alias: x;

Padding

(back to top)

These utilities allow you to control the padding of elements, and are very simple to use.

Prefixes

By default, there are six padding prefixes that determine the size of the padding to be added. While the names and sizes can be changed by overriding the $padding-params variable, out of the box they are the the following:

Suffixes

The suffixes are the values you can append to the end of the padding prefixes (i.e., .pad--md--l), to impact the padding of the element. Unless you edit the corresponding alias variable values, your options will be named the following:

Examples

  <div class="pad--0--y pad--xl--x">
    Will have no padding on the y-axis but 80px padding on the x-axis
  </div>
  <div class="pad--xs--t pad--md--r">
    Will have 16px padding on the top and 32px padding on the right
  </div>
  <div class="pad--lg--b">
    Will have 64px padding on the bottom
  </div>

Variables

The following are the variables that are used, along with their default values, which may be modified to your liking.

  // Padding Variables
  $base-space: 1em;
  $include-padding: true;
  $padding-params: (
    0: 0,
    xs: $base-space,
    sm: ($base-space * 2),
    md: ($base-space * 3),
    lg: ($base-space * 4),
    xl: ($base-space * 5)
  );

  // Padding Aliases
  $padding-alias: pad;
  $left-alias: l;
  $right-alias: r;
  $top-alias: t;
  $bottom-alias: b;
  $center-alias: c;
  $vertical-alias: y;
  $horizontal-alias: x;

Position

(back to top)

These utilities allow you to control the position of elements.

Prefixes

By default, responsive breakpoint based class names are generated for you. If you would like to generate non-responsive breakpoint class names, set the variable $include-responsive-position to false. If you do this, the only position prefix will be .pos--, otherwise you will have the following:

Suffixes

The suffixes are the values you can append to the end of the position prefixes (i.e., .pos--xs--rel), to impact the position of the element. Unless you edit the corresponding alias variable values, your options will be named the following:

Examples

  <div class="pos--xl--abs pos--xl--tl">
    Will positioned in the top left on screens 1200px wide and greater
  </div>
  <div class="pos--xs--abs pos--xl--rel">
    Will be absolutely positioned up to 1200px, from there it will be relatively positioned
  </div>
  <div class="pos--xs--abs pos--xs--br">
    Will be absolutely positioned to the bottom right on all screens
  </div>

Variables

The following are the variables that are used, along with their default values, which may be modified to your liking.

  // Position Variables
  $include-responsive-position: true;
  $position-params: $screen-params;

  // Position Aliases
  $position-alias: pos;
  $absolute-alias: abs;
  $relative-alias: rel;
  $left-alias: l;
  $right-alias: r;
  $top-alias: t;
  $bottom-alias: b;

Pull

(back to top)

These utilities allow you to controll the float of elements. A pretty small but still useful module.

Prefixes

By default, responsive breakpoint based class names are generated for you. If you would like to generate non-responsive breakpoint class names, set the variable $include-responsive-pull to false. If you do this, the only pull prefix will be .pull--, otherwise you will have the following:

Suffixes

The suffixes are the values you can append to the end of the pull prefixes (i.e., .pull--xs--none), to impact the float of the element. Unless you edit the corresponding alias variable values, your options will be named the following:

Examples

  <div class="pull--xl--r">
    Will only be floated right on screens 1200px wide and greater
  </div>
  <div class="pull--xs--l pull--xl--none">
    Will be floated left up to 1200px, from there it will have no float
  </div>

Variables

  // Pull Variables
  $include-responsive-pull: true;
  $pull-params: $screen-params;

  // Pull Aliases
  $pull-alias: pull;
  $left-alias: l;   
  $right-alias: r;
  $none-alias: none;

Text

(back to top)

These utilities allow you to control text styling.

Prefixes

By default, responsive breakpoint based class names are generated for you. If you would like to generate non-responsive breakpoint class names, set the variable $include-responsive-text to false. If you do this, the only text prefix will be .txt--, otherwise you will have the following:

Suffixes

The suffixes are the values you can append to the end of the text prefixes (i.e., .txt--xs--str), to impact the text of the element. Unless you edit the corresponding alias variable values, your options will be named the following:

Examples

  <div class="txt--xs--emp txt--xl--eli">
    Text will be italic on all screens and have an ellipsis on screens larger than 1200px
  </div>
  <div class="txt--xs--l txt--xl--c">
    Text will be left aligned on screens up to 1200px, from there it will be center
  </div>
  <div class="txt--xs--sm">
    Text will be small on all screens
  </div>

Variables

The following are the variables that are used, along with their default values, which may be modified to your liking.

  // Text Variables
  $include-responsive-text: true;
  $text-params: $screen-params;
  $small-size: 80%;

  // Text Aliases
  $text-alias: txt;
  $strong-alias: str;
  $italic-alias: emp;
  $ellipsis-alias: eli;
  $small-alias: sm;
  $left-alias: l;
  $right-alias: r;
  $center-alias: c;