Navel Pondering Mantra

    sassime

    1.2.0 • Public • Published

    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; }

    Keywords

    Install

    npm i sassime

    DownloadsWeekly Downloads

    77

    Version

    1.2.0

    License

    ISC

    Unpacked Size

    14 kB

    Total Files

    14

    Last publish

    Collaborators

    • luckyraul