Atomic css

ig(gee-g;d;6e:gf&e?5c

ee-g;d;6e:f/d8g’ f
g.o<i+fe.9fg.!ggg;d;6e:c

f/g.e e/d8e/d;%e
e0 css d;#g
igi!9g.f(h?h6 f%h6 e0gd;#g
e:c

g1;d<<e< h
e8g quicklayout.csscd=f/e=e h?h>9f e
h?d8f-%gg:&fo<

f3h&
d:h’#f4e$o<g9fc

1. e*ei&e-f/ .db{ display:block; };
2. f f0e-g4f%h?f% .mb10{ margin-bottom:10px; };
3. g>ee7g( po<percento< h!(g$: .w100p{ width:100%; };
4. e0f0g9g( do<doto< h!(g$: .lh1d2{ line-height:1.2};

1.d=?g(f9e<

<div className={`pl16 pr16 pt16 pb16 tac c_000`}>hello world!</div>

h!(g$:o<padding:16p 16px 16px 16px; text-align:center; color:#000;

d;#g
h’h

• imgf g->ih&
  f7;e width,height,altd8 d8*e1f’o<
• a f g->ih&
  f7;e titlee1f’;

CSS e=e h’e

• d;%_e<e$4gf 7e<d8 h=g4f%eo<e?i!;f d=g(egie6o<d>e&.g_mod._on h!(g$:e<9g*e<e/gg 6f
  cd=f/._onf,h:+f/d8 h=ed;;d= CSS f 7e<g;
• e0e>f d;%.i_e<e$4o<d>e&.i_shareo<
• i"h 2d;% .c_e<e$4o<d>e&.c_primary;
• e;:h…eg4 i=f/g(h’he:igd8h%?o<e&fe.e(e:g0d:d8 g,&eh’he:gh’ho<g4f%g( css h’#e3o<hd8 f/f )eh’he:o<

i"h 2h’h

/* color ================== */
$c_primary: #3b66f5; // hh    2
$c_secondary: #6e8ffa; // f5h
$c_secondary_s: #c2d0ff; // f/hf4h
$c_danger: #f53165; // g:"h 2
$c_danger_s: #fa648c; // f5g:"
$c_success: #39cca0; // g;?h    2
$c_warning: #ff8d29; // i;h    2
$c_border: #d7d8e0; // h>9f!i"h   2
$c_border_dark: #dbdbdb; // i;e$f(!e<d8h>9f!i"h   2
$c_background: #f5f5fa; // hf/i"h   2

/*color, d8
g.!f/f4eh?f/f4e0e01ih?f7;e
 xf%h?h!*/
$c_l: #1f2129; // fe-i;h.$i"h  2
$c_m: #5a5b66; // fe-h>e
)h  2
$c_s: #83848f; // fe-ee<1i"h  2
$c_s: #c0c2cc; // fe-f/e<1f4e<1
$c_000: #000; // i;h   2
$c_fff: #fff; // g=h   2

h?d8*i"h 2f/e:d:h.>h.!ee-&gh.>h.!h’hee;:gc h?igi"h 2i$d:g:"i;hg;?g 1 e7e 2 e7i"h 2d9e$o<i=f e/9e:g Atomic css f 7e<c.c_primary{ color:$c_primary; }c d=?g(i"h 2e:igi"h 2gd;%eo<d=?g( SASS ef0c

h/-d9 eg1;e7%e7

.auto      // e8&e.=e:&e8&blockeg4 e7&e3e1d8-
.hide      // d8
e=1e
seogiheg4 
.clearfix  // f8i$f5.e
(
.ell       // e
h!ff,h6e:f>g$:g9g9g9
.ells _2   // d8$h!ff,h6e:f>g$:g9g9g9
.pa_auto   // e.e.=ee.i+geg4 d8
d8e7&e3eg4e1d8-
.pa_vc     // d8
e.i+eg4 d8
d8eg4e1d8-
.cell      // g(h!(f <gf9e<ff;!f5.e
(d9ege )d=g):i4
.trans     // 0.3sgtransitione
(f
.g_row     // ig(e7&e3paddingf%h?h!e1d8-
.g_wrap    // ig(e7&e3marginf%h?h!e1d8-