The author | wing tip studio — sand

Today, iceberg Studio will present the upcoming CMUI front-end framework. This article will introduce some parts of the framework (layout, list, dynamic assistance) to let you know the power and convenience of this framework, but this is only the tip of the iceberg of the framework. If you want more detailed information, you can crack the QR code at the bottom of this article and join our group chat to get it.

The origin of

Around 2011, I started to study responsive web design and designed a CSS layout framework based on less language. The initial design consisted of 12 columns, 15 columns and 16 columns. Finally, I determined the structure of 12+15 difference double columns and considered applying for corresponding patents. A few months later twitter released the bootstrap framework, which is known in the front-end world. Later I enter a website company and based on this style framework developed a high-speed feebless website system (a Windows application), in order to prevent future without promotion after there is a new idea to fall behind, to response structure in system after the online application for the corresponding patent protection (click look at), This is the earliest now want to introduce the CMUI, thankfully I’m ready to this article’s manuscript was turned over to nine years ago, when you know CMUI first look at the manuscript again after you will find the shadow of a lot of the residue or some early thoughts, including componentization, asynchronous components, high speed distribution, combination, inheritance, and so on.

In 2014, I packaged a UI system named CMUI based on template engine, and then repackaged it into a component library for our project with VUE. In our actual use, we found that the development efficiency of this structure was very high, and it could accurately match the design draft. Now we decide to repackage and open source it. Hopefully more developers will get involved.

It was written nine years ago

Important note

The real Monkey King

CMUI is short for framework, and CMUI on GitHub is not the framework for this presentation.

Patent protection

CMUI is open source under MIT protocol. You can use it in your project at will, but some of its internal structure (such as layout system and combination style) is still protected by patent. If you need to apply it to your framework and re-publish it, please contact us in advance to avoid legal disputes.

PC or mobile

CMUI is mainly used on the mobile side, but the style part is completely suitable for the PC side.

Why write your own component library?

There are a lot of component libraries out there, and a lot of good ones, but there are some non-technical issues

Bad C-end solutions

Most frameworks you know retain the idea of bootstrap largely, which can be seen from the grid system and the description of buttons and forms. I do not think it is a good scheme to use SUCCESS to represent green and primary to represent the primary color. The advantage of this structure is that it is possible to achieve a high degree of style uniformity and theme change when developing projects without designers (such as mid-platform systems), but it can be awkward if the design is constantly changing for c-side development, especially if your design team is not very strict.

Perfect does not mean applicable

It provides a complete system of components, from a button to a complete form, which is good design, but not the most practical. Because you might only need to use one style presentation to import an entire component, you could of course just import its style file, but if you do that, you’ll need to memorize a lot of class names and in many cases override the default style to suit your needs. Like this

  1. <button type="button" class="xx-button xx-button--text" style="float: right; padding: 3px 0px;"><span>Action buttons</span></button>
Copy the code

I knew who you were when I saw you

If you use a UI framework, you can almost see which framework is built without making a lot of changes, just as all websites built with Bootstrap look almost the same.

The API is a headache

Memorizing the API and how to use it can be a hassle. If you are using a UI framework for page development, you may not be able to do anything without the DEMO and API documentation on the official website. When you want to achieve a similar effect, you may often copy the code back and forth to prevent errors.

You’re a user, not a creator

If you use a UI framework, and does not provide a UI that you need in this framework, it becomes very awkward, encapsulation, again if you could be your structure and original structure, don’t go or no relationship, in other words, you are just a tool of the user, rather than on the creator of a tool.

The beginning

Introduction to the

The framework I’m going to introduce you to is called CMUI, which is just an acronym. It consists of three parts: the style library, the component library, and the method library. Each part can be used independently, and you can even plug it directly into your project and use it with the UI library you are using now.

