HTML/CSS Utilities

The purpose of this tutorial is to show you cool HTML and CSS snippets built into PageLines DMS, which will enhance and extend your creations.

HTML

With minimal markup you can instantly have a styled page heading you’ll be so proud of, you just might invite her to meet your parents.

<div class="page-header">
      <h1>Utilities <small>CSS classes and HTML snips to enhance and extend your creations</small></h1>
</div>

You can also specify a class of .page-header-minor, which will return a page heading with a reduced margin-top.

CSS

These pre-designed special CSS classes can be added to nearly any element to help aid in customizing.

Remove border

Adding this unique class zb to your element will specify a zero border, zb is an acronym of zero border.

<h1 class="zb">This is a h1 Header, without a border, if it had one!</h1>
<h2 class="zb">This is a h2 Header, without a border, if it had one!</h1>

Removing top and bottom margins

Adding these unique classes .zmt and .zmb to your elements will specify a zero margin, .zmt and zmb are acronyms of zero margin top and zero margin bottom.

<h1 class="zmt zmb">This is a h1 Header, without top & bottom margin!</h1>
<h2 class="zmt zmb">This is a h2 Header, without top & bottom margin!</h1>

As you can see in the example above, applying the zmt & zmb to both headers, has resulted with them both having zero applied to margin-top and margin-bottom.

Centering Elements

Adding these unique classes .center and .tac to your elements will align to the center.

<h1 class="center zmt zmb">This h1, is is aligned to the center</h1>
<h2 class="tac zmt zmb">This h2, is is aligned to the center</h1>

As you can see in the example above, applying the .center and .tac to the headers, aligns them centrally. The headers are also using the zmt & zmb to demonstrate that you can mix and match the CSS utilities in your code.

Cool Image classes

Adding these unique classes .pl-imageframe, .img-rounded, .img-circle and .img-polaroid to your image(s) will produce some cool effects.

<img class="pl-imageframe" src="">

The example code above, is using the .pl-imageframe class, simply replace class="pl-imageframe" with any of the classes to get your desired effect.

Floats

Adding these unique classes .pull-left and .pull-right to your elements will allow you to float your element to the left or right hand side of your container.

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

Visibility

Using our integration of Bootstrap, you can use these visibility classes to show/hide elemtents of your site for specific devices.

We recommend using these on a limited basis to avoide creating entirely different versions of the same website. Instead, use them to complement each device. The visibility classes are not compatible with tables.

Testing

Resize your browser or load on different devices to test these classes.