Skip to content

fiorin/ptocss

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
css
 
 
 
 
 
 

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

About

Css classes package - Lightweight alternative to bootstrap

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages