Css classes package - Lightweight alternative to bootstrap
CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
LICENSE
README.md

README.md

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]

https://github.com/fiorin/ptocss