Great use of small stature, responsive page, focused on the mobile side, easy to manage, work for you to customize your own UI library.
Primus name from "Transformers".
Now many online open source UI library, coverage is very wide, can meet a lot of scenes.
Because large and some small places may sometimes modify will be more strenuous.
If the actual development may have its own control UI library will save a lot of development time,and can freely modify a different code depending on the scene.
To this end, I draw a lot of online open source library, organize modify this simple set of code, we hope to develop will help.
This simple UI library, each CSS least a few dozen lines, as many as there is more than one hundred lines.
中文主页:点击查看
Online documentation(在线文档):Click to view
1、CSS developed using now fashionable SASS, CSS preprocessor.
2、Code Morphing tool uses Gulp, enhanced workflow. First install NodeJS, Package.json have a file in the project, which records the dependencies, enter "npm install" package can be installed in the current directory.
3、Is compiled from documents by the Jekyll, Jekyll is a static site generator.
4、With flexible.js by calculating the html font-size (for calculating rem), set the magnification of the viewport to mobile adaptation. UI library, in addition to fonts, border width, etc., most of which are using rem as a unit, can be introduced (PostCSS) plug-in "postcss-px2rem", calculated automatically.
5、Browser is compatible attributes annoying thing by introducing plug PostCSS within "autoprefixer", automatically matching prefix. Front and Article 5 paragraph 4 of the configuration write gulpfile.js.
PrimusUI
└─ ─ ─ ─ assets UI library used to display page images, etc.
└─ ─ ─ ─ css SASS compiled CSS code
└─ ─ ─ ─ docs UI library documentation, compiled by the tool Jekyll
└─ ─ ─ ─ font Custom Fonts
└─ ─ ─ ─ js JavaScript files
└─ ─ ─ ─ sass CSS preprocessed file
└─ ─ ─ ─ site Jekyll source file
└─ ─ gulpfile.js Gulp profile
└─ ─ package.json Gulp required dependencies
└─ ─ open.bat windows batch dos window to open in the current directory
└─ ─ *.html UI library modules display page
1、Responsive layout, extensive use rem, elastic properties, the percentage of properties that can be adapted to a variety of mobile terminal screen.
2、normalize.scss:Reset in the popular style "normalize.css" based on the style to make adjustments more suitable mobile terminal.
3、typeface.scss:He cited a variety of scenarios font color and size, character truncation, conventional mobile terminal arrow mark.
4、icon.scss:Iconfont in third-party libraries, on-demand download existing icons can also upload svg files on this site, automatically made specific icon.
5、grid.scss:Grid achieve diversification, Including advanced grid resilient settings (12 preset widths), set as a percentage (24 kinds of preset width), the left shift, move left, right movement (also 24 kinds). End PC with a fixed width of different, different mobile end screen, so you can not set the width of each element will die. Elastic width or percentage after setting automatically calculated values. Compared to traditional float layout, flexible layout easier to control, especially in alignment of the setting.
6、border.scss:Effective solution 1px border, in a variety of mobile terminal screen display problems.
7、layout.scss:Layout styles preset six kinds of blank size, easy line, multi-line, on both sides of the elastic layout alignment.
8、list.scss:Combined grid, layout style, you can achieve a variety of different scenes list shows, Loading effect can be customized.
9、table.scss:The abstract form, the border, a list of color and other independent style, used in conjunction with the base class style.
10、Label (label.scss), micro-scale (badge.scss), Button (button.scss) each precompiled document provides private method can be extended according to the actual scenes.
11、form.scss:CSS3 pseudo-element by re-landscaping the single box (radio.scss), checkbox (checkbox.scss), switch item (switch.scss). Combined with the grid, buttons and other styles can be arranged in a variety of form items.
12、Setting global mixin in mixin.scss, when variable.scss configured global variables, high availability.
Android 2.3+
IOS 4.0+
QQ群:485809424
The use of PrimusUI have any questions, or find bug, please leave me feedback : Submit feedback