** Style library: ** Full name is Cyan, which is the only English word you don’t know in red, orange, yellow, green, cyan, blue and purple (this is very important). Sass is used to extract and encapsulate CSS. Based on this style library, you can almost split pages by style combination without writing extra CSS. What’s more, all the naming is so hideously simple that you never have to look at the API documentation after you’ve used it once.

Component library: ** Thanks to the powerful VIEW layer presentation provided by the style library, we provide relatively few components. We only provide components for problems that cannot be solved by style alone, which is also intended to lower the barrier for developers

** Method Library: ** Here are methods for common WEB functions to reduce your code load

No picture, no truth, show a logo

Cyan doesn’t let you think, doesn’t let you make mistakes

Naming modules during development was a very painful and brain-taxing process. It mainly includes the following aspects:

  • There are not commonly used English words in the name, which is not easy to understand and read (you must have used baidu translation 😁)
  • The name of the module is not consistent with the actual use after repeated requirements modification
  • Two modules with exactly the same style use different names, write styles many times, for example, a brand list and a user list are exactly the same style, who knows when your product and design will change, so how do you reuse?
  • Misnaming two similar modules on the same page, for example, porductTop productBottom productRecommend productNew
  • Too long a name for an accurate description
  • .

To solve this problem, Cyan has done a lot of research and optimization in naming. We want to use words that everyone can understand at once and everyone can write correctly at once. Let’s take a look at all the default keywords in the style library.

Margin Padding top left bottom Center Full red Orange Yellow Green Cyan Blue Purple Coffee Border item RADIUS Round light shadow pill Size class: big Small block element class: IMG Form Swich BTN Reverse Badge Layout class: Flex Ratio List item IMG Scroll Container Secondary class: Disabled Squarefloat pos clearfix overflow delete justify limit fixed
Copy the code

The words you see are the entire class names of the CMUI style library. The color and size classes are user-defined. It’s hard to imagine that you can split a page with these simple words, but they are.

Write a jingdong

We first use Cyan structure to restore a jingdong home page commodity list as a small DEMO.

<div class="list list-col2 border">
    <div class="list-item">
        <div class="ratio-container img-container">
            <img src="Picture address" alt="">
        </div>
        <span class=" reverse red badge square pos-a top10 left10">rob</span>
        <div class="padding10">
            <span class="text-limit2 fs-13">FaSoLa ceramic tile stickers imported from Japan diagonal seam flooring waterproof wear-resistant living room decorative wall self-adhesive Bohemian style (12 / sheet) large</span>
            <div class="flex-container margint10">
                <span class="text-delete text-light marginr10">999</span>
                <span class="text-red fs-13 right">222</span>
              	<span class="badge reverse">Find a similar</span>
            </div>
        </div>
    </div>
    <div class="list-item">
        <! -- same code as above -->
    </div>
</div>
Copy the code

The output effect

Descriptive style library

In this case you can see that we did the layout without using any extra CSS. One of the great things about using the Cyan style library is that you don’t care what you do, you just describe what you see as a class combination. On the other hand, when you look at HTML structure, you don’t need to look at the page to know what the end result will look like, so we call Cyan a descriptive style library.

Business logic extension library

Although I think naming is a hassle, if you don’t feel like using a class for a description, be sure to use a name that identifies your business. You can also refer directly to our extension library.

<div class="productList">
    <div class="productItem">
        <div class="productImg">
            <img src="" alt="">
        </div>
        <span class="productName"></span>
        <div class="productInfo">
            <span class="info_oldPrice"></span>      
            <span class="info_newPrice"></span>
            <span class="p_find"></span>
        </div>
    </div>
</div>
Copy the code
@import cyan/extend;
.productList{@extend list;
    .productItem{@extendlist-item; }.productImg{@extendratio-container img-container; }.productName{@extendtext-limit2 fs-13; }.productInfo{@extend flex-container margint10;
        .info_oldPrice{@extend text-delete text-light marginl10}
        .info_newPrice{@extend text-red fs-13 right}
        .p_find{@extend badge reverse}
    }
}
Copy the code

