Reindeer.css – 前端開發人員的輕量級可定制CSS框架

luccky2009 8年前發布 | 8K 次閱讀 CSS框架 CSS 前端技術

來自： 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 <head> tag:
<link rel="stylesheet" href="path-to-reindeer/reindeer.min.css">

# 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 <a> 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:
    <button class="btn btn-red">Red button!</button>
    <button class="btn btn-green">Green button!</button>
    <button class="btn btn-orange">Orange button!</button>
    <button class="btn btn-violet">Violet button!</button>
    <button class="btn">Gray button!</button>
    <button class="btn btn-asphalt">Asphalt button!</button>

    # 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:
    <div class="box box-red">Red box!</div>
    <div class="box box-green">Green box!</div>
    <div class="box box-orange">Orange box!</div>
    <div class="box box-violet">Violet box!</div>
    <div class="box">Gray box!</div>
    <div class="box box-asphalt">Asphalt box!</div>

    # 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:
    <div class="row">
      <div class="row-item--2">Item 2</div>
      <div class="row-item--10">Item 10</div>
      <div class="row-item--2">Item 2</div>
    </div>
     本文由用戶 luccky2009 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
     轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
     本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！