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;