Penguin

Utils

Penguin has defined default classes to help you in common cases

##floating content

Center block
Pull right
Pull left
Pull left
Pull left
<div class="clearfix">
    <div class="box center-block">Center block</div>
</div>
<div class="clearfix">
    <div class="box pull-right">Pull right</div>
    <div class="box pull-left">Pull left</div>
    <div class="box pull-left">Pull left</div>
</div>
<div class="clearfix">
    <div class="box pull-left">Pull left</div>
</div>
Class name Property
.clearfix Apply clearfix hack
.center-block Center-align a block level element
.pull-right Add float right
.pull-left Add float left

##visibility

Box
    <div class="box show">Box</div>
    
Class name Property
.hide Hide element for screenreaders and browsers (display: none)
.show Show element, (display: block)
.invisible Hide for browser while still making it readable by screen readers

###responsive visibility

We can define a list of classes to show or hide content depending the resolution, breakpoint-names are defined in /base/_variables.scss, more info in grid component page

.visible-[breakpoint-name]
.hidden-[breakpoint-name]
Box hidden at 'a' breakpoint
Box visible at 'a' breakpoint
Box hidden at 'b' breakpoint
Box visible at 'b' breakpoint
Box hidden at 'c' breakpoint
Box visible at 'c' breakpoint
Box hidden at 'd' breakpoint
Box visible at 'd' breakpoint
Box hidden at 'e' breakpoint
Box visible at 'e' breakpoint
<div class="row">
    <div class="col-a-12 col-b-6">
        <div class="box hidden-a">Box hidden at 'a' breakpoint</div>
    </div>
    <div class="col-a-12 col-b-6">
        <div class="box visible-a">Box visible at 'a' breakpoint</div>
    </div>
</div>
<div class="row">
    <div class="col-a-12 col-b-6">
        <div class="box hidden-b">Box hidden at 'b' breakpoint</div>
    </div>
    <div class="col-a-12 col-b-6">
        <div class="box visible-b">Box visible at 'b' breakpoint</div>
    </div>
</div>
<div class="row">
    <div class="col-a-12 col-b-6">
        <div class="box hidden-c">Box hidden at 'c' breakpoint</div>
    </div>
    <div class="col-a-12 col-b-6">
        <div class="box visible-c">Box visible at 'c' breakpoint</div>
    </div>
</div>
<div class="row">
    <div class="col-a-12 col-b-6">
        <div class="box hidden-d">Box hidden at 'd' breakpoint</div>
    </div>
    <div class="col-a-12 col-b-6">
        <div class="box visible-d">Box visible at 'd' breakpoint</div>
    </div>
</div>
<div class="row">
    <div class="col-a-12 col-b-6">
        <div class="box hidden-e">Box hidden at 'e' breakpoint</div>
    </div>
    <div class="col-a-12 col-b-6">
        <div class="box visible-e">Box visible at 'e' breakpoint</div>
    </div>
</div>

##text

Align left
Align right
Align center

This fake text is justified this fake text is justified this fake text is justified this fake text is justified this fake text is justified this fake text is justified this fake text is justified this fake text is justified this fake text is justified this fake text is justified this fake text is justified this fake text is justified this fake text is justified this fake text is justified this fake text is justified and I can change font size.

<div class="clearfix">
    <div class="box pull-left align-left">Align left</div>
    <div class="box pull-right align-right">Align right</div>
    <div class="box center-block align-center">Align center</div>
</div>
<p class="align-justify">This fake text is justified this fake text is justified this fake text is justified this fake text is justified this fake text is justified this fake text is justified this fake text is justified this fake text is justified this fake text is justified this fake text is justified this fake text is justified this fake text is justified this fake text is justified this fake text is justified this fake text is justified and <span class="text-small">I can</span> <span class="text-medium">change</span> <span class="text-large">font size</span>. </p>
Class name Property
.align-left Align element to left
.align-right Align element to right
.align-center Align element to center
.align-justify Justify element

##format

You can modify text format easily
<p>You can modify <span class="underline">text</span> <strong class="bold">format</strong> <em class="cursive">easily</em></p>
Class name Property
.bold Set font weight to bold
.normal Set font weight to normal
.cursive Set font style to italic
.underline Set text decoration to underline

color variables

Instead of declaring separate variables per colour, in your project’s _variables.scss you can declare a single global variable, $palettes which is a nested map of named colour palettes.

// Colors palette
$blue-base: rgb(91, 193, 214);
$gray-base: rgb(76, 76, 76);

$palettes: (
    blue: (
        base : $blue-base,
        light: lighten($blue-base, 10%),
        dark : darken($blue-base, 10%)
    ),
    gray: (
        base : $gray-base,
        light: lighten($gray-base, 10%),
        dark : darken($gray-base, 10%)
    )
);

Sass function.

@function palette($palette, $tone: 'base') {
    @return map-get(map-get($palettes, $palette), $tone);
}
.color-example {
    background-color: palette(blue);
    border-color: palette(gray);
    color: white;

    &:hover {
        background-color: palette(blue, dark);
        border-color:  palette(gray, light);
    }

}