常用样式合集, common style collection
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
.gitignore
LICENCES
README.md
bower.json
gulpfile.js
package.json
util.scss

README.md

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;