CSS TimeSaver

simple web design time saver for your projects

just another project made with

Changelog:

1.1.0

- new: position ( pos-(re=relative, ab=absolute, fi=fixed, in=inherit, sta=static, sti=sticky) )

- new: opacity ( op-(1-10) +IE fix filter )

- new: float ( flo-(l=left, r=right, no=none) )

1.0.1

- little fixes;

1.0.0

- start;

What is it?

Just one CSS file with some ready to use properties inside:

basic colors     ( white, black, grey-(1-40) )
basic bg colors ( bg-white, bg-black, bg-grey-(1-25) )

position*         ( pos-(re=relative, ab=absolute, fi=fixed, in=inherit, sta=static, sti=sticky) )
opacity           ( op-(1-10) +IE fix filter )
float              ( flo-(l=left, r=right, no=none) )
   
font-weight     ( fw-(100-900) )
text-align        ( ta-(c=center, l=left, r=right)
font-size         ( fs-(1-100) )
line-height      ( lh-(0-100) )
   
margin = 0     ( m-0 )

margin-top      ( mt-(0-200, 205-400) )
margin-bottom ( mb-(0-200, 205-400) )
margin-left      ( ml-(0-200, 205-400) )
margin-right    ( mr-(0-200, 205-400) )
     
padding = 0    ( p-0 )

padding-top      ( pt-(0-200, 205-400) )
padding-bottom ( pb-(0-200, 205-400) )
padding-left      ( pl-(0-200, 205-400) )
padding-right    ( pr-(0-200, 205-400) )

* Sometimes positioning element through csstimesaver.css just don't work for some tags. In that case you should do it using your main style.css file.

How to use it?

1. Set up a CSS file:

<link rel="stylesheet" type="text/css" href=csstimesaver.css" />

2. Just add special classes and magic will happen ))):

<div class="bg-white grey-25 fw-600 ta-c mt-30 mb-30 pt-30 pb-30">Some Text</div>

You'll get automatically in CSS:

.bg-white {
    background-color: white;
}
.grey-25 {
    color: rgb(130,130,130);
}
.fw-600 {
    font-weight: 600;
}
.ta-c {
    text-align: center;
}
.mt-30 {
    margin-top : 30px;
}
.mb-30 {
    margin-bottom: 30px;
}
.pt-30 {
    padding-top: 30px;
}
.pb-30 {
    padding-bottom: 30px;
}