SASS-core
A SASS-based framework with useful mixins. Originally a part of the Frontend-starter framework.
Features
- media queries with Breakpoint library, configurable breakpoints
- design breakpoints - set the desing (e.g PSD) pixel dimensions and use mixins to automatically calculate percentage or vw units
- font sets - set the standard font sizes (for headings, paragraphs) and use a mixin to automatically generate media queries for rem/px/vw (or use converter functions if you want to add media queries manually)
- grid building mixins
- responsive sprites (requires spritesmith - available also in grunt/gulp version)
- utilities: clearfix, font-face, placeholder styling
Installation
Bower install
Add sass-core
to your bower.json
dependencies.
Npm install
Add sass-starter
(note different name) to your package.json
dependencies.
Manual install
Unpack the contents of dist
directory to the desired dir.
Importing
First import SASS Breakpoint file, then SASS-core file (_sass-core.scss
).
Manual
By default, SASS-core uses the SASS Breakpoint and mobile first approach. The predefined in _config.scss
breakpoints are (you can change any options by setting variables before importing the framework):
- main, defined as min-width:
mobile
,tablet
,desktop
(when you want to target viewport with at least specified width) - main, defined as exact ranges:
mobile-ex
,tablet-ex
,desktop-ex
(when you want to target only the specified range) - auxiliary (small and large variations), defined as exact ranges:
mobile-sm
,mobile-lg
,tablet-sm
,tablet-lg
,desktop-sm
,desktop-lg
Build your stylesheet like this:
/* common */ /* tablet and desktop */ } /* desktop */ } //non-standard breakpoints } } }
Units
Convert px units easily to vw or percentage. Just get the px dimensions of an element from the design (e.g. PSD), and use:
//pass the width and container width as a breakpoint/design breakpoint name//you can omit breakpoint name for mobile, as it is default, so the previous rule is same as://...or pass container width as a value //or}
Fonts
Embedding font-face
Use the mixin sc-font-face
:
//example
Notes:
$name
: font-family name you will refer to in the stylesheets$filenameBase
: if not set, the$name
is assumed for the filename (without extension)$dir
: font dir relative to the css output dir; defaults to the$sc-font-dir
value, i.e.fonts
(css/fonts
)$exts
: file extensions separated by space; defaults to the$sc-font-formats
value, i.e.woff woff2
(for full support, including old IE, set toeot woff woff2 ttf svg
)$ie8fix
: adds the IE8 support (if svg/eot formats are enabled)
Responsive sizes
The following mixins produce appropriate media queries:
px unit
Use the font-px
mixin, specifying font sizes for the breakpoints, e.g.:
rem unit
Use the font-rem
mixin, specifying target font sizes as a map, e.g.:
The default font set is taken, you can also pass a different font set name or a breakpoint font size map as a second parameter.
vw unit
To make the font size dependent on the viewport width, use the font-vw
mixin, specifying the maximum font sizes for the breakpoints, e.g.:
For desktop breakpoints (desktop, desktop-lg), the px
font size unit will always be used - you can change the $sc-font-conv-vw-exclude
config variable (list) or pass it as a $vwExcludeBreakpoints
parameter.
The result
Media queries will be automatically created. Produced CSS code will be similar to (example for vw unit; px size is just a fallback for browsers not supporting this unit):
/* mobile *//* mobile-sm */{/* tablet */{/* desktop */{
The pixel fallback for vw units is a value multiplied by ratio defined in $sc-font-conv-vw-fallback-ratio
(defaults to 0.8
). Set it to 0
to drop the fallback.
Functions: rem, vw
If you don't want to create media queries, you can use the unit-rem
and unit-vw
directly.
Responsive size with font sets
You will probably need a more handy way to define font sizes. It often happens that you have some number of standard font sizes on the website. To use the font-*
mixins more conveniently, you can predefine these font sizes, before the framework SASS import:
/* small font */ /* normal font */ /* header font */ /*...other sets...*/);
Then, use font-*
mixin, specifying only the font set name, like:
This will produce same code as (according to the md
font set definition):
You can change any font set size, by passing a map as a second parameter:
Default font set is defined by $sc-font-set-default
variable (defaults to md
).
You can set your default font size like this:
}
If you use rem
units and change the default base font size, by assigning it to the $sc-font-rem-base
variable, remember to set it also in your stylesheet:
}
Design breakpoints
By default the base width used to calculate vw/percentage width is the width of a breakpoint passed as the second argument. However, usually layout widths on the design do not meet the "system" (media query) breakpoints. For example, you can get a PSD design for mobile at 600px width (rather than 767px), and would like to calculate units according to this size. To deal with it, add a design breakpoint:
In this case, all units for mobile
, including font-vw, will be calculated according to this size. If you don't set a particular design breakpoint (e.g desktop
), the mixins fallback to the default breakpoints.
Grids
Quickly create a grid with the following mixins:
} } } } } }}
This creates a 2-col grid for tablet and 4-col grid for desktop with a 20px gutter. Remember, that if you nest the grids, specify the gutter also for grid-row
and grid-col
, because these mixins take the last used width from a global variable set in grid-cont
.
You can define custom grid classes at the top-level, to make them reusable.
This allows you to create fully customized column sizes (non-Bootsrap 12 cols scheme, rather like 13%/47%/40%) and gutters.
Sprites
Generate sprites using spritesmith and import the stylesheet(s) (see the commented out line in style.scss
). To use a sprite, simply use the mixin:
//e.g. sprite of my-image.png (no prefix)}
To create a responsive sprite icon you can wrap it in sprite-wrap-rwd
mixin, so the max-width
property will be set to the actual sprite dimensions:
}}
Sprite position and dimensions will adapt to the .sprite-wrap
container width. You should set the spritesmith algorithm
option to diagonal
. Be aware, that using this method (the mixin calculates background position and size in percentages) for large images will impact the performance in Chrome browser.
Utilities
As for now, the framework comes with 2 helper mixins: clearfix
and input-placeholder
(for placeholder styling).
}
Helper variables
As for now there are only font-weight helpers. Use the following variables instead of literals like 300
, 800
: