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.
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
.
These pre-designed special CSS classes can be added to nearly any element to help aid in customizing.
Adding this unique class zb
to your element will specify a zero border, zb
is an acronym of zero border.
.zb |
Specifies zero border on any element |
<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>
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.
.zmt |
Specifies zero margin on top of any element |
.zmb |
Specifies zero margin on bottom of any element |
<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
.
Adding these unique classes .center
and .tac
to your elements will align to the center.
.center |
Aligns elements to center |
.tac |
Aligns elements to center and uses !important declaration |
<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.
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.
.pl-imageframe |
Add to img element, produces pretty frame |
.img-rounded |
Add to img element, produces curved corners |
.img-circle |
Add to img element, produces circle image |
.img-polaroid |
Add to img element, produces framed image |
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>
Using our integration of Bootstrap, you can use these visibility classes to show/hide elemtents of your site for specific devices.
Class | Phones 767px and below | Tablets 979px to 768px | Desktops Default |
---|---|---|---|
.visible-phone |
Visible | Hidden | Hidden |
.visible-tablet |
Hidden | Visible | Hidden |
.visible-desktop |
Hidden | Hidden | Visible |
.hidden-phone |
Hidden | Visible | Visible |
.hidden-tablet |
Visible | Hidden | Visible |
.hidden-desktop |
Visible | Visible | Hidden |
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.
Resize your browser or load on different devices to test these classes.