VimUnDoO:Sn0]f X@35#\ RRRRUUa_T#HelloWorld = require '../src/index'5_  VT$ 

Default look

 

      {"""              """}
 5_   VT$    5_ VT8 5_ VT9 5_ VT< 5_VT< 5_ VT? 5_ VTܽ5_ VTܾ0
5_ VTܾ 5_ VT5_  VT
5_ VT 5_ VT  5_  VT    Hi  5_ VT 5_ VT 5_VT   5_ VT  }}5_ VT  >5_VT   5_VTA 5_VTv 5_VTބ 5_VT޷ Hi5_ VT  maxWidth: '960px'5_VT( Hi5_1VT8
5_  VT 5_! 1VT 1
5_!#"V/T5_"$#V/T 5_#%$&V/T 8
Hi
5_$&%V)T5_%'&V)T 5_&('&V)T 6
Hi
5_')(vT 5_(*)vT 5_)+*vT  5_*,+VT5_+-,VT 5_,.-&VT7
Hi
5_-/.VT 5_.0/VT 5_/10vT 5_021vT 5_132vT 5_243 vTA &

React-Component-Starter

5_354 5 5 EvETK Z Code on Github5_475 5 5 EvETL I Code on Github5_5867 5 EvETT5_798 5 EvETYfaker = require 'faker'5_8:9 5 EvETY5_9;: 5 EvETZ5_:<;VTa0  5_;=<VTb!05_<>=VTd15_=?> VTg28
Hi
5_>@?(vTp26
Hi
25_?A@(vTs27
Hi
25_@BA(vTu28
Hi
25_ACB*/*V(T)* 7
Hi
  8
Hi
 5_BDC$**V(T#%, 5_CED'**V(T&(, 5_DFE%%%.v.T$&,8
Hi
5_EGF%%%.v.T$&,
Hi
5_FHG(((,v,T'),6
Hi
5_GIH(((,v,T'),
Hi
5_HJI'((,v,T&(, 5_IKJ!((,v,T!#- !#,5_JLK" )),v,T!#-

Two column layout

5_KML")),v,T!#-'

SImple Two column layout

5_LNM" )),v,T!#-'

SImple two column layout

5_MRN&))),v,T%'-2
{faker.lorem.paragraphs(5)}
5_NSPR&)),v,Tg %'-2
{faker.lorem.paragraphs(6)}
5_RTS))),v,T!(*-#
Right column
5_SUT))),v,T(+-S
Right column
5_TVU*3)),v,T),.H height: '100vh', background: 'yellow'}}>Right column
5_UWV*)),v,T)+/3 height: '100vh', background: 'yellow'5_VXW*)),v,T)+/2 height: '100vh' background: 'yellow'5_WYX*)),v,T),/1 height: '100vh'background: 'yellow'5_XZY+ )),v,T*+" background: 'yellow'5_Y[Z) )),v,T)+/)*/5_Z\[+)),v,T+.1 +-05_[]\-)),v,T",- color: 5_\^],)),v,T+-1 padding: '1.5rem'5_]_^,)),v,T#+-1 padding: '15rem'5_^`_+)),v,T*,1 height: '100vh'5__a`+)),v,T*,1 height: '00vh'5_`ba+)),v,T*,1 height: '0vh'5_acb+)),v,T$*,1 height: '250vh'5_bdc*)),v,T%)+1" background: 'yellow'5_ced0 )),v,T0215_dfe/)),v,T./ 5_egf$)),v,T#$% 5_fhg$$ - V T#.0  S
{faker.lorem.paragraphs(6)}
  
Right column
 5_gih/".VT/=0/005_hji0".VT/1='

Simple two column layout

