Utilities

CSSkel provides a set of utility classes for common styling needs, such as padding, width, float, alignment, and visibility.

No Padding

Use .nopadding to remove horizontal padding from grid container children.

<div class="grid-container">
    <div class="nopadding">No padding here</div>
    <div>With padding</div>
</div>

Width

Use .full-width to set an element's width to 100%, and .max-full-width to set the maximum width to 100%.

<div class="full-width">Full width</div>
<div class="max-full-width" style="width: 200px">Max full width</div>

Float

Use .pull-left and .pull-right to float elements left or right.

<div class="pull-left">Floated left</div>
<div class="pull-right">Floated right</div>

Alignment

Use .align-left, .align-right, .align-center, and .align-justify to set text alignment.

<div class="align-left">Left aligned</div>
<div class="align-right">Right aligned</div>
<div class="align-center">Center aligned</div>
<div class="align-justify">Justified text: Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

Vertical Centering

Use .vertical-centered to vertically center content within an element or grid container children.

<div class="vertical-centered" style="height: 100px">Vertically centered</div>
<div class="grid-container cols:3 vertical-centered" style="height: 100px">
    <div>Column 1</div>
    <div>Column 2</div>
    <div>Column 3</div>
</div>

Visibility

Use .only-on-desktop, .hide-on-mobile, .only-on-mobile, and .hide-on-desktop to control element visibility based on screen size (breakpoint at 768px).

<div class="only-on-desktop">Visible only on desktop</div>
<div class="only-on-mobile">Visible only on mobile</div>