Stylus utilities.

Usage no npm install needed!

<script type="module">
  import utilus from 'https://cdn.skypack.dev/utilus';



Utilities for Stylus.

utilus is trying to make styling process easier by hiding away the annoying parts, and adding new features with a nice to use APIs.

You'll get super comfy media queries, awesome flexgrid, and tons of CSS improvements and extensions. utilus also doesn't produce prefixes, that's what autoprefixer is for.


npm install utilus --save-dev


From within your styles, load the whole utilus:

@require 'utilus'

Or only the modules you are interested in:

@require 'utilus/media'
@require 'utilus/flexgrid'


Comfy flexible grid system:

    // define a custom grid for this element
    flexgrid: 12 columns 16px gutter around

        span: 4/12    // span item 4 out of 12 columns
        offset: 4/12  // offset item 4 out of 12 columns

// save a custom grid
utilus.flexgrid.main = flexgrid-type(12 columns 16px gutter around)

    // and use later
    flexgrid: main
    // or use with some adjustments
    flexgrid: main gutter between

Easy media queries:

+media('screen <480px')
    color: red

// or with a shorthand
    color: red

// or save custom query
utilus.media.mobile = media-query('screen <480px')

// and use later
    color: red

Tons of utility functions and CSS extensions:

clear: fix          // output clearfix
size: 100px         // set width & height to 100px
size: 100px 60px    // set width to 100px and height to 60px
margin: 5px _ 10px  // set top and bottom margin with underscore omission syntax
padding: 5px _ 10px // set top and bottom padding with underscore omission syntax
position: cover     // cover the parent relative element
position: center    // center within parent relative element
absolute: 5px _ _ 10px // position: absolute, top: 5px, left: 10px
overflow: ellipsis  // text ellipsis overflow
transition: all 300ms easing('in-quad') // easy easing references
width: rem(100px)   // style in `px` and respect the user browser settings at the same time
// and more!


Documentation is located in the /docs folder.

List of available modules is located in the /utilus folder.