A minimalistic SCSS starter kit.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
main
LICENSE
README.md
bower.json
package.json

README.md

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.