Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

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

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;