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

php中文网
发布: 2016-06-21 08:57:26
原创
1326人浏览过

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

Reindeer.css

MagicStudio
MagicStudio

图片处理必备效率神器!为你的图片提供神奇魔法

MagicStudio 102
查看详情 MagicStudio

前端开发人员的轻量级可定制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

    HTML速学教程(入门课程)
    HTML速学教程(入门课程)

    HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

    下载
    来源:php中文网
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    最新问题
    开源免费商场系统广告
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送
    PHP中文网APP
    随时随地碎片化学习

    Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号