Shulou(Shulou.com)06/01 Report--

"PrimusUI" is a simple code collection that draws lessons from many open source UI libraries on the Internet, and then collates and processes itself.

Each functional block has very little CSS code, which is easy to understand and has a low threshold. The code can be easily modified according to its own actual situation and changed to meet its own scene.

First, the reasons for production

There are several reasons why wheels are built repeatedly:

1) Today's development often pays attention to efficiency, giving you a very short time to complete a lot of content.

If you don't have some inventory, you can only work overtime to catch up.

2) because it is a project that works overtime, there will be all kinds of problems, such as compatibility, functionality and deviation from the design drawings.

If you come across a test or leader who picks out the details, you may have to adjust the interface with 1 pixel.

3) if you have a set of UI libraries that have experienced precipitation, you can quickly build pages through style components, and compatibility and other aspects are guaranteed.

When developing, you just need to pay attention to the details of each page and write the code calmly.

4) many open source libraries on the Internet are relatively large, and when you need to use them in actual projects, you may need to modify some of the code.

It is precisely because it is relatively large that it is more difficult to change.

5) many open source libraries do some fine craftsmanship, but their own company's UI design may not like this style.

In this way, the pages they design will be inconsistent with those libraries, and there will be a fourth situation.

6) write your own UI library, which can improve your imagination and stimulate creativity.

CSS3 provides a lot of new features, but it may not be used usually, not because you don't want to use it, but because you can't figure out how to use it, such as pseudo elements, flexible layout, etc.

7) the process of development is also a process of learning and practice, combining what you see and use in peacetime, and only after doing it will you see the problems and then solve the actual problems.

It makes a lot of sense for the ancients to say that they must put it into practice.

8) the whole UI library, in fact, can be regarded as a set of skeletons, a set of skeletons that you can modify at will, and you can do it yourself if you want to be full of flesh and blood, so you have a more sense of achievement.

Here is just to share ideas, throwing drills to attract jade.

II. Development environment

Now the front-end development is different from what it used to be, just a colored text editor and a browser.

Now the front-end project is also getting bigger and bigger, and it also needs to be managed and configured.

1) Engineering construction

This development uses the build tool "Gulp", a flow-based build tool. With the rich package management of "Node.js", various plug-ins can be included in the bag.

If you are not familiar with this thing, you can refer to my previous tutorial, "gulp Records, the Front-end Automation build tool."

You can also refer to "installation" and "plug-ins" in the documentation of the PrimusUI library.

2) CSS development

CSS can now be precompiled, SASS is one, with precompilation, writing CSS can also be modular development, and can be automatically packaged.

Precompilation can use the plug-in "gulp-sass" in Gulp, which was mentioned in those two tutorials.

Also installed the browser attribute compatibility plug-in, rem automatic calculation plug-in and so on.

3) Page adaptation

With the help of flexible.js, mobile adaptation is realized by calculating the font-size in html (which is used to calculate rem) and setting the magnification of viewport.

4) document library editing

The description of the document library is necessary to make people have a more perceptual understanding.

The document library is written in jekyll, which is a static website generator. Some time ago, I also organized two small tutorials, "installation and configuration" and "practical Application"

Third, application skills

All the files are shown in the picture above. The following is about the development process of CSS. The new waterway TOEFL demo display page and document editing are skipped directly.

1) rem

Rem (font size of the root element) is the unit of font size relative to the root element.

This unit is used for most of the library so that it can be adapted better. However, fonts, borders, and so on use px units.

Because you have to calculate, if you do it manually, you will be as tired as a dog, so you can use the plug-in "postcss-px2rem" in "Gulp" to calculate automatically.

2) Grid (grid.scss)

Before making the grid, I have seen the grid code in Bootstrap, which is realized with float plus percentage width, or px fixed width.

But for mobile, this is not enough. Mobile browsers are more advanced than PC browsers, so they can be implemented with newer CSS3 attributes.

CSS3 has a flexible layout (Flexible), which is a good thing, can automatically calculate the width, very suitable for mobile phone screen.

Due to the large size of the mobile phone screen, in many cases, it can not be written dead, even with the percentage, from a certain point of view, it is still dead.

Another advantage of flexible layout is alignment. I've come across two different font sizes before, but it was hard to align at the bottom of the same line.

Using a flexible layout requires only one attribute, and I encapsulate a variety of alignment styles in this CSS module.

If you are still new to this, you can refer to a small tutorial written earlier, "CSS3 expansion Box Flexible Box".

The placement of elements can be easily realized with grid, instead of using float and position to do layout, the implementation of list, layout and form needs to cooperate with grid.

3) pre-compilation

The CSS code is precompiled, which is almost the same as the development server code. The following files contain mixin, variables or functions that will be used globally.

Precompilation has many advantages:

1. Reduce the code, there are conditional judgments and loops in precompilation, so that more logic can be organized and reused.

@ for $col from 1 through 12 {.UI-col-# {$col} {@ include flex ($col);}}

two。 The definition of variables can make the value more semantic.

3. Nested syntax can make CSS more hierarchical, and you can see who the parent is at a glance, unlike before having to write a long list.

.ui-flex {display: flex; width: 100%; box-sizing: border-box; & > [class^ = "ui-width-"], & > [class^ = "ui-rem-"] {flex-basis: auto;}}

4. Mixing (mixin) and function (function) can extract general logic or code for better reuse.

5. CSS can also be modular, referencing different functional blocks through "@ import" to adapt to different scenarios.

"PrimusUI" although the amount of code is not much, but the production process is quite interesting, although there is some learning cost when using SASS, Jekyll and Gulp, but they are all very lightweight.

After using it, you can do a lot of things to facilitate development and improve efficiency. I hope this library will be helpful to everyone's usual development.

The project page of GitHub has written some introductions in English, which is more grounded.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.