Skip to content

bastengao/util.css

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

54 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

util.css

常用样式合集, common style collection.

Install

bower

bower install util.css

rails-assets

source 'https://rails-assets.org' do
  gem 'rails-assets-util.css'
end

Import util.css in application.scss

@import 'util.css/util';

Example

Using util.css instead of inline styles.

<div class="f-l">
  <div class="m-h-10">
    <a class="red f-b">link</a>
  </div>
</div>
<div style="float: left;">
  <div style="margin-left: 10px; margin-right: 10px;">
    <a style="color: red; font-weight: bold;">link</a>
  </div>
</div>

Usage

float

  • f-l

    float: left;

  • f-r

    float: right;

text align

  • t-a-l

    text-align: left;

  • t-a-r

    text-align: right;

  • t-a-c

    text-align: center;

margin & padding

Size could be 0, 5, 10, 15, 20, 30, 40, 50, 100, 150, 200, 250, 300.

  • m-{n}

    m-{n} => margin: {n}px;

  • m-h-auto

    margin-left: auto; margin-right: auto;

  • m-h-*

    margin-left: *px; margin-rigth: *px;

  • m-v-*

    margin-top: *px; margin-bottom: *px;

  • m-t-*

    margin-top: *px;

  • m-b-*

    margin-bottom: *px;

  • m-l-*

    margin-left: *px;

  • m-r-*

    margin-right: *px;

Except m-h-auto, padding usage is same with margin, such as p-10 or p-b-20.

color & background color

Color could be red, green, blue, white, black and gray.

.{color} will be color: {color};

Example

  • red

    color: red;

  • bg-green

    background-color: green;

fonts

  • bold/f-b

    font-weight: bold;

  • f-n

    font-weight: normal;

positions

  • p-f

    position: fixed;

  • p-a

    position: absolute;

  • p-s

    position: static;