Pto.css
Bootstrap and friends helps our front end coding, but sometimes we dont really needs all features neither a default theme, most important often our job needs inexistent basic tools.
Pto.css is a small css package. It contains a bunch of classes to help coding custom pages.
We dont have themes. Neither pre-built components... yet.
But works!
Grid
This works with a 10 parts default grid system, and an alternative relative grid, at 3 size screens. Defaults margin and padding classes uses 14px multiples.
This example below defines a 30% width <div> block with 1em margin and 1em padding. Internal content centered aligned.
<div class="padding margin col-3 text-center"><p class="text-bold border-bottom">content</p></div>
There's an alternative grid system too for a div with 33% width:
<div class="padding margin col-1of3 text-center"><p class="text-bold border-bottom">content</p></div>
Breakpoints
As defined there are four breakpoints for screen sizes : 768px for tablets ; 992px for common pcs; 1200 hd monitors. Because, just fits better for bootstrap compatibility.
How use ?
Just include the import link at your <head> tag.
<link rel="stylesheet" type="text/css" href="css/pto.css" media="screen"/>
Soon, Im gonna finish a new extension bringing few utils, but gonna works like a complementar thing.
Really hope you enjoy my little work.
Cya
[F.in]
