Huesos
Style
Guide

Repositoire

GitHub

Preview

Huesitos

Huesitos is a set of utility classes for borders. backgropunds, paddings, etc.

$gutter is always applied as margin, unless a gutter modifier class is present.

Gutter modifiers

Adding a $half-gutter or $quarter-gutter modifier class will set all paddings to the desired ratio.

Margin

  • .m - Applies all margins
  • .mt - Applies a margin-top
  • .mr - Applies a margin-right
  • .mb - Applies a margin-bottom
  • .ml - Applies a margin-left
  • .m0 - Deletes all margins

Padding

  • .p - Applies all paddings
  • .pt - Applies a padding-top
  • .pr - Applies a padding-right
  • .pb - Applies a padding-bottom
  • .pl - Applies a padding-left
  • .p0 - Deletes all paddings

Borders

  • .b - Applies all borders
  • .bt - Applies a border-top
  • .br - Applies a border-right
  • .bb - Applies a border-bottom
  • .bl - Applies a border-left
  • .b0 - Deletes all borders

Text align

  • .tl - Aligns text to left
  • .tc - Aligns text to center
  • .tr - Aligns text to right

Typography and helpers

  • .up - Sets uppercase
  • .st - Sets font-weight to bold
  • .em - Sets font-style to italic
  • .ls - Sets letter spacing as $letter-spacing
  • .sh - Applies $box-shadow

Inversion

  • .invert - Inverts colors.

Background Color

A set of helper classes that map to common colors from the palette. The text color is contrasted.

Classes are auto-generated based on the sass $colors map and follow the schema $bg-$palette-$name.

We showcase some examples here, but the list of classes could be much bigger or smaller, depending on your color palette.

You can avoid bloating your css with these helper classes by setting $generate-color-classes: false.

Example

<h3>TYpography and helpers</h3>
<section>
    <p>
        <span class="st">Bold text, </span><br>
        <span class="up">uppercase applied</span><br>
        <span class="em">italic as font-style</span><br>
        <span class="ls">letter-spacing as defined on config...</span><br>
        <span class="sh">...and box-shadow as well.</span><br>
    </p>
</section>

<h3>Color Classes</h3>
<p class="minititle">Base</p>
<section class="grid grid--5col">
    <div class="grid-item bg-base-primary p strong half-gutter" style="height:90px">Primary + <a href="#">link</a></div>
    <div class="grid-item bg-base-secondary p strong half-gutter" style="height:90px">Secondary</div>
</section>
<p class="minititle">State</p>
<section class="grid grid--5col">
    <div class="grid-item bg-state-success p strong half-gutter" style="height:90px">Success</div>
    <div class="grid-item bg-state-warning p strong half-gutter" style="height:90px">Warning</div>
    <div class="grid-item bg-state-error p strong half-gutter" style="height:90px">Error</div>
    <div class="grid-item bg-state-muted p strong half-gutter" style="height:90px">Muted</div>
</section>

<h3>Color inversion</h3>
<section style="background-color:#000" class="p invert">
    <h4>Title</h4>
    <p class="m0">Lorem ipsum dolor sit amet consectetur, <a href="#">adipisicing elit.</a> Autem aperiam laborum atque harum vel ex iusto illum laboriosam minima! Mollitia debitis quae fugiat necessitatibus quam ex tempora ullam eum expedita.</p>
</section>

Assets

  • Filesystem Path: src/components/huesitos/_huesitos.scss
  • Size: 3.2 KB 
  • @if $huesitos {

    .m {
        margin: $gutter;
    }

    .mt {
        margin-top: $gutter;
    }

    .mr {
        margin-right: $gutter;
    }

    .mb {
        margin-bottom: $gutter;
    }

    .ml {
        margin-left: $gutter;
    }

    .m0 {
        margin:0;
    }

    .p {
        padding: $gutter;
    }

    .pt {
        padding-top: $gutter;
    }

    .pr {
        padding-right: $gutter;
    }

    .pb {
        padding-bottom: $gutter;
    }

    .pl {
        padding-left: $gutter;
    }

    .p0 {
        padding:0;
    }

    .b {
        border: $separator-width solid $separator-color;
    }

    .bt {
        border-top: $separator-width solid $separator-color;
    }

    .br {
        border-right: $separator-width solid $separator-color;
    }

    .bb {
        border-bottom: $separator-width solid $separator-color;
    }

    .bl {
        border-left: $separator-width solid $separator-color;
    }

    .b0 {
        border:none;
    }


    @if $generate-color-classes {
        @each $palette, $value in $colors {
            @each $name, $hex in $value {
                .bg-#{$palette}-#{$name} {
                    @include background-contrast($hex, true);
                }
            }
        }
    }

    .half-gutter {
        &.m {
            margin: $gutter / 2;
        }
        &.mt {
            margin-top: $gutter / 2;
        }
        &.mr {
            margin-right: $gutter / 2;
        }
        &.mb {
            margin-bottom: $gutter / 2;
        }
        &.ml {
            margin-left: $gutter / 2;
        } 
        &.p {
            padding: $gutter / 2;
        }
        &.pt {
            padding-top: $gutter / 2;
        }
        &.pr {
            padding-right: $gutter / 2;
        }
        &.pb {
            padding-bottom: $gutter / 2;
        }
        &.pl {
            padding-left: $gutter / 2;
        }
    }

    .quarter-gutter {
        &.m {
            margin: $gutter / 4;
        }
        &.mt {
            margin-top: $gutter / 4;
        }
        &.mr {
            margin-right: $gutter / 4;
        }
        &.mb {
            margin-bottom: $gutter / 4;
        }
        &.ml {
            margin-left: $gutter / 4;
        } 
        &.p {
            padding: $gutter / 4;
        }
        &.pt {
            padding-top: $gutter / 4;
        }
        &.pr {
            padding-right: $gutter / 4;
        }
        &.pb {
            padding-bottom: $gutter / 4;
        }
        &.pl {
            padding-left: $gutter / 4;
        }
    }

    .tl {
        text-align:left;
    }

    .tc {
        text-align:center;
    }

    .tr {
        text-align:right;
    }

    .up {
        text-transform:uppercase;
    }

    .st {
        font-weight:bold;
    }

    .em {
        font-style: italic;
    }

    .ls {
        letter-spacing: $letter-spacing;
    }

    .sh {
        box-shadow: $box-shadow;
    }

    .invert {
        color: $contrast-light;
        h1, .h1,
        h2, .h2,
        h3, .h3,
        h4, .h4,
        h5, .h5,
        h6, .h6 {
            color: inherit;
        }
        @include invert-links();
    }
}