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.
Custilty has several quick start options available:
- Download the latest release.
- Clone the repo:
git clone https://github.com/krivaten/custility.git. - Install with Bower:
bower install custility. - Install with npm:
npm install custility.
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.
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.
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.
Here's the of the modules that Custility currently offers:
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.
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:
.row: Creates a row
.col--xs--: Adds a column on screens 0px wide and up.col--sm--: Adds a column on screens 544px wide and up.col--md--: Adds a column on screens 769px wide and up.col--lg--: Adds a column on screens 992px wide and up.col--xl--: Adds a column on screens 1200px wide and up
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:
nw: Prevents the row contents from wrapping (Default)w: Allows the row contents to wraprow: Convert a row into a Horizontal Row (Default)col: Convert a row into a Vertical Rowstr: Set contents to fill the available heightflush: Set column to have no margina--fs: Align row items toflex-starta--fe: Align row items toflex-enda--c: Align row items tocenterj--fs: Justify row contents toflex-startj--fe: Justify row contents toflex-endj--c: Justify row contents tocenterj--sb: Justify row contents tospace-betweenj--sa: Justify row contents tospace-around
#: Create Column where # is any column size 1-12o--#: Offset Column where # is any column size 1-12str: Set column to fill the available heighta: Set Column to Auto Width (Requires.row--xs--nwclass on.row)a--c: Align Column tocentera--fs: Align Column toflex-starta--fe: Align Column toflex-endfirst: Change Column Order to Firstlast: Change Column Order to Last
<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>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;These utilities allow you to control the display of elements.
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:
.dsp--xs--: Affects display on screens 0px wide and up.dsp--sm--: Affects display on screens 544px wide and up.dsp--md--: Affects display on screens 769px wide and up.dsp--lg--: Affects display on screens 992px wide and up.dsp--xl--: Affects display on screens 1200px wide and up
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:
none: Hides the elementblk: Displays the element as a blockinl: Displays the element as inlineinl-blk: Displays the element as an inline-blocksb: Displays the element using flexbox's space-betweensa: Displays the element using flexbox's space-around
<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>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;These utilities allow you to control the margin of elements.
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:
.mar--0--: Removes all margin.mar--xs--: Adds a margin of 16px.mar--sm--: Adds a margin of 32px.mar--md--: Adds a margin of 48px.mar--lg--: Adds a margin of 64px.mar--xl--: Adds a margin of 80px
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:
t: Adds margin to the topb: Adds margin to the bottoml: Adds margin to the leftr: Adds margin to the rightx: Adds margin to the x-axisy: Adds margin to the y-axis
<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>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;These utilities allow you to control the padding of elements.
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:
.pad--0--: Removes all padding.pad--xs--: Adds a padding of 16px.pad--sm--: Adds a padding of 32px.pad--md--: Adds a padding of 48px.pad--lg--: Adds a padding of 64px.pad--xl--: Adds a padding of 80px
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:
t: Adds padding to the topb: Adds padding to the bottoml: Adds padding to the leftr: Adds padding to the rightx: Adds padding to the x-axisy: Adds padding to the y-axis
<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>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;These utilities allow you to control the position of elements.
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:
.pos--xs--: Affects position on screens 0px wide and up.pos--sm--: Affects position on screens 544px wide and up.pos--md--: Affects position on screens 769px wide and up.pos--lg--: Affects position on screens 992px wide and up.pos--xl--: Affects position on screens 1200px wide and up
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:
abs: Absolutely positions the elementrel: Relatively positions the elementl: Positions the element on the leftr: Positions the element on the rightt: Positions the element on the topb: Positions the element on the bottomtl: Positions the element on the top lefttr: Positions the element on the top rightbl: Positions the element on the bottom leftbr: Positions the element on the bottomr right
<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>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;These utilities allow you to controll the float of elements.
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:
.pull--xs--: Affects float on screens 0px wide and up.pull--sm--: Affects float on screens 544px wide and up.pull--md--: Affects float on screens 769px wide and up.pull--lg--: Affects float on screens 992px wide and up.pull--xl--: Affects float on screens 1200px wide and up
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:
l: Floats the element to the leftr: Floats the element to the rightnone: Does not float the element
<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> // Pull Variables
$include-responsive-pull: true;
$pull-params: $screen-params;
// Pull Aliases
$pull-alias: pull;
$left-alias: l;
$right-alias: r;
$none-alias: none;These utilities allow you to control text styling.
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:
.txt--xs--: Affects text on screens 0px wide and up.txt--sm--: Affects text on screens 544px wide and up.txt--md--: Affects text on screens 769px wide and up.txt--lg--: Affects text on screens 992px wide and up.txt--xl--: Affects text on screens 1200px wide and up
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:
sm: Resizes the text as smallstr: Styles the text as boldemp: Styles the text as italiceli: Overflow text will be styled with ellipsisl: Aligns the text to the leftc: Aligns the text to the centerr: Aligns the text to the right
<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>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;Kris Van Houten
Code and documentation copyright 2016 Kris Van Houten. Code released under the MIT license.