The real opening chapter

Six layout container

Cyan provides six layout containers for almost all your layout needs. Take a look

Grid containers

A grid system similar to bootstrap, with 12 or 15 arrays available.

Box container

The only difference with grid containers is that there is no spacing.

Grid containers and box containers are reserved for historical reasons and future responsive PC implementations, and are not commonly used in real mobile development, although they can be used if you are used to using grid systems.

Ratio of the container

Create any proportion within the width of any area, usually used to make head or list of goods, such as the above case, the window width is not fixed, the spacing between the two columns design may be adjusted at any time, even the number of columns to use images is not necessarily a square, and ensure that the picture in a certain proportion (usually one to one) to show, at this time you will be using container.

To help you understand, let’s create the columns using the grid system first, but there will be a better way later

<div class="container">
  <div class="row">
    <div class="span6 margint20">Never mind what this margint20 is for, although you can guess, right<div class="ratio-container">Add the scale container here and the internal nodes will be shown in 1:1 by default<img src=""/>
      </div>
    </div>
  </div>
</div>
Copy the code

The output effect

​

You can see that the image is displayed in fixed scale regardless of the viewable area width. If you need other scale sizes, just mark them in the back

<div class="ratio-container" ratio="" ">The nodes here will be shown in a 2:3 ratio</div>
Copy the code

The function of the proportional container is not only that, it can also achieve many effects, such as the following, can you think of how to do it? We’ll talk about that later

Pictures of the container

One of the problems with putting images directly into a scale container is that if you use images that are not proportional, they will be stretched and distorted, which is definitely not what you want, so we need image containers. Just by adding a few extra classes, it can support a wide variety of effects to suit your needs,

<div class="img-container">
  <img src=""/>Images are displayed in the center of the container by default</div>
<div class="img-container round">
  <img src=""/>Images will be displayed in circles</div>
Copy the code

To make it easier for you to understand the different numbers used to identify locations, the blue words in the options are additional classes that you can add, and can be combined as you like, and all the image presentation effects you can use can be assembled.

Scroll to the container

If you want to create a silky scrolling display, you don’t have to bother with one class

<div class="scroll-container">The default is landscape scrolling<img src=""/>
  <img src=""/>
  <img src=""/>.</div>

<div class="scroll-container-y">If it's vertical, add -y...</div>
Copy the code

The effect

Flex container

I’m sure you won’t remember how Flex is used in CSS3, so we’ve carefully encapsulated Flex to create the most powerful layout container that can be insanely powerful, but incredibly simple to use.

<div class="flex-container">Fill in the internal structure here, horizontally arranged</div>
<div class="flex-container-col">Fill in the internal structure here, vertically arranged</div>
Copy the code

WTF? That’s it. Yeah, that’s it. You read that right. It’s that simple. Let’s see what it can do

You can add the following four additional classes, a total of 10 secondary classes, which can meet your needs, if added directly to the outer node can be unified control over all the child nodes, if added to the child node, you can add additional control over the child node.

Interval type selection Order to flip Position control The child nodes are filled horizontally and vertically
round/between reverse top/left/right/bottom/center vfull/hfull

I think the encapsulation of these apis is so simple that I won’t bother explaining what they do. Mom won’t have to worry about me remembering how to use Flex anymore.

conclusion

The layout of the container class can achieve very powerful, and very simple to use and all the keyword class is very commonly used, more important is they can also optional combination, to realize the more complex layout, since you use Cyan, you are a creator, limit your is not a function framework, but your imagination.

The list of

Container classes are powerful enough, but there’s still a lot of room for improvement. For example, if we want to implement a 5-column navigation, we can use the following three methods.

Method 1: grid container or box container<div class="container">
  <div class="row">
    <div class="col3 text-center" v-for="i in 5">
    	<img src="" alt=""><span>Navigation {{I}}</span>
    </div>
  </div>
