genesass

A minimalistic SCSS starter kit.

• _fixes.scss Some common fixes, such as setting the box-sizing to border-box and enhancing font rendering.
• _functions.scss Useful Sass functions.
• _media-queries.scss Breakpoints and media queries.
• _base.scss Opinionated default styles with customizable variables.
• _print.scss Print styles adapted from HTML5 Boilerplate.

Getting started

Install using npm or bower:

$ npm install --save genesass

$ bower install --save genesass

Then, import in your main SCSS file:

@import "../node_modules/genesass/main/genesass";

@import "../bower_components/genesass/main/genesass";

It is recommended you include normalize.css before importing genesass.

Customizing

_base.scss

$line-height and $baseline are used for setting vertical rhythm in _base.scss.

$line-height: 1.625;
$baseline: $line-height * 1rem;

_media-queries.scss

Breakpoints can be customized for _media-queries.scss. The default values are based on Bootstrap's breakpoints.

• xxs: Watches, wearables
• xs: Phones
• sm: Tablets
• md: Tablets
• lg: Laptops, notebooks
• xl: Desktops (HD)
• xxl: Desktops (4K)

$min-width-xs:   320px;
$min-width-sm:   768px;
$min-width-md:   992px;
$min-width-lg:  1200px;
$min-width-xl:  1920px;
$min-width-xxl: 4096px;

Use interpolation to include a media query:

@media #{$sm} {
  ...
}

@media #{$lg-only} and (orientation: landscape) {
  ...
}

@media #{$xs-only}, #{$sm-only} {
  ...
}

License

Dedicated to the public domain under CC0.