atom.css

Hello everyone, I wrote a CSS library atom. CSS, pretty easy to use, so I can’t help sharing with you. (github.com/isVertical/…).

The cause of

I have been writing HTML for several years, and now JSX, the biggest feeling is not boring, but dazzling. When writing styles, it is often necessary to switch back and forth between HTML/JSX files and CSS files. Frequent eye movements, coupled with large screen blinding, are easy to cause eye fatigue. If individuals have the habit of smoking, drinking or playing mobile games, there will be blood in their eyes when they get up every morning.

So, after some time of generalization, I came up with a new way to write interface styles – atom.css. In fact, IT took me a long time to come up with this idea, because what Atom.css does is it’s pretty common to write CSS properties as a separate class, which is basically what a lot of UI frameworks did before that, so I was kind of skeptical about the need for this open source project. After that, I started thinking about what atom. CSS can do for developers. How is atom.CSS different from those UI frameworks? Why should other developers abandon frameworks to use Atom.css? It wasn’t until I looked at the source code for the new GitHub homepage, which also uses Atom-style CSS for some of GitHub’s pages, that I was sure I was right.

<div class="border rounded-1 flex-shrink-0 bg-gray px-1 text-gray-light ml-1 f6 d-none js-jump-to-badge-search">
      <span class="js-jump-to-badge-search-text-default d-none" aria-label="in all of GitHub">
        Search
      </span>
      <span class="js-jump-to-badge-search-text-global d-none" aria-label="in all of GitHub">
        All GitHub
      </span>
      <span aria-hidden="true" class="d-inline-block ml-1 v-align-middle">↵</span>
</div>
Copy the code

Many things, deductive use to the extreme, it has a different meaning.

I defined Atom. CSS as a CSS library that provides base classes. Each class corresponds to a single CSS property. Developers have a lot of freedom when writing templates, and basically don’t have to write separate CSS layouts, which provides enough flexibility for subsequent development and maintenance. What makes Atom.CSS even more powerful is that it dramatically reduces the time it takes developers to write templates, which means more time to focus on business logic, allowing many developers with heavy business to get their work done faster and spend more time at night with family and friends.

source

Atom.css was inspired by organic chemistry. In organic chemistry, the element, as the smallest unit, constitutes various organic compounds. Different elements can be arranged and combined to form different organic compounds, from which substances are formed.

Atom.css converts common CSS properties into a single class, such as display:flex to. Flex {display:flex}. When you’re writing a skeleton in HTML, you can write structure and style at the same time. Saves some of the time to write the interface style after writing the HTML structure.

.flex{
    display:flex;
}

.justify_center{
    justify-content:center;
}

.align_center{
    align-items:center;
}

.left{
    float:left;
}

.right{
    float:right;
}
Copy the code

Atom.css follows the popular CSS in JS design philosophy. Once you’re familiar with its “presentation”, you’ll never want to use a framework again. It also deepens your understanding of CSS, and most importantly, it builds user interfaces fast!

content

Atom.css currently has 100+ unit classes, which is enough to handle most of the CSS layout. Atom.css is updated every Sunday. I collect and evaluate the needs of colleagues, individuals and other developers and update them. In the future, HTML will support atom.css natively, and here are most of the classes:

Class Name
border_box content_box flex flex_row
flex_row_reverse flex_column flex_column_reverse flex_wrap
flex_nowrap flex_wrap_reverse justify_center justify_start
justify_end justify_between justify_around justify_evenly
justify_initial align_center align_start align_end
align_stretch align_baseline align_initial left
right clearfix margin_center margin_xcenter
margin_ycenter text_center text_left text_right
text_justify text_last_center text_last_left text_last_right
text_last_justify absolute relative fixed
static sticky none block
inline inline_block list_item radius_0 - radius_20
w_100 h_100 w_100vw h_100vh
m_0 - m_200 mt_0 - mt_200 mb_0 - mb_200 ml_0 - ml_200
mr_0 - mr_200 p_0 - p_200 pt_0 - pt_200 pb_0 - pb_200
pl_0 - pl_200 pr_0 - pr_200 shadow_normal shadow_medium
shadow_high white whitesmoke white_sub
black color_333 color_888 black_sub
red blue green bg_white
bg_whitesmoke bg_white_deep bg_black bg_333
bg_888 font_normal font_bold font_bolder

usage

Full example:

<div class="w_100vw h_100vh flex justify_center align_center bg_yellow color_333 font_bold font_64">
    Example
</div>
Copy the code

Output:

Some people might think this looks bad, but at the time you were familiar with writing CSS using atom.css in HTML/JSX, it just went downhill! Trust me, you’ll love it. It’s addictive!

The last

Atom.css uses the MIT protocol and is quite free! My original intention was to optimize the engineering structure, reduce repetitive work, so that the majority of siege lions have extra time to enjoy life.

Welcome to Star, welcome to pull Requests, with only two requirements: follow the underline naming rules, and maintain the single-attribute class principle.

The underline naming rule is more recognizable than the camel’s name, which is easier to semantically. The middle line is not used because it can cause visual obstacles and is not so friendly to semantically. The single-attribute principle of a class is at the heart of atom.css. It must be adhered to, but classes for private variables and atomic components may be added in the future.

(github.com/isVertical/…).