> 웹 프론트엔드 > HTML 튜토리얼 > Reindeer.css – 前端开发人员的轻量级可定制CSS框架_html/css_WEB-ITnose

Reindeer.css – 前端开发人员的轻量级可定制CSS框架_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-21 08:57:26
원래의
1201명이 탐색했습니다.

来自: https://estkin.github.io/reindeer.css/

Reindeer.css

前端开发人员的轻量级可定制CSS框架。

# Status

At the time we are working on Reindeer as much as possible, some components are missing, but we will add them very soon!

This documentation is updated for Reindeer's version 0.1.3

# Install Reindeer

Recommended installation is with node package manager

Run this command in terminal:
npm install --save reindeer.css

Or just download master branch from github repository (newest versions/releases are there quicker than on npm; but they could be broken or not production ready)

https://github.com/estkin/reindeer.css/archive/master.zip

# Use Reindeer

If you succesfully get Reindeer, you can now link it with your HTML document

This comes into tag:

# How to customize

Customization is pretty easy, you just need those three things:

  • Gulp installed
  • Reindeer's source code
  • Some text editor (even TextEdit on Mac/Notepad on Windows)
  • If you have all these things, open src/base/_var.css , in this file, you can customize everything what is included. More customization coming soon...

    Example:
    $link-color: #333333; change to $link-color: #d2436d;
    for changing color

    After your customizing open terminal in root directory of Reindeer's source code and run command npm run both , this command will produce compiled + minified file with your custom variables

    # Typography

    Nothing special at the moment

    Heading 1

    Heading 2

    Heading 3

    Heading 4

    Heading 5

    Heading 6

    Paragraph

    # Buttons

    Stylized for use with link and button [not input] (You can use it with div, but it has cursor: pointer on it)

    Example:





    # Boxes

    Same as buttons but for blocking use, like layout things, etc. (No cursor: pointer on it)

    Red box!

    Green box!

    Orange box!

    Violet box!

    Gray box!

    Asphalt box!

    Example:
    Red box!

    Green box!

    Orange box!

    Violet box!

    Gray box!

    Asphalt box!

    # Grid

    Reindeer is based on flexbox magic

    We have 2 row types:

  • .row - just normal display: flex row
  • .row-center - display: flex row with centering objects
  • And lot of .row-item-* classes:

  • .row-item
  • .row-item--(from 2 to 12)
  • .row-item--half
  • .row-item--third
  • .row-item--quarter
  • Item 1

    Item 5

    Item 1

    Item 4

    Item 1

    Item 3

    Item 1

    Item 2

    Item 2

    Item 3

    Item half

    Item 1

    Or just do crazy things like this (not really crazy tho, haha)

    Item 1

    Item 1

    Item 1

    Item 2

    Item 2

    Item 10

    Item 2

    Item 2

    Item 2

    Item 4

    Item 10

    Example:

     
    Item 2

     
    Item 10

     
    Item 2

    원천:php.cn
    본 웹사이트의 성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    인기 튜토리얼
    더>
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