5_ikj2".VT13= 5_jlk1;5VT19=12=5_kml2B<VT 13D 5_lnm222vT 13D 5_mon<22vT;=D 5_npo7 22vT&68D }}>Right column
5_oqpC 22vT.'CED5_prq 22vTr( F  E5_qvr 33vT+ F maxWith: '1200px'5_rwsv33vTOF5_vxw44vTP,5_wyx 33vT =G F5_xzy 44vT > <5_y{z 33vT AG F5_z|{55vT SI H5_{}|66vT V-I 5_|~} 66vT 
Yo
5_}~ 55vT .I H5_~66vT yo5_ 55vTH5_66vTI5_VT  I'm a child span 5_ VT/FF5_VT@0I 5_VTJ I5_ VTJ 5_ VTJF
Hi
5_VTK J5_VT1K 5_@VTKH
Hi
5_VT2K I'm a child span5_VTK" 5_ v T3K" 5_$ v TK- I'm a child span with 2 columns5_ v TK- I'm a child span with 3 columns5_= v T K\
5_) v T5M>
5_8 v T$6M?
5_8 v T)7MD
5_@ v T? ML
me too
5_ v TB!N me too
5_  v TB!O
5_ v TF!O O5_ v TG me too5_& v TI8 O/ I'm a child span with 3 columns5_V(T\OO5_!V(T_T 5_&!V(TaT/ I'm a child span with 3 columns5_8!V(Tc9TE
5_.!V(Ts;T/ I'm a child span with 1 columns5_4!V(T<35TQ
{faker.lorem.paragraphs(6)}
5_I/!V(TIKTIJT5_I !V(T=HIQ
{faker.lorem.paragraphs(6)}
5_I!V(THKTj
{faker.lorem.paragraphs(6)}
5_J$!V(TILU_ background: 'lightgray', whiteSpace: 'pre-wrap'}}>{faker.lorem.paragraphs(6)}
5_K"!V(TJMVF whiteSpace: 'pre-wrap'}}>{faker.lorem.paragraphs(6)}
5_J !V(TJLWJKW5_4!V(T 36Xj
{faker.lorem.paragraphs(6)}
5_5#!V(T46Y_ background: 'lightgray', whiteSpace: 'pre-wrap'}}>{faker.lorem.paragraphs(6)}
5_5#!V(T46Y^ background: 'lightgray' whiteSpace: 'pre-wrap'}}>{faker.lorem.paragraphs(6)}5_5#!V(T47Y] background: 'lightgray'whiteSpace: 'pre-wrap'}}>{faker.lorem.paragraphs(6)}5_6"!V(T58ZF whiteSpace: 'pre-wrap'}}>{faker.lorem.paragraphs(6)}5_M#!V(TLN[$ background: 'lightgray',5_5!V(T>57[56[5_))!V(T<(*\G
Hi
5_)0!V(TA(*\U
Hi
)*\5_,)!V(TC?+-\H
Hi
5_!V(T]@\ 5_!V(T<\% 5_ !V(T<\$ 5_ !V(T<\# 5_ !V(T<A\" 5_ !V(T=PB\! 5_!V(TC. 5_,VTC-[ H
Hi
   A
. I'm a child span with 1 column
 ! E
/ I'm a child span with 3 columns
  @
/ I'm a child span with 4 columns
   W
Hi
  X
Hi
 5_-,VTC,- 5_0,VTC02Z5_1,VTC015_0,VTC02[ 02Z5_22?V TC1@[ 
{faker.lorem.paragraphs(6)}
  
Right column
 5_? 2?V TC?A\ ?A[5_@ 2?V TC?A\ 5_@2?V TD@B\@A\5_A2?V TD@B]! 5_A2?V TD@B] 5_A2?V TD@B] 5_A>:VTDAG]AB]5_BB F V TDAGb
Right column
5_F 7 3 V TDFLbFGb5_G K G V TDCFLg
{faker.lorem.paragraphs(6)}
5_KK G V TDfEKMgKLg5_AK G V TIYF@Bh! 5_AK G V TI@Bh! 5_AK G V TI@Bh 5_AK G V TI@Bh 5_1K G V TI02h! 5_1K G V TI02h 5_1K G V TIG02h 5_ffNVTKfhfgh5_h fNVTKgi)

Simple three column layout

5_ifNVTK(ik ik5_kkpV TK6jq 
Left column
5_kpV TKD 5_ puV TK]  background:5_otV TK_   5_vvVTKmuv  
{faker.lorem.paragraphs(6)}
  
Right column
 5_uvvVTKouwy uwx5_vwwVTKtuwy 5_v wwVTKtuwy 5_v wwVTKwvxz vxy5_w xxVTK{vxz 5_rrtVTK~qr background: 'pink' height: '25vh' padding: '1rem'5_qrrVTKprw
Left column
5_r rrVTKqsw }>Left column5_r rrVTKprw$
Left column
qsw >Left column5_q%q,q,VTKHprv6
Left column
5_q,q,VTKI w  v5_ r,r,VTKJ x  w5_ s,s,VTK x height: '60px'5_ s,s,VTK x fontSize: '16px'5_ s,s,VTK x fontSize: '6px'5_ s,s,VTK x fontSize: 'px'5_ s,s,VTK x fontSize: 'x'5_ s,s,VTKK x fontSize: ''5_ s,s,VTKL x height: '30rem'5_ s,s,VTKM y  x5_ v,v,VTKN| {5_  VTL  position: 'absolute' top: 0 bottom: 0 width: '100%'5_   VTL y  x5_   VTL   lineHeight: '10rem'5_   VTL O x x5_sstVTL^rty 5_usuVTL`uyyuvy5_vsuVTLduw| 5_w%suVTLgvx|,
1
5_vsuVTLhPuw| 5_xxsVTLx|xy|5_yxsVTLxz 5_xxsVTLxz5_}xsVTL|~ 5_||zVTL||}5_{%|zVTLz|,
1
5_~%|zVTL},
1
5_%|zVTLQ,
2
5_|zVTL 5_}|zVTL|~ 5_z|zVTLRy{ 5_  |zVTL  textAlign: 'center'5_  {yVTL  5_   |zVTL  fontSize: '2rem'5_   {yVTL  5_   |zVTL 5_  }{VTL 5_  |zVTLS   5_}{VTL5_ y t V TL5_ y t V TL5_y t V TL 5_y t V TL 5_%y t V TL,
1
5_%y t V TL,
2
5_zV%TL5_%zV%TL,
3
5_%zV%TL,
4
5_%zV%TL,
5
5_%zV%TLT+
5_q&zV%TMUqs qs5_{V%TM5_t VTM"5_t VTM#5_ t VTM%! 5_! t VTM% 5_ "!t VTM% 5_!#"t VTM1 5_"$#t VTM1 5_#%$t VTM45_$&%t VTM65_%'&t VTM8 5_&('t VTM: 5_')(t VTM<5_(*) V TMB ,
6
  ,
7
  ,
8
  ,
9
  -
10
 5_)+* V TME 5_*,+ V TMG 5_+-, V TMI 5_,.-vTML 5_-/.vTMPV 5_.0/rrr*v*TMlqs/

Shrink screen to see layout change

5_/10rrr*v*TMlqs"

Shrink screen to see

5_031r4rr*v*TMvYqsG

Shrink screen to see simplified layout for smaller devices

5_1423.) V&T]Z.9./5_354// 3 V T]./ ?
, I'm a child span with 1 column
 5_4653 / / V T]39345_5764/ / V T]35 5_687///vT][.0 5_798!<//vT] "?
5_8:9+:!Q!<v<T]\*,>
+,5_9;:!"!Q!<v<T] "U
5_:<;&"!Q!<v<T]]%'C
5_;=<&"!Q!<v<T]%'C
5_<>=!"!Q!<v<T] "U
5_=?>0"!Q!<v<T]/1C
5_>@?5"!Q!<v<T]^46?
5_?A@ !Q!<v<T]F
Hi
5_@BA !Q!<v<T]E
Hi
5_ACB; !Q!<v<T]:<U
Hi
5_BEC; !Q!<v<T]:<T
Hi
5_CFDE> !Q!<v<T^=?V
Hi
5_EGF> !Q!<v<T^_=?U
Hi
5_FHG> !Q!<v<T^=?W
Hi
5_GIH>!!Q!<v<T^=?V
Hi
5_HJI; !Q!<v<T^:<V
Hi
5_IKJ;!!Q!<v<T^:<U
Hi
5_JLK !Q!<v<T^G
Hi
5_KML!!Q!<v<T^`F
Hi
5_LNMBB` VUcAB'

Simple two column layout

 !  
{faker.lorem.paragraphs(6)}
  
Right column
  ! 
Right column

{faker.lorem.paragraphs(6)}
 5_MONCCZ VUBC)

Simple three column layout

  
Left column
  
{faker.lorem.paragraphs(6)}
  
Right column
 5_NPO@VU'  G
Hi
   U
, I'm a child span with 1 column
  C
- I'm a child span with 3 columns
  T
- I'm a child span with 4 columns
  C
- I'm a child span with 3 columns
  ?
, I'm a child span with 1 column
   V
Hi
  W
Hi
 5_ORPXVU<d

More complex layout taken from http://www.zell-weekeat.com/smarter-layouts-with-susy/

E

Shrink screen to see simplified layout for small devices

 !  ,
1
  ,
2
  ,
3
  ,
4
  ,
5
  ,
6
  ,
7
  ,
8
  ,
9
  -
10
  ! ,
1
  ,
2
  ,
3
  ,
4
  ,
5
  5_PQRVUTa purpleStyle = border: '2px solid purple' color: 'purple' height: '10rem' fontSize: '2rem' lineHeight: '10rem' marginBottom: '1rem' textAlign: 'center'5_PRQVUN5_CED>!!Q!<v<T^=?U
Hi
5_132 rr*v*TMX $ marginBottom: '1.694915254237288%'5_GK G V TDFHh"
F
Hi
   ?
, I'm a child span with 1 column
  C
- I'm a child span with 3 columns
  >
- I'm a child span with 4 columns
  5_ v T;M0 I\'m a child span with 3 columns5_rtvs333vT24F 5_sut:33vT9;F 5_tu=33vT*<>F 5_NQORP& )),v,T3%'-2 
{faker.lorem.paragraphs(6)}
5_PQ&.)),v,T4%'-2 
{faker.lorem.paragraphs(6)}
5_NPO&')),v,T$%'-1
{faker.lorem.paragraph(6)}
5_576$ 5 EvETw3 5