quickly-css v1.0.0

Quickly-css

Introduce

A quick CSS library for writing styles

Install

npm install quickly-css --save

##Quick Start

import Vue from 'vue'

//sass
import 'quickly-css/lib/index.scss'

// or
import 'quickly-css/dist/quickly-css.min.css' //42kb

Example

Its convenience can be realized through the three-column layout

<!-- before -->
<!-- tips: your css can be written in css file or use style tag in html file -->
<style>
  .wrapper {
    display: flex;
  }
  .left, .right {
    width: 200px;
    background: #f2f2f2
  }
  .center {
    flex: 1;
    background: #188eee
  }
</style>
<section class="wrapper">
  <div class="left">1</div>
  <div class="center">1</div>
  <div class="right">1</div>
</section>

<!-- use quickly-css -->
<style src="quickly-css/dist/quickly-css.css"></style>

<section class="flex j-between">
  <div class="w-200"></div>
  <div class="flex-1"></div>
  <div class="w-200"></div>
</section>

<div class="w-full text-red">test</div>

is equivalent to:

<div class="test">test</div>
<style>
.test {
  width: 100%;
  color: #f35958;
}
</style>

• Easy to maintain
• Easy to write CSS styles
• Small volume: dev 59kb production 42kb

Document

• document
• scss config

How to build

git clone

git clone https://gitee.com/zj1024/quickly-css.git

npm install

npm install

npm run build

npm run build

Project directory

-quick-css  /* root dir */
--dist  /* quickly-css file */
----quickly-css.css /* dev */
----quickly-css.min.css /* production */
--lib /* core code */
----...scss /* scss file */
--.gitignore
--.gulpfile.js
--package.json
--README.md