Documentation

Learn how to use all of great features that Concise provides.

Mixins

Concise uses Sass mixins to help generate various features in the framework as as provide extra functionality when working on projects.

All of these mixins can be found inside of the /helpers/_mixins.scss file.

Font Size

Uses the calculate-rem() function to calculate rem font-size and px fallback. Line height is calculated with calculate-line-height() but passing false will prevent that.

Parameters

Parameter Description
$font-size The font size (in pixels) to be converted to rem.
$rem-sizing If you want to convert the font-size to rem or not (default is true).
$line-height Set to false if you wish not to output a calculated line-height (defalt is true).
Code 
@include font-size(24px);

Vendor Prefixes

Proper vendor prefixes are created by passing a property, property value, and browser vendor (webkit, moz, ms, o, etc).

Parameters

Parameter Description
$property What CSS property to generate vendor prefixes for.
$value The value of what was defined in $property.
$vendors What vendor prefixes to generate (default is none).

We suggest using a CSS post-processing tool such as Autoprefixer to add vendor prefixes to your CSS based on results from Can I Use.

Code 
@include vendor(border-radius, 4px, webkit moz ms)

Breakpoints

Loops through all of the values in the $breakpoints map and outputs conditional statements used to generate media query code.

When calling the mixin, if the parameter matches a key from the breakpoints map, a media query is output with that key's value. If an explicit value is set (ex: 360px) then a media query is output with that value.

Parameters

Parameter Description
$point The breakpoint value for the media query output.
$min-max Set whether min-width or max-width is used (default is min)
Code 
@include breakpoint(extra-small) { ... }

@include breakpoint(360px, max) { ... }

Responsive Styles

Generates property media queries for any CSS property, value, and set of breakpoints. Allows you to easily change property values based a set of breakpoints.

Parameters

Parameter Description
$properties What CSS property to output inside of the media queries (can have multiple).
$values The value for each property (can have multiple).
$responsive-values What breakpoints to generate media queries for.
$use-available-mixins Whether or not to use mixin outputs for properties like font-size or line-height (default is true).
Code 
@include responsive("font-size", 11px,
  (
    "small" : 12px,
      450px : 13px,
     1100px : 14px,
    "large" : 15px,
     1600px : 16px,
  )
);

Row

Generates CSS to wrap semantic columns in a row.

Code 
@include row();

Column

Generates CSS for semantic columns.

Parameter Description
$column The total number of columns in the grid. (e.g. 16)
$number-columns The column span. e.g. 4 (as in a span of 4 out of 16 columns)(default is $column-number).
$first-column Set to true if it's the first column in a row (default is false).
$use-gutters Set to true if you want column gutters (default is false).
$gutter-value Percentage value of the gutters to be applied (default is $gutters variable).
Code 
@include column(16, 4, false, true, 4);

Push & Pull

Generates CSS for pushing a semantic column left or right.

Parameter Description
$option Set to push or pull to generate proper styles.
$column THe column number.
$number-columns The number of columns in the row (default is $column-number).
$use-gutters Set to true if your column has gutters (default is false).
$gutter-value Percentage value of the gutters to be applied (default is $gutters variable).
Code 
@include push-pull(push, 4, 16, true);

Clearfix

Generates CSS that will clear both left and right floats.

Code 
@include clearfix();