utilus

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.

Installation

npm install utilus --save-dev

Usage

From within your styles, load the whole utilus:

@require 'utilus'

Or only the modules you are interested in:

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

Examples

Comfy flexible grid system:

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

	.item
		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)

.container
	// 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
+screen('<480px')
	color: red

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

// and use later
+media('mobile')
	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

Documentation is located in the /docs folder.

• Options - All utilus options.
• Flexgrid - Flexible grid based on flexbox and calc().
• Media queries - Comfy media queries.
• CSS extensions - Extended and new CSS properties.
• Utilities - Helper mixins and plugins.

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

License

MIT