sassime

Small SCSS Framework

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
sassime
1.2.02 months ago5 years agoMinified + gzip package size for sassime in KB

Readme

SASSime
Tiny Sass Framework

Texts

text-align ``%txt-$var`` in $text

@extend %txt-left;
//text-align: left;
@extend %txt-right;
//text-align: right;
@extend %txt-center_tablet;
//@media screen and (min-width: 768px) { text-align: center; }

text-decoration ``%decor-$var`` in $text-decor

@extend %decor-none;
//text-decoration: none;
@extend %decor-underline;
//text-decoration: underline;
@extend %txt-line-through_tablet;
//@media screen and (min-width: 768px) { text-decoration: line-through; }

text-transform ``$var`` in $text-transform

@extend %capital;
//text-transform: capitalize;
@extend %upper;
//text-transform: uppercase;
@extend %lower_tablet;
//@media screen and (min-width: 768px) { text-transform: lowercase; }

font-family ``%ff-$var`` in $fonts

@extend %ff-main;
//font-family: 'Arial';

@extend %ff-header_tablet;
//@media screen and (min-width: 768px) { font-family: 'Georgia'; }

font-size ``%fs-$var`` in $fontsize

@extend %fs-12;
//font-size: 0.75rem;

@extend %fs-16_tablet;
//@media screen and (min-width: 768px) { font-size: 1rem; }

line-height ``%lh-$var`` in $fontsize

@extend %lh-12;
//line-height: 0.75rem;

@extend %lh-16_tablet;
//@media screen and (min-width: 768px) { line-height: 1rem; }

Visuals

display ``$var`` in $display

@extend %hide;
//display: none;
@extend %flex;
//display: flex;
@extend %block_tablet;
//@media screen and (min-width: 768px) { display: block; }

position ``$var`` in $position

@extend %absolute;
//position: absolute;
@extend %static;
//position: static;
@extend %relative_tablet;
//@media screen and (min-width: 768px) { position: relative; }

float ``fl-$var`` in $float

@extend %fl-left;
//float: left;
@extend %fl-right;
//float: right;
@extend %fl-left_tablet;
//@media screen and (min-width: 768px) { float: left; }

visibility ``vs-$var`` in $visibility

@extend %vs-hidden;
//visibility: hidden;
@extend %vs-visible;
//visibility: visible;
@extend %vs-collapse_tablet;
//@media screen and (min-width: 768px) { visibility: collapse; }

Colours

color ``%color-$var`` in $colors

@extend %color-white;
//color: #fff;
@extend %color-grey7;
//color: #777;
@extend %color-black_tablet;
//@media screen and (min-width: 768px) { color: #000; }

background-color ``%bg-$var`` in $colors

@extend %bg-white;
//background-color: #fff;
@extend %bg-grey7;
//background-color: #777;
@extend %bg-black_tablet;
//@media screen and (min-width: 768px) { background-color: #000; }

border ``%border-$var`` in $colors

@extend %border-white;
//border: 1px solid #fff;
@extend %border-grey7;
//border: 1px solid #777;
@extend %border-black_tablet;
//@media screen and (min-width: 768px) { border: 1px solid #000; }

border top, left, right, bottom ``%border-%pos-$var`` in $colors

@extend %border-t-white;
//border-top: 1px solid #fff;
@extend %border-r-grey7;
//border-right: 1px solid #777;
@extend %border-b-black_tablet;
//@media screen and (min-width: 768px) { border-bottom: 1px solid #000; }