</div>Method 2: Flex container<div class="flex-container">
  <div class="flex1 text-center" v-for="i in 5">
  	<img src="" alt=""><span>Navigation {{I}}</span>
  </div>
</div>Method 3: Roll the container<div class="scroll-container">
  <div v-for="i in 5" style="width:20%" class="text-center">
  	<img src="" alt=""><span>Navigation {{I}}</span>
  </div>
</div>
Copy the code

But what if there are two or more rows? Grid containers can continue to be used without modification, Flex containers need to add line breaks and set the width of each one, scroll containers are no longer available (unless two scroll containers are placed)

<div class="flex-container">
  <div class="text-center wrap" v-for="i in 10" style="width:20%">
  	<img src="" alt=""><span>Navigation {{I}}</span>
  </div>
</div>
Copy the code

What if we need to add a split line? You could of course add a border class for the node using our border class, but that would cause the adjacent borders to be thicker. We can handle all of this by adding the helper classes we provide, but they’re cumbersome, so we need the List class

Based on the list

The List class controls the number of columns and the display of borders at will, with each column having the same width, and automatically floats clear at the top of each row to make sure that items are displayed well even when they are of different heights. At the same time, you can combine lists with the layout class containers described earlier, and no layout structure will ever surprise you.

<div class="list list-col5 border">
  <div class="list-item padding20 text-center" v-for="i in 10">
    <img src="" alt=""><span>Navigation {{I}}</span>
  </div>
</div>
Copy the code

The component list

Now consider the following more complicated cases:

  • Each entry in the list has a different width
  • There’s a space between each term
  • The border color does not agree, even some have, some do not
  • Lists need to be grouped to create a page effect similar to an address book

The first three cases can be solved by using a combination of List and Flex-Container, but require an extra DIV layer, while the fourth case needs to be developed separately, though not too complicated. At this point we can start using our component system.

<cmui-list :col=',7,5 [2] ' :space='20' border='#ab2c4f'>Three columns 2:7:5, spacing 20, border color # AB2C4F<cmui-list-item>.</cmui-list-item>
</cmui-list>
Copy the code

Each column through component we are free to set the proportion, the borders, spacing, on the item to fine-tune these properties we can also, if the frame joint, automatically merged, and can be unlimited nested, so all the ranks of the structure can be implemented, this structure is often used in advertising display,

Virtual list

If a list has 10,000 pieces of data, for example, the search results are page-loaded, a large amount of data will cause two problems:

  1. First rendering efficiency is reduced
  2. As the amount of data increases, the page becomes more and more jammed

You need virtual lists, which store data in a cache and render only in the viewable part of the screen, which are smooth and efficient even when loading tens of thousands of data simultaneously.

<cmui-virtual-list height="500px" :data="Listdata" v-slot="slotProps">
    <p>{{slotProps.item.value}}</p>
</cmui-virtual-list>
Copy the code

You can see from the example that although we are rendering 10,000 pieces of data, only a few nodes are actually being updated.

Dynamic auxiliary

The layout is done, but the structure is similar, and it still needs to be tweaked to match the design perfectly. The padding/margin /top/bottom/left/right values are very variable between designs, but the mobile screen size is small, so you just need to define all possible values in the CSS in advance. Padding12 indicates a 12-pixel responsive fill and paddingh12 indicates a horizontal fill only.

As a joke, CMUI will automatically parse your HTML structure and listen for class definitions that conform to the format. When you add a paddingXXX class to a DOM node, it will automatically generate the corresponding style in a dynamic stylesheet and respond with different values depending on the device. You just need to use it directly.

Early adopters in advance

Remember, CMUI includes three modules, this article also only the layout, is Cyan in the list of component library, dynamic auxiliary methods in the library to do the introduction, the function of CMUI far more than that, we are to document and case, the perfection of the final theme library, if you want to early adopters in advance, you can click on the link below to crack our website qr code, Join our discussion group to find out.

I want you to scan the code