I nte rna t io na J o urna l o f   E lect rica l a nd   Co m p ute E ng in ee ring   ( I J E CE )   Vo l.   9 ,   No .   1 Feb r u ar y   201 9 ,   p p .   7 1 3 ~7 2 2   I SS N:  2 0 8 8 - 8708 DOI : 1 0 . 1 1 5 9 1 / i j ec e . v9 i 1 . pp 713 - 7 2 2          713       J o ur na l ho m ep a g e h ttp : //ia e s co r e . co m/ jo u r n a ls /in d ex . p h p / I JE C E   Ana ly z ing  boo tsr a p and   founda tio n f o nt - end  fra m e w o rk s :   c o m pa ra tive  s tu dy       M a j ida   L a a ziri   1 ,   K ha o ula   B en m o us s a 2 ,   Sa m ira   K ho ulji 3 ,   K er k eb  M o ha m ed  L a rb i 4 ,   Abir  E l Y a m a m i 5   1, 2, 3 I n f o rm a ti o n   S y ste m   En g in e e rin g   Re sa rc h   G ro u p ,   Na ti o n a S c h o o o f   A p p li e d   S c ien c e s,   A b d e l m a l e k   Essa a d Un iv e rsit y ,   M o ro c c o   4 In f o rm a ti o n   S y ste m   En g in e e rin g   Re sa rc h   G ro u p ,   F a c u lt y   o f   S c ien c e s,  A b d e l m a le k   Essa a d Un iv e rs it y ,   M o ro c c o   5 L a b o ra to ry   S ig n a ls,  Distrib u ted   S y st e m s a n d   A rti f icia In telli g e n c e ,   ENS ET   M o h a m m e d ia,   Ha ss a n   II  Un iv e rsit y ,   M o ro c c o       Art icle  I nfo     AB ST RAC T     A r ticle  his to r y:   R ec eiv ed   Feb   1 8 ,   2 0 1 8   R ev i s ed   No v   2 0 ,   2 0 1 8   A cc ep ted   Dec   1 5 ,   2 0 1 8       M o st  m o d e rn   w e b   a p p li c a ti o n u se   so m e   k in d   o f   f ro n t - e n d   f ra m e w o rk s   f o d e sig n in g   a n d   c re a ti n g   c o n ten i n   a   f a ste a n d   m o re   e ff icie n wa y ,   w h ich   sa v e v a lu a b le  ti m e   w h e n   c re a ti n g   re sp o n siv e   w e b   sites .   T h e re   a re   m a n y   f ro n t - e n d   f ra m e w o r k th a t   v a r y   e n o rm o u sly   in   term o f   fe a tu re a n d   b e n e f it s,   w h ich   c o u ld   m a k e   th e   c h o ice   o f   f ro n t - e n d   f ra m e w o rk   f o th e   d e v e lo p e tri c k y .   In   th is  c o n tex t,   th is  p a p e r   f o c u se o n   a n   e ff e c ti v e   a n a l y sis   o f   t w o   o to d a y ' s   m o st  p o p u lar  f ro n t - e n d   f ra m e w o rk s,  Bo o stra p   a n d   F o u n d a ti o n T h e   re su lt sh o w   th a o u r   a n a ly sis  c a n   b e   b e n e f icia f o d e v e lo p e rs  to   se lec th e   a p p ro p riate   f ro n e n d   f ra m e w o rk   to   c u sto m ize   th e ir  w e b   a p p li c a ti o n s.   K ey w o r d s :   B o o ts tr ap     Fo u n d atio n   Fro n t - e n d   f r a m e w o r k s     Co p y rig h ©   2 0 1 9   In stit u te o A d v a n c e d   E n g i n e e rin g   a n d   S c ien c e   Al rig h ts re se rv e d .   C o r r e s p o nd ing   A uth o r :   L aa zir Ma j id a,     I n f o r m a tio n   S y s te m   E n g in ee r i n g   R esar c h   Gr o u p ,   Natio n al  Sc h o o l o f   A p p lied   Scien ce s ,   A b d el m a lek   E s s d i U n iv er s it y ,   Mh an n ec h   I I ,   B . P 2 1 2 1   T eto u an ,   Mo r o cc o .   E m ail:  m aj id a. laaz ir i@ g m ail. c o m       1.   I NT RO D UCT I O N     No w ad a y s ,   w eb   d ev elo p m e n t   is   m u c h   s i m p li f ied   b ec au s o f   th e m er g en ce   o f   d if f er e n t   f r o n t - e n d   f r a m e w o r k s .   I n   r ec en y ea r s ,   d o ze n s   o f   f r o n ten d   f r a m e wo r k s   h a v b ec o m a v ailab le  to   w eb   d ev elo p er s .   Fro n t - e n d   C SS   d ev elo p m e n t   f r a m e w o r k s   m a k th w eb   d ev elo p m e n p r o ce s s   f as ter ,   s i m p ler   an d   m o r e   s tan d ar d s - co m p lia n t.  A n d   h el p   b u ild   w ell - s tr u ct u r ed ,   m ai n tai n ab le  an d   u p - g r ad ab le  w e b s ite.   T h u s   t h e y   a ls o   h elp   th d ev e lo p er   to   s av lo o f   ti m b ec au s t h er is   m u ltit u d o f   alr ea d y   p r eb u ilt  ele m en ts   r ea d y   to   u s e.   E ac h   f r a m e w o r k   h as  it s   o w n   s tr en g t h s   a n d   w ea k n e s s e s ,   an d   s p ec if ic  ap p licatio n   ar ea s ,   allo w i n g   th d ev elo p er   to   ch o o s o n ac co r d in g   to   th n ee d s   o f   h is   s p ec i f ic  p r o j ec t   [ 1 ] .   I n   ad d itio n ,   m o s o f   t h o p tio n s   ar m o d u lar ,   allo w i n g   to   u s o n l y   t h co m p o n en ts   t h at  t h d ev elo p er   n ee d s ,   o r   ev en   m ix   co m p o n en t s   f r o m   d if f er en t   f r a m e w o r k s .   T h er ar s o   m a n y   f r a m e w o r k   ch o ice s   b u m an y   d e v elo p er s   ar attr ac ted   t o   th m o s p o p u lar   o n es li k B o o ts tr ap   an d   Fo u n d atio n .   T h au th o r s   [ 2 ]   s ta te  i n   t h eir   s tu d y   o f   R e s p o n s i v W eb   Desig n   Fra m e w o r k s   t h at   f r o n t - e n d   f r a m e w o r k s   r ed u ce   t h w o r k lo ad   o f   d ev elo p er s   a n d   s h o r ten   f r o n t - e n d   d ev elo p m en p r o ce s s .   T h ese   f r a m e w o r k s   h elp   d ev elo p er s   to   q u ick l y   cr ea te  w eb s i te.   So   th e y   in s is t h at  th B o o ts tr ap   f r a m e w o r k   an d   Fo u n d atio n   h av e   b ec o m t h m o s r e m ar k ab le  f r a m e w o r k s   b y   d ev elo p er s   a n d   m o s u s ed .   T h au t h o r   [ 3 ]   in   h is   ar ticle  o n   R esp o n s i v W eb   Desig n   w it h   th B o o ts tr ap   Fra m e w o r k   p r ef er s   to   w o r k   w ith   t h b o o ts r ap   f r a m e w o r k   b ec au s e   it i s   s t y li s h ,   i n t u iti v a n d   p o w er f u f r o n t e n d .   B o o ts tr ap   h as a   s tan d ar d   s et  o f   cla s s es   th a t   allo w   d e v elo p er s   to   q u ick l y   b u ild   ap p licatio n s .   B o o ts tr ap   is   th m o s p o p u lar   h t m l,  css   a n d   j av ascr ip t   Evaluation Warning : The document was created with Spire.PDF for Python.
                      I SS N :   2 0 8 8 - 8708   I n t J   E lec  &   C o m p   E n g ,   Vo l.  9 ,   No .   1 Feb r u ar y   2 0 1 9   :   7 1 3   -   722   714   f r a m e w o r k   th at  o f f er s   f le x ib il it y   in   t h u s o f   to o ls   w ith o u t   m u c h   k n o w led g o f   lan g u a g es.  T h er ef o r e,   s av ti m f r o m   co d in g   h ea v y   co d e.   T h au th o r   [ 4 ]   c o n f ir m s   t h at  B o o ts tr ap   u s es  L E S C S S,  is   co m p iled   v ia  No d e,   an d   is   m an a g ed   v ia  Gi tHu b   t o   h elp   d ev elo p er s   m a k a w e s o m t h i n g s   o n   t h w eb .   A n d   Fo u n d atio n   i s   a n   ad v an ce d   an d   r esp o n s iv f r o n t - en d   f r a m e w o r k .   Fo u n d atio n   3   is   b u ilt  w it h   Sas s ,   p o w er f u C SS   p r ep r o ce s s o r ,   w h ic h   allo w s   y o u   to   d ev elo p   f aster .   Stu d ies   h a v m o u n ted   t h at  it   h as a   d eb ate  o n   t h c h o ice  o f   f r o n t e n d   f r a m e w o r k ,   i n   o r d er   to   m ak th e   s elec tio n   p r o ce s s   ea s ier ,   t h i s   ar ticle  f o c u s es   o n   a n   e f f ec ti v an al y s i s   b et w ee n   t h B o o ts t r ap   an d   Fo u n d atio n   f r a m e w o r k s   w h ic h   ar th m o s t u s ed   an d   p o p u lar .   T h r em i n d er   o f   th i s   p ap er   is   p r esen ted   as f o llo w s ec tio n   2   p r esen ts   li ter atu r r e v ie w   ab o u t h s u b j ec t,  th e n   w p r ese n tr o u g h   s ec tio n   3   o u r   p r o p o s ed   m o d el  d ed icate d   to   th ev al u atio n   o f   w eb   d ev el o p m e n f r a m e w o r k s .   Sectio n   4   p r esen ts   d is cu s s io n   o f   t h o b tain ed   r esu lts ,   to   s u m   u p   w it h   co n cl u s io n   in   s ec tio n   5 .         2.   L E T AR A TU R E   RE VI E W   2 . 1 .     F r o nt - end f ra m ew o r k   T h f r a m e w o r k   ar co m m o n   t o o ls   in   th p r o ce s s   o f   cr ea tio n   o f   w eb   s ites .   T h er ex i s es s e n tiall y   t w o   t y p es  o f   f r a m e w o r k s   :   f r o n t - e n d   an d   b ac k - e n d   as   s h o w n   i n   Fig u r 1 ,   ( th i s   d is tin c tio n   is   e s tab lis h ed   ac co r d in g   to   w h e th er   th f r a m e w o r k   is   f o r   th p r esen ta tio n   la y er   o r   th ap p licatio n / lo g ical  la y er ) .   T h b ac k - e n d   o f   a n   ap p licatio n   ( s et  o f   f ile s   w it h   lib r ar ies  to   ac ce s s   d atab ases ,   m o d el   s tr u ctu r e s ,   s e s s io n   m an ag e m e n t) .   T h er i s   m an y   B ac k - e n d   f r a m e w o r k s   ( i . e.   Z en d   Fra m e w o r k ,   S y m f o n y ,   L ar av el,   C a k eP H P   . . . ) [ 5 ] ,   [ 6 ] .   f r o n t - e n d   f r a m e w o r k   i s   lib r ar y   to   en s u r s tr u ct u r a n d   g r ap h ical  co n s i s ten c y   v er y   q u ick l y .   Stru ct u r in   co l u m n s ,   t y p o g r ap h y   ( f o n t,  s ize,   titl e,   p ar ag r ap h ) ,   co m p o n en ts   ( b u tto n ,   f o r m ,   d r o p d o w n ,   ca r o u s el,   tab ,   to o ltip ,   aler t,  m o d al) ,   s tates,  r esp o n s iv t h e y   a ll b r in g   n u m b er   o f   to o ls   to   s av lo t o f   ti m i n   th cr ea tio n   o f   w eb s ite   [ 7 ] .   Fro n t - e n d   f r a m e w o r k s   t y p ical l y   co n s is t o f   p ac k a g co n s is tin g   o f   s tan d ar d   co d e   f ile  a n d   f o ld er   s tr u ct u r ( HT M L ,   C SS ,   J S d o cu m e n ts ,   etc. ) .   T h HT ML   lan g u a g s tr u ct u r es  t h d ata,   t h C SS   s t y l izes  t h is   d ata  to   m a k t h e m   v is u all y   co m p r e h en s ib le  an d   ae s th e tic ,   th J ( J av ascr ip ac r o n y m )   allo w s   to   p r o d u ce   an i m atio n s   an d   in ter ac tio n s   i m p r o v i n g   t h u s er   ex p er ien ce .   T h u s u al  co m p o n e n t s   ar e   [ 4 ] ,   [ 8 ]   :   a.   C SS   s o u r ce   co d to   cr ea te  a   g r id : th i s   a llo w s   th e   d ev elo p er   t o   p o s itio n   t h e   d if f er en t   ele m e n ts   t h at  m a k u p   th d esi g n   o f   t h s ite  in   s i m p le  an d   v er s atile  w a y .   b.   T y p o g r ap h y   s t y le  d ef i n itio n s   f o r   H T ML   ele m e n ts .   c.   So lu tio n s   f o r   b r o w s er   i n co m p atib ilit y   ca s es so   t h at  th s ite  d is p la y s   co r r ec tly   i n   all  b r o w s e r s .   d.   C r ea te  s ta n d ar d   C SS   clas s es t h at  ca n   b u s ed   to   s t y lize  ad v a n ce d   co m p o n en t s   o f   t h u s er   in ter f ac e.           Fig u r 1 .   B ac k - en d   a n d   f r o n t - en d     Evaluation Warning : The document was created with Spire.PDF for Python.
I n t J   E lec  &   C o m p   E n g     I SS N:  2 0 8 8 - 8708       A n a lyzi n g   b o o ts r a p   a n d   fo u n d a tio n   fo n t - e n d   fr a mewo r ks:  a   co mp a r a tive  s tu d y   ( Ma jid a   La a z ir i )   715   f r o n t - e n d   f r a m e w o r k   o f f er s   p r ef o r m atted   a n d   co n f i g u r ab l ele m e n t s   f o r   th e   co m p o n e n t s   o f   w eb   p ag e:   a.   A   co m p lete  a n d   m a n ip u lab le  la y o u t   b.   Mo d u les co v er in g   all  asp ec t s   an d   cu r r en n ee d s   c.   Stan d ar d   s tates   d.   Mu ltip le  i n ter ac ti v b eh av io r s   e.   A   c u s to m izab le  r esp o n s i v d esig n   W p r esen t b lo w   t h ad v a n ta g es o f   u s in g   f r o n t - en d   f r a m e w o r k   d er iv ed   f r o m   [ 5 ] ,   [ 9 ]   s tu d ies :   1.   T im s a v i n g   I n   th ca s o f   r ea lizatio n   o f   a   n e w   p r o j ec t,  th f r o n t - en d   d ev elo p er   m u s ev al u ate  t h d ev elo p m e n t   ti m b u o f ten   th e   ti m p r ess es.  So   t h an k s   to   t h f r o n t - en d   f r a m e w o r k   t h d ev elo p er   will  n o h a v to   s tar t   f r o m   s cr atch .   R at h er   th a n   e n co d an d   cr ea te   all  t h e   co m p o n en ts   o f   th e   p ag e,   i w i ll  h a v e   th e   tas k   o f   ass e m b l in g   t h p r ef o r m atted   ele m e n ts   a n d   p r o p o s ed   b y   th f r a m e w o r k .   I t ' s   li k eli m in atin g   s tep   in   th e   f r o n t - en d   d ev elo p er   w o r k f lo w.   2.   Stan d ar d izatio n   a n d   p er f o r m a n ce   s ite   d ev elo p ed   u s in g   a   f r am e w o r k   w ill  b e f f icie n b ec au s th e   f r a m e w o r k   is   o p ti m i ze d   f o r   th e   m u ltip le  w eb   b r o w s er s   o f   t h m ar k et.   3.   Scalab ilit y   a n d   u p d ate   T h f r a m e w o r k   i s   r eg u lar l y   u p d ated   to   co m p l y   w it h   t h e   latest  w eb   s ta n d ar d s   b u als o   to   o f f er   r elev an m o d u les  a n d   u p - to - d ate.   Usi n g   f r a m e w o r k ,   w b en ef it  f r o m   s et  o f   b en ef icial   i m p r o v e m e n ts   f o r   th co n s tr u ctio n   an d   i m p le m e n tatio n   o f   w eb s ite  t h at  m u s co m p l y   w it h   t h latest  s tan d ar d s .   4.   Fre an d   Op en   Fro n t - e n d   f r a m e w o r k s   ar ( at  least  c u r r en tl y )   f r ee   a n d   o p en .   T h is   m ea n s   th a th e y   ca n   b u s ed   w it h o u p a y i n g   lice n s a n d   b ein g   ab le  to   m o d if y   t h e m   at   w i ll.  T h is   is   at  least   th ca s e   f o r   B o o ts tr ap   an d   Fo u n d atio n .   5.   R eliab ilit y   T h m o s p o p u lar   f r a m e w o r k s   b y   h u n d r ed s   o f   t h o u s a n d s   o f   d ev elo p er s   w h o   attest  to   th q u alit y   an d   r eliab ilit y   o f   t h to o l.  T h b u g s   ar al m o s n o n - e x is ten t.   I n   s h o r t,  u s i n g   f r a m e w o r k   eli m i n ates  s o m eti m e s   lab o r io u s   s tep   th at  is   to   d esi g n   th v i s u a b ases   o f   t h s ite  a n d   cr ea te  d if f er en m o d u les  o f   ze r o .   I n   ad d itio n   to   s av i n g   ti m e,   it p r o v id es a   p r o v en ,   r o b u s t,  an d   s ca lab le  s tr u ct u r test ed   b y   th o u s a n d s   o f   u s e r s .     2 . 2 .     B o o t s ra p   B o o ts tr ap   T w itter   i s   o n e   o f   th b est  k n o w n   a n d   m o s u s ed   C SS   f r a m e w o r k s   as   s h o w n   in   Fig u r 2 .   I t   w a s   d ev elo p ed   o n   T w i tter   in   2 0 1 0 T h is   f r a m e w o r k   r u n s   o n   g r id   s y s te m   o f   1 2   co lu m n s ,   w i th   4   t y p es   o f   d is p la y s   p o s s ib le  d ep en d in g   o n   t h w id t h   o f   th e   u s er ' s   s cr ee n .   W ca n   ad ap t h ap p ea r an ce   o f   t h s i te  to   t h e   v is i to r ' s   m a ter ial.   T h B o o ts tr ap   o f f er s   co m p o n en t s   ( b u tto n s ,   n av ig at io n   b ar s ,   f o r m ,   . . . )   p r ett y   an d   ea s y   to   in te g r ate.   Si n ce   v er s io n   3 ,   it   i s   to tall y   r esp o n s iv e.   T h ele m en ts   ad a p to   t h w id t h   o f   t h s cr ee n   b y   s lid i n g   o n b elo w   th o t h er   w h e n   t h w id t h   d ec r ea s es.  T h ad ap t atio n   is   also   d o n b y   d if f er en d is p la y   o n   th e   s cr ee n   as   w h av a lr ea d y   s ai d .   I ts   p r e - p r o g r a m m ed   Qu er ie s   m ed ia  ar n o w   i n d is p en s ab l f o r   s m ar tp h o n e s .   T h b o o ts tr ap   s ite  o f f er s   m a n y   e x a m p le s   o f   d ir ec tl y   u s ab le   te m p late s .   B o o ts tr ap   is   a s s o c iated   w ith   t h L es s   p r ep r o ce s s o r ,   lan g u a g th at  o f f er s   m an y   f ea tu r e s ,   s u c h   as  u s i n g   v ar iab les  an d   in c lu d i n g   p o r tio n s   o f   co d e.   I is   th u s   p o s s ib le  to   cu s to m ize  i ts   C SS   f ile  w i th   t h ele m e n ts   an d   th co lo r s   w a n ted .   T h b o o ts tr ap   o f   t w itter   i s   s af b et  in   ter m s   o f   C S S f r a m e w o r k s [ 1 0 ] , [ 1 1 ] .   B o o ts tr ap   o f f er s   :   a.   r esp o n s iv g r id ,   C SS   s t y les  f o r   all  s tan d ar d   HT ML   elem e n t s   ( f o r m ,   b u tto n ,   tex t ,   i m a g . . . )   b.   J S c o m p o n e n ts   s u c h   as d y n a m ic  d r o p - d o w n   lis t s ,   in ter ac tiv n av i g atio n   o r   ca r o u s el   c.   f o n t h at  is   ac t u all y   s et  o f   ico n s .   T h ad v an ta g is   t h at  th ico n s   ar n o i m a g es  b u f o n ts ,   th e y   ar v ec to r ized   an d   th er ef o r al w a y s   s h ar p   o n   all  t y p e s   o f   d ev ice s   [ 3 ] .     2 . 3 .     F o un da t io n   Fo u n d atio n   w a s   cr ea ted   b y   Z UR B   i n   2 0 0 8 .   I t   is   a   f r o n e n d   f r a m e w o r k   th at   co n s is t s   o f   m an y   u s e f u l   to o ls   f o r   cr ea tin g   r esp o n s i v an d   m o b ile  f ir s m o b ile  s ite s .   P r im ar il y   b u i lt  w it h   HT ML ,   C SS ,   a n d   j q u er y ,   Fo u n d atio n   u s e s   m o d er n   tec h n iq u es   an d   p r ac tices,   b u d eg r ad es  d r a m atica ll y   f r o m   I n ter n et   E x p lo r er   8 .   A lt h o u g h   th Fra m e w o r k   i s   m o s co m m o n l y   u s ed   b y   HT ML   an d   C SS   d ev elo p er s ,   th e   d ev elo p er   h as  th e   o p p o r tu n it y   to   tak it s   m ar k s   t h an k s   to   Fo u n d atio n   in   co llab o r atio n   w it h   Sa s s   a n d   R ails .   T h co m p an y   b eh i n d   Fo u n d atio n ,   Z UR B ,   h a s   cr ea ted   r ig o r o u s l y   r e g u la ted   s et  o f   to o ls   f o r   d ev elo p er s .   E ac h   m o d u le  h as  it s   r o le  to   p lay   i n   t h w h o le  f r a m e w o r k ,   b u at  th s a m ti m ca n   f u n ct io n   co m p let el y   i n d ep en d en tl y   o f   th ce n tr a l   lead er s h ip .   W h at  th is   m ea n s   t h en   i s   th at  t h d ev elo p er   ca n   co m b i n an d   co m b in t h f ea tu r es  o f   h i s   cu r r en t   p r o j ec t,  o r   tak s in g le  f ea tu r an d   ad d   it  to   an   o ld e r   p r o ject.   I ca n   ev en   ad d   it  as  f e atu r to   d if f er e n t   Fra m e w o r k .   I n   s u m m ar y ,   t h is   is   m o d er n   f r a m e w o r k   th at   h as  b ee n   w ell   b u ilt   an d   r esp o n d s   to   w id e   v ar iet y   Evaluation Warning : The document was created with Spire.PDF for Python.
                      I SS N :   2 0 8 8 - 8708   I n t J   E lec  &   C o m p   E n g ,   Vo l.  9 ,   No .   1 Feb r u ar y   2 0 1 9   :   7 1 3   -   722   716   o f   u s er s .   I o f f er s   g o o d   s et  o f   f ea tu r es.   I t's   f r ee ,   an d   th er e' s   g r o w i n g   co m m u n it y   o f   p eo p le  to   h elp   th e   d ev elo p er s   if   th e y 'r s t u c k [ 1 0 ] .           Fig u r 2 .   Statis tic  o f   th b o o ts tr ap   an d   f o u n d atio n   f r o n t - e n d   f r a m e w o r k       3.   CO M P ARATI VE   S T UDY B O O T ST RAP   VS   F O UN DA T I O N   W p r esen b elo w   th s i m ila r ities   b et w ee n   th e   t w o   f r a m e w o r k s ,   t h r esu lts   ar b ased   o n   [ 8 ] ,   [ 5 ]   s tu d ie s .     a.   Op en   s o u r ce   : B o th   f r a m e w o r k s   w o r k   u n d er   MI T   licen s e,   w h ich   m ea n s   t h e y   ar f r ee   to   u s an d   ad ap t.   b.   R ea cti v it y   B o o ts tr ap   an d   F o u n d atio n   ar r ea ctiv r i g h o u o f   th b o x .   T h e y   ap p l y   t h " m o b ile  f ir s t"   ap p r o ac h ,   w h ic h   is   d esi g n   m et h o d o lo g y   t h at  in d icate s   t h at  it  is   b est  to   f ir s cr ea te  t h l a y o u f o r   s m a ller   s cr ee n s ,   t h en   ad d   m o r co n te n t a n d   f ea t u r es a s   y o u   g o .   as t h e   s cr ee n   g r o w s .   c.   12 - co lu m n   g r id   s y s t e m   I n   ter m s   o f   f r a m e w o r k s ,   g r id   s y s te m   g i v es  t h d ev elo p er   th p o w er   to   ar r an g e   th eir   w eb s ite  o r   ap p licatio n   as  s h o w n   in   F ig u r e   3   an d   4 .   B o th   f r a m e w o r k s   h a v :   a.   L i n es a n d   co lu m n s   b.   A b ilit y   to   n e s t c o lu m n s   i n   r o w s ,   an d   v ice  v er s a           Fig u r 3 .   B o o ts tr ap   g r id   ex am p le           Fig u r 4 .   Fo u n d atio n   g r id   ex a m p le       Evaluation Warning : The document was created with Spire.PDF for Python.
I n t J   E lec  &   C o m p   E n g     I SS N:  2 0 8 8 - 8708       A n a lyzi n g   b o o ts r a p   a n d   fo u n d a tio n   fo n t - e n d   fr a mewo r ks:  a   co mp a r a tive  s tu d y   ( Ma jid a   La a z ir i )   717   d.   St y lized   C SS   co m p o n e n ts   :   B o o ts tr ap   an d   Fo u n d atio n   in cl u d ad d itio n al  C SS   s t y l es  f o r   d if f er e n t   co m p o n e n t s   o f   t h w eb   p ag e ,   s u c h   as  t y p o g r ap h y ,   tab les,   f o r m s ,   n a v i g atio n   b ar ,   b u tto n s ,   p ag i n atio n ,   lab els,   p r o g r ess   b ar   etc  as sh o w n   i n   Fi g u r e .   5 .           Fig u r 5 .   T h d if f er en t c o m p o n en t s   o f   b o o ts tr ap   an d   f o u n d at io n       T ab le   p r esen t h b asic  c h ar ac ter is tic s   o f   ea ch   Fra m e w o r k ,   d etailed   d escr ip tio n   o f   ea ch   f r a m e w o r k   ca n   b f o u n d   i n   [ 1 2 ] ,   [ 2 ] T ab le   2   p r esen ts   th e   C SS   ch ar ater is tics   f o r   ea ch   f r a m e w o r k T ab le  3   p r esen ts   t h c h ar ater is tic s   r el ated   to   g r id s   an d   t h r esp o n s i v en e s s   o f   ea c h   f r a m e w o r k T ab le  4   p r esen ts   t h e   ch ar ater is tic s   r elate d   to   th u s er   in ter f ac ( UI )   an d   w id g et s   o f   ea ch   f r a m e w o r k .       T ab le  1 .   B o o ts tr ap   an d   Fo u n d atio n   C o m p ar i s o n     B o o t st r a p   F o u n d a t i o n   O w n e d   b y   O r i g i n a l l y   d e v e l o p e d   a t   T w i t t e r   b y   M a r k   O t t o   a n d   Ja c o b   T h o r n t o n ,   n o w   a n   o p e n - so u r c e   p r o j e c t   Z U R B ,   a   w e b   d e v e l o p me n t   c o mp a n y   i n   C a m p b e l l ,   C a l i f o r n i a   S t a n d a r d   d i s t r i b u t i o n   p a c k a g e   i n c l u d e s   R e q u i r e d   C S S   ( 1   m i n i f i e d ,   1   st a n d a r d ,   b o t h   w i t h   . m a p   f i l e s) ;   r e q u i r e d   Jav a S c r i p t   ( 1   m i n i f i e d ,   1   st a n d a r d ) .   F o r me r   t h e me   i i n c o r p o r a t e d   i n   S a ss  f i l e s,   a c t i v a t e d   b y   v a r i a b l e s.  ( G l y p h i c o n s   a r e   n o t   d i st r i b u t e d   w i t h   B o o t st r a p   4 . )   A l s o   c o n t a i n t w o   a d d i t i o n a l   se t o f   C S S   f i l e ( 1   mi n i f i e d ,   1   s t a n d a r d ,   b o t h   w i t h   . m a p   f i l e s) :   b o o t st r a p - g r i d ,   w h i c h   a p p e a r t o   b e   a   f l e x b o x - b a se d   g r i d   sy st e m,  p o ssi b l y   r e d u n d a n t   a t   t h i p o i n t ;   a n d   b o o t st r a p - r e b o o t ,   b a se d   o n   n o r mal i z e . c ss.  A   C D N   i a v a i l a b l e   f o r   st a n d a r d   d i st r i b u t i o n   f i l e s.   F o u r   d i st r i b u t i o n s   :   C o mp l e t e ,   Esse n t i a l ,   C u s t o m,  S a ss .   C o m p l e t e   v e r si o n   i n c l u d e c o mp i l e d   C S S   ( mi n i f i e d   a n d   n o t ) ,   p l u s   c o mp i l e d   Jav a S c r i p t ,   i n c l u d i n g   i n d i v i d u a l   v e n d o r   f i l e s.  Esse n t i a l   i n c l u d e t y p o g r a p h y ,   g r i d ,   R e v e a l ,   a n d   I n t e r c h a n g e   o n l y .   C u s t o m   c a n   b e   c u st o mi z e d   o n   t h e   w e b s i t e   f o r   d o w n l o a d i n g ,   a n d   t h e   d e v e l o p e r   c a n   c h o o se   e l e me n t t o   i n c l u d e   a n d   c h a n g e   a   f e w   v a r i a b l e s.  T h e   S a ss  v e r si o n   c a n   o n l y   b e   d o w n l o a d e d   u si n g   t h e   c o mm a n d   l i n e ,   F o u n d a t i o n   C L I   o r   Y e t i   L a u n c h e r .   A   C D N   i s   a v a i l a b l e   f o r   st a n d a r d   d i st r i b u t i o n   f i l e s.   A d d i t i o n a l   J a v a S c r i p t   l i b r a r i e s re q u i r e d ?     Y e s,  y o u   mu st   d o w n l o a d   o r   l i n k   t o   a   C D N   se p a r a t e l y :   j Q u e r y   3 . 1 . 1   S l i m ,   T e t h e r   1 . 4 . 0 .   F i l e a r e   l i n k e d   t o   j u s t   b e f o r e   e n d   o f   b o d y   e l e me n t .   A l l   d e p e n d e n c i e a r e   b u n d l e d   i n   t h e   d i s t r i b u t i o n .   j Q u e r y   i r e q u i r e d ,   b u t   i t   i p a r t   o f   t h e   d i st r i b u t i o n .   F i l e a r e   l i n k e d   t o   j u st   b e f o r e   e n d   o f   b o d y   e l e me n t .   B r o w s e r   su p p o r t   L a t e st   v e r si o n o f :   C h r o me   ( mac O S ,   W i n d o w s,  i O S   a n d   A n d r o i d ) ,   S a f a r i   ( mac O S   a n d   i O S ) ,   F i r e f o x   ( mac O S ,   W i n d o w s,  A n d r o i d ,   i O S )   ( l a t e st   v e r si o n   o f   F i r e f o x   p l u Ex t e n d e d   S u p p o r t   R e l e a se ) ,   Ed g e   ( W i n d o w s,  W i n d o w 1 0   M o b i l e ) ,   O p e r a   ( mac O S ,   W i n d o w s) ,   A n d r o i d   B r o w s e r   &   W e b V i e w   5 . 0 + ,   W i n d o w 1 0   M o b i l e ,   I n t e r n e t   Ex p l o r e r   1 0 +   L a st   t w o   v e r si o n s o f   C h r o me ,   F i r e f o x ,   S a f a r i ,   O p e r a ,   mo b i l e   S a f a r i ,   I n t e r n e t   E x p l o r e r   mo b i l e ,   a w e l l   a I n t e r n e t   Ex p l o r e r   9 +   a n d   A n d r o i d   b r o w ser 2 . 3 +   I n t e r n e t   Ex p l o r e r   su p p o r t   I n t e r n e t   Ex p l o r e r   1 0   a n d   h i g h e r   ( B o o t st r a p   3   r e c o mm e n d e d   f o r   I n t e r n e t   Ex p l o r e r   8   a n d   9 )   I n t e r n e t   Ex p l o r e r   9   a n d   h i g h e r   O t h e r   b r o w se r   su p p o r t   n o t e s   U n o f f i c i a l l y ,   B o o t st r a p   sh o u l d   l o o k   a n d   b e h a v e   w e l l   e n o u g h   i n   C h r o mi u a n d   C h r o me   f o r   L i n u x ,   F i r e f o x   f o r   L i n u x ,   a n d   I n t e r n e t   Ex p l o r e r   9 ,   t h o u g h   t h e y   a r e   n o t   o f f i c i a l l y   su p p o r t e d .     Jav a S c r i p t :   O u r   p l u g i n u se   a   n u mb e r   o f   h a n d y   EC M A S c r i p t   5   f e a t u r e t h a t   a r e n t   su p p o r t e d   i n   I E8 .   L i c e n se   a n d   c o p y r i g h t   C o d e   a n d   d o c u me n t a t i o n   c o p y r i g h t   ( 2 0 1 1   t o   2 0 1 7 )   o f   t h e   B o o t st r a p   a u t h o r a n d   T w i t t e r ,   I n c .   C o d e   r e l e a se d   u n d e r   t h e   M I T   L i c e n se .   D o c r e l e a sed   u n d e r   C r e a t i v e   C o mm o n s.   M I T   l i c e n se ,   n o   me n t i o n   o f   c o p y r i g h t   Evaluation Warning : The document was created with Spire.PDF for Python.
                      I SS N :   2 0 8 8 - 8708   I n t J   E lec  &   C o m p   E n g ,   Vo l.  9 ,   No .   1 Feb r u ar y   2 0 1 9   :   7 1 3   -   722   718   T ab le  1 .   B o o ts tr ap   an d   Fo u n d atio n   C o m p ar i s o n     B o o t st r a p   F o u n d a t i o n   B u i l d   t o o l s   B o o t st r a p   u se G r u n t   f o r   i t C S S   a n d   J a v a S c r i p t   b u i l d   sy st e m   a n d   Je k y l l   f o r   t h e   w r i t t e n   d o c u me n t a t i o n .   O u r   G r u n t f i l e   i n c l u d e c o n v e n i e n t   me t h o d f o r   w o r k i n g   w i t h   t h e   f r a me w o r k ,   i n c l u d i n g   c o mp i l i n g   c o d e ,   r u n n i n g   t e st s ,   a n d   mo r e .   (   T o   a c c e ss  S a ss  f i l e s ,   y o u   mu st   i n st a l l   u si n g   t h e   c o mm a n d   l i n e ,   t h e   N o d e . j s - p o w e r e d   F o u n d a t i o n   C L I ,   o r   w i t h   i t Y e t i   L a u n c h   a p p l i c a t i o n   ( M a c   o n l y ) .   F o u n d a t i o n   i s   a v a i l a b l e   o n   n p m,  B o w e r ,   M e t e o r ,   a n d   C o mp o se r .   T h e   p a c k a g e   i n c l u d e a l l   o f   t h e   so u r c e   S C S S   a n d   Jav a S c r i p t   f i l e s,  a w e l l   a c o mp i l e d   C S S   a n d   J a v a S c r i p t ,   i n   u n c o mp r e sse d   a n d   c o mp r e sse d   f l a v o r s.”   O t h e r   v e r si o n s o f   F o u n d a t i o n   a r e   a v a i l a b l e   a si mp l e   d o w n l o a d w i t h o u t   u s i n g   t h e s e   t o o l s,   b u t   w i t h o u t   S C S S   f i l e s.       T ab le  2 .   C SS   C o m p ar is o n     B o o t st r a p   F o u n d a t i o n   R e se t   r e b o o t . c ss( _ r e b o o t . sc ss)   n o r mal i z e . c ss   L E S S   Y e s   No   S a ss/ S c ss   Y e s   Y e s       T ab le  3 .   Gr id s   an d   R esp o n s iv en es s   C o m p ar is o n     B o o t st r a p   F o u n d a t i o n   B a se   w i d t h   F l u i d   ( 0 ,   3 4 e m,  4 8 e m,  6 2 e m,  7 5 e m)   F l u i d   ( max - w i d t h   7 5 r e m d e f a u l t )   C o l u mn s   12   1 - i n f i n i t y   ( 1 2   d e f a u l t )   S i n g l e   c o l u mn   c l a ss sy n t a x   .col - xs - 1   .col - sm - 1   .col - md - 1   .col - lg - 1   .col - xl - 1   .small - 1.columns   .medium - 1.columns   .large - 1.columns   .[custom] - 1.columns   C o n t a i n e r   sy n t a x   <div   class="container">   or   <div   class="container - fluid">   < div   class="row">   N e st e d   c o l u mn   sy n t a x   <div   class="row">      <div   class="col - sm - 9">        <div   class="row">          <! --   nested   columns   add   up   to   12   -- >          <div   class="col - xs - 8   col - sm - 6">...</div>          <div   class="col - xs - 4   col - sm - 6">...</div>        </div>      < /div>   </div>   <div   class="row">      <div   class="small - 6   columns">        <div   class="row">          <! --   nested   columns   add   up   to   12   -- >          <div   class="small - 6   columns">...</div>          <div   class="small - 6   columns">...</div>        </div>      </div>   </div>   V isib il it y   c las s s y n ta x   Viewport - based:   .hidden - xs - down   .hidden - sm - down   .hidden - md - down   .hidden - lg - down   .hidden - xl - down   .hidden - xs - up   .hidden - sm - up   .hidden - md - up   .hidden - lg - up   .hidden - xl - up   Screen   Size:   .show - for - medium   .show - for - [custom]   .show - for - medium - only   .show - for - [custom] - only   .hide - for - medium   .hide - for - [custom]   .hide - for - medium - only   .hide - for - [custom] - only     Generic   (CAUTION:   hides   from   Evaluation Warning : The document was created with Spire.PDF for Python.
I n t J   E lec  &   C o m p   E n g     I SS N:  2 0 8 8 - 8708       A n a lyzi n g   b o o ts r a p   a n d   fo u n d a tio n   fo n t - e n d   fr a mewo r ks:  a   co mp a r a tive  s tu d y   ( Ma jid a   La a z ir i )   719   T ab le  3 .   Gr id s   an d   R esp o n s iv en es s   C o m p ar is o n     B o o t st r a p   F o u n d a t i o n     Print - based:   .visible - print - block   .visible - print - inline   .visible - print - inline - block   .hidden - print   screenreaders):   .hide   (display:   none;)   .invisible   (visibility:   hidden;)     Orientation:   .show - for - landscape   .show - for - portrait   .hide - for - landscape   .hide - for - portrait     Accessibility:   .show - for - sr   (hides   visually   only)   .show - on - focus   (for   skip - lin       T ab le  4 .   User   I n ter f ac ( UI )   a n d   W id g ets       B o o t st r a p   F o u n d a t i o n   A l e r t s   Y e s   Y e   C a l l o u t   B r e a d c r u mb s   Y e s   Y e s   B u t t o n s   Y e s   Y e s   C a r o u se l   Y e s   Y e   O r b i t   i s   b a c k   C o l l a p se / A c c o r d i o n   Y e   C o l l a p se   Y e   A c c o r d i o n   D r o p d o w n   Y e s   Y e   D r o p d o w n ,   D r i l l d o w n ,   &   A c c o r d i o n   me n u s   F o r ms   Y e s   Y e s   F o r m V a l i d a t i o n   Y e s   Y e   A b i d e   G r i d s   Y e s   Y e s   I c o n s   Y e s   Y e   w i t h   d o w n l o a d   L a b e l s   Y e s   Y e s   P a g i n a t i o n   Y e s   Y e s   P a n e l s   Y e   n o w   C a r d s   Y e   C a l l o u t   P r o g r e ss b a r s   Y e s   Y e s   R e sp o n s i v e   me d i a   No   Y e   I n t e r c h a n g e   T a b l e s   Y e s   Y e s   T o o l t i p s   Y e s   Y e s       4.   DIS CU SS I O N   O F   R E SU L T S   I n   t h is   s ec tio n   w e   d ep ict  t h e   d if f er en ce s   b et w ee n   B o o ts tr ap   an d   Fo u n d atio n W p r es en ts   tr o u g h   T ab le  5   th m ain   r es u lt s   d er iv ed   f r o m   o u r   s t u d y .       T ab le  5 R esu lts   o f   C o m p ar is o n   C S S   P r e p r o c e sso r   B o t h   F o u n d a t i o n   6   a n d   B o o t st r a p   4   f r a me w o r k s a r e   b a se d   o n   S A S S .   T h e y   b o t h   h a v e   a   g o o d   se t   o f   mi x i n s ,   a   se p a r a t e   p a r a me t e r   sh e e t ,   r e u sa b l e   c o mp o n e n t s,  a n d   so   o n .   Jav a S c r i p t   T h e   B o o t st r a p   4   a n d   F o u n d a t i o n   6   Ja v a S c r i p t   l i b r a r i e a r e   w r i t t e n   o n   ES6 ,   w h i c h   me a n t h a t   t h e   d e v e l l o p p e r   d o e n o t   n e e d   B a b e l   ( o r   a n y   o t h e r   t r a n sp i l e r )   i f   i t   w a n t t o   i n d i v i d u a l l y   i n c l u d e   e a c h   o f   t h e i r   JS   t o o l i n   i t d e v e l o p me n t   p i p e l i n e .   H o w e v e r ,   t h e y   b o t h   h a v e   ES5   t r a n s p i r e d   v e r si o n o f   e a c h   c o mp o n e n t .   S t a b i l i t y   T h e   B o o t sr a p   t e a m   t a k e s t a b i l i t y   a n d   b a c k w a r d   c o m p a t i b i l i t y   se r i o u sl y .   T h e y   u se   S a u c e l a b s'   a u t o mat e d   t e st i n g   t o o l t o   e n su r e   t h a t   e v e r y t h i n g   p a sse a   t e st   b e f o r e   e n g a g i n g   i n   t h e i r   m a i n   b r a n c h .   T h e   r e su l t   i s a   se t   o f   v e r y   st a b l e   t o o l s t h a t   c a n   b e   u se d   a a   d a i l y   d r i v e r .   F o u n d a t i o n ,   o n   t h e   o t h e r   h a n d ,   w a r e l e a se d   a " st a b l e "   a   l i t t l e   o v e r   a   y e a r   a g o .   A t   f i r st   l a u n c h ,   so me   c o mp o n e n t w e r e   u n f i n i sh e d ,   l i k e   A b i d e   ( t h e i r   f o r v a l i d a t i o n   l i b r a r y )   w h i c h   w a c o mp l e t e l y   b r o k e n ,   so   t h e i r   c o l o r   p a l e t t e   se t t i n g s.  F r o m   6   t o   6 . 3 ,   t h e   t e a c h a n g e d   a   n u m b e r   o f   t h i n g b y   mak i n g   so me   se t t i n g o b so l e t e   a n d   i n t r o d u c i n g   t h i n g l i k e   ES 6   t o   6 . 2 .   T h e   o f f c a n v a s   h a b e e n   r e o r g a n i z e d   a n d   t h e   p a r a me t e r s a r e   v e r y   f l e x i b l e   i n   6 . 3 .   S i n c e   F o u n d a t i o n   6   h a b e e n   r e l e a sed ,   i t st a b i l i t y   i n o w   e x c e l l e n t .   T h e   c o mp o n e n t se e t o   b e   w e l l   t e st e d   a n d   t h e   t e a p u b l i s h e s u p d a t e s a l mo st   e v e r y   3 - 4   mo n t h s .               Evaluation Warning : The document was created with Spire.PDF for Python.
                      I SS N :   2 0 8 8 - 8708   I n t J   E lec  &   C o m p   E n g ,   Vo l.  9 ,   No .   1 Feb r u ar y   2 0 1 9   :   7 1 3   -   722   720   T ab le  5 R esu lts   o f   C o m p ar is o n   ( co n tin u e )   C S S   P r e p r o c e sso r   B o t h   F o u n d a t i o n   6   a n d   B o o t st r a p   4   f r a me w o r k s a r e   b a se d   o n   S A S S .   T h e y   b o t h   h a v e   a   g o o d   se t   o f   mi x i n s ,   a   se p a r a t e   p a r a me t e r   sh e e t ,   r e u sa b l e   c o mp o n e n t s,  a n d   so   o n .   G r i d     B o o t st r a p   a n d   F o u n d a t i o n   su p p o r t   r e sp o n si v e   g r i d a n d   f l e x i b l e   b r e a k p o i n t s .   H o w e v e r ,   F o u n d a t i o n   su p p o r t s re sp o n s i v e   g u t t e r s,  w h i c h   a r e   so   e a sy   t o   c o n f i g u r e   a n d   se e m ma g i c a l .   C o l l a p s e d   g u t t e r a r e   a l so   a   t h i n g   i n   F o u n d a t i o n .   T h e   d e v e l o p e r   may   h a v e   o r   r e mo v e   g u t t e r i n   sp e c i f i c   c a se t h a t   d o   n o t   r e q u i r e   t h e si m p l y   b y   a d d i n g   a   c l a ss.   O t h e r   t h i n g l i k e   c e n t e r e d   c o l u mn a n d   b l o c k   g r i d s   ma k e   t h e   F o u n d a t i o n   t h e   w i n n e r   i n   g r i d s .   A f a r   a b a c k w a r d   c o mp a t i b i l i t y   i s   c o n c e r n e d ,   F o u n d a t i o n   a n d   B o o t s t r a p   u se   t h e   sa me   c l a ss   c o n v e n t i o n   a s t h e i r   p r e v i o u s v e r si o n s.   T h i s m a k e t h e   m i g r a t i o n   a p a i n l e ss a s p o ss i b l e .   F l e x b o x   g r i d a r e   a l so   a v a i l a b l e   o n   F o u n d a t i o n   a n d   B o o t st r a p   a a   se p a r a t e   se t t i n g   t h a t   t h e   d e v e l o p e r   c a n   t u r n   o n   /   o f f   b a se d   o n   s u p p o r t   f o r   t h e i r   t a r g e t   b r o w se r .   f o r ms     I n   B o o t st r a p   4 ,   t h e r e   a r e   sp e c i a l   c l a sse f o r   r a d i o a n d   c h e c k b o x e t h a t   w i l l   mak e   t h e m u c h   b e t t e r   t h a n   t h e   d e f a u l t   o n e s o f   t h e   b r o w s e r .   O n l i n e   f o r ms,  v a l i d a t i o n   i c o n s ,   a n d   i c o n   l a b e l s a r e   a l so   v e r y   p o w e r f u l   o n   B o o t st r a p .   F o u n d a t i o n   6   h a s a   s i m p l e r   f o r l a y o u t   t h a t   i s h e a v i l y   d e p e n d e n t   o n   t h e   g r i d .   O n l i n e   f o r ms  d o   n o t   e x i st   i n   t h e   F o u n d a t i o n ,   w h i c h   i a l m o st   mi sse d .   I n   a d d i t i o n ,   p r e d e f i n e d   f i e l d a r e   p r o h i b i t e d   o n   F o u n d a t i o n ,   so   t h e   d e v e l o p e r   mu st   r e l y   o n   e x t e r n a l   C S S   t o   j u st i f y   i t se l e c t i o n   b o x e s,  r a d i o   b u t t o n s a n d   c h e c k b o x e s.   M e n u s     W h i l e   B o o t st r a p   4   h a t h e   same   o l d   d r o p - d o w n   l i st s ,   t a b s,  a n d   b a s i c   n a v i g a t i o n   me n u t h a t   w e   l e a r n e d   f r o v e r si o n   3 ,   F o u n d a t i o n   h a d r a m a t i c a l l y   i mp r o v e d   t h e i r   d r o p - d o w n   l i st b y   i n c l u d i n g   o t h e r   v a r i a t i o n s   t h a t   m i g h t   b e   u se f u l   i n   so me   c a se .   B r o w s e r   su p p o r t     B o t h   f r a me w o r k su p p o r t   t h e   f o l l o w i n g   b r o w se r s :   C h r o me   ( M a c ,   W i n d o w s,  i O S   a n d   A n d r o i d ) ,   S a f a r i   ( M a c   a n d   i O S   o n l y ) ,   F i r e f o x   ( M a c   a n d   W i n d o w s)   a n d   O p e r a   ( M a c   a n d   W i n d o w s) .   H o w e v e r ,   t h e r e   i s a   sl i g h t   d i f f e r e n c e   w i t h   r e g a r d   t o   I n t e r n e t   Ex p l o r e r   -   B o o t st r a p   su p p o r t I E8   a n d   n e w e r   v e r si o n s,  w h i l e   F o u n d a t i o n   st a r t s a t   I E9   p l u n e w e r   v e r si o n s.   C S S   p r e p r o c e sso r s   B o o t st r a p   i n c l u d e S A S S   a n d   L ESS   f i l e s,  w h i c h   me a n t h a t   i t   c a n   b e   u se d   i n   a p p l i c a t i o n s t h a t   u se   o n e   o f   t h e se   C S S   p r e p r o c e sso r s.  O n   t h e   o t h e r   h a n d ,   F o u n d a t i o n   o n l y   su p p o r t s SA S S .       Af ter   th co m p ar ati v s t u d y   o f   th t w o   f r o n t - en d   f r a m e w o r k s   B o o ts tr ap   an d   f o u n d atio n ,   w s ee   t h at   ea ch   f r a m e w o r k   h a s   its   o w n   f ea tu r es  an d   b en e f its   a n d   th c h o ice  b et w ee n   th e s t w o   f r a m e w o r k s   d ep en d s   o n   th n ee d s   o f   th d ev e lo p er ' s   web   ap p licatio n .   T o   h elp   th d ev e lo p er   ch o o s th r i g h f r a m e w o r k   f o r   th e   d esig n   o f   h is   p r o j ec t,  w p r esen t   th e   m a in   ad v an ta g es  o f   ea c h   f r a m e w o r k :   th f ir s t o n is   B o o ts tr ap :   a.   Ma s s i v co m m u n it y   s u p p o r t:   Giv e n   th h u g p o p u lar it y   o f   B o o ts tr ap ,   t h er is   lar g co m m u n it y   u s i n g   th Fra m e w o r k .   T h er ef o r e ,   if   th e   d ev elo p er   h a s   a   q u es tio n   ab o u t   B o o ts tr ap ,   h i s   m o r lik e l y   to   f i n d   q u ick l y   an   a n s w er .   Fu r t h er ,   th er ar m o r tu to r ials   a s   w ell  a s   f u ll c o u r s e s   o n   h o w   to   u s B o o ts tr ap .   b.   Oth er   th e m es  a v ailab le:   B ec au s o f   its   p o p u lar it y ,   th er ar o th er   B o o ts tr ap   th em e s .   T h is   m ea n s   th a if   t h e   d ev elo p er   u s es a   p latf o r m   lik e   W o r d P r ess   an d   is   lo o k in g   f o r   th e m to   u s e,   t h is   m i g h t b a   b etter   o p tio n .   c.   B etter   b r o w s er   co m p atib ilit y   d.   C an   u s L es s   o r   Sas s   Ma n y   p r o f ess io n al   w eb s ite s   h av e   u s ed   B o o ts tr ap   to   cr ea te  eleg a n a n d   f u n ctio n al  p a g es .   Am o n g   th e m :   Ne w s w ee k Vo g u e   a n d   L y f t .   W p r esen t tr o u g h   Fi g u r 6 ,   th s tatis tic s   ab o u t t h u s o f   th i s   f r a m e w o r k .           Fig u r 6 .   B o o ts tr ap   p o p u lar   w eb s ite         Evaluation Warning : The document was created with Spire.PDF for Python.
I n t J   E lec  &   C o m p   E n g     I SS N:  2 0 8 8 - 8708       A n a lyzi n g   b o o ts r a p   a n d   fo u n d a tio n   fo n t - e n d   fr a mewo r ks:  a   co mp a r a tive  s tu d y   ( Ma jid a   La a z ir i )   721   L i k e w is e,   w p r ese n t t h ad v a n tag e s   o f   Fo u n d atio n   Fra m e wo r k :   a.   Mo r th an   o n d esi g n   ap p r o ac h   b y   t h d e v elo p er :   Fo u n d atio n   p r o v id es   b etter   e n v ir o n m e n t   f o r   cu s to m izi n g   t h w eb   s ite.   A l t h o u g h   it  is   p o s s ib le  to   cu s to m ize  w it h   B o o ts tr ap ,   it  tak es  lo o f   ef f o r f o r   th d ev elo p er   s ite  to   lo o k   lik o th er   B o o ts tr ap   s ites .   W ith   Fo u n d atio n ,   th d etac h ed   C SS   d esi g n   is   a   lig h t w ei g h t d esig n   a n d   th d ev elo p er   d o es n o t h av to   p u t a   l o t o f   ef f o r t i n to   cu s to m izi n g   it .   b.   Fo u n d atio n   d o es  n o n ee d   to   ad d   class es  to   b r esp o n s iv o r   h av ce r tai n   s t y le:   I f   t h d ev elo p er   d o es  n o t   ad d   th co r r ec C SS   c lass es  with   B o o ts tr ap ,   th ef f ec ts   d o   n o ap p ea r .   W ith   Fo u n d atio n ,   t h er ar b u ilt - i n   b asic  C SS   ap p ea r an ce s .   So m m a y   p r ef er   th is ,   esp ec iall y   s in ce   t h er w il n o b as  m u c h   C SS   i n   its   HT ML .   c.   Mo r f ea tu r e s   o f   th e   g r id   s y s te m :   Ma n y   p r ef er   t h Fo u n d atio n   g r id   s y s te m   b ec a u s t h e y   f i n d   it  o f f er s   m o r f le x ib ilit y .   So m ad d itio n al  ab ilit ie s   :   1.   T h ab ilit y   to   ce n ter   co lu m n s   2.   T h d ev elo p er   ca n   ad d   " co ll ap s e"   class   th at  allo w s   h i m   to   ea s il y   ed it  co l u m n s   a n d   r e m o v g u tter s .   3.   C an   u s b lo ck   g r id   t h at  allo w s   y o u   to   cr ea te  co lu m n s   o f   e q u al  s ize  w it h   m in i m al  m ar k u p .   d.   Oth er   b u ilt - i n   w id g ets:   W it h   r e g ar d   to   ad d itio n al  co m p o n en ts   an d   J ex ten s io n s ,   B o o ts tr ap   an d   Fo u n d atio n   ar b asicall y   eq u a l .   Her ar s o m ex tr th at  Fo u n d atio n .   1.   Fo r m   v alid atio n ,   A b id :   HT ML 5   f o r m   v alid at io n   lib r ar y   2.   Me n u s   o f f   ca n v as :  t h d ev elo p er   ea s il y   p lace s   th n a v ig at io n   o f   h is   s i te  o n   th s id o f   h i s   s ite   3.   P r icin g   tab les  :   r ea d y - to - u s e   tab le,   d esig n ed   to   d is p la y   th p r ices  o f   p r o d u ct  b y   s u b s cr ip tio n   R esp o n s iv m ed ia   4.   R ea cti v m ed ia,   e x c h an g e   t h w eb s ite   lo ad s   d if f er en t   m e d ia  f o r   d if f er en d e v ices  s cr ee n   s ize s ,   s o   th at  t h d ev elo p er   ca n   cu s to m i ze   th u s er   ex p er ien ce   5.   Su p p o r f r o m   r i g h t   to   lef :   t h d ev elo p er   th d ir ec tio n   o f   t h te x I d ea f o r   s i tes  i n   o th er   lan g u a g es   w h er ch ar ac ter s   m o v f r o m   r i g h t to   le f t   6.   Sit es  u s i n g   Fo u n d atio n   as  s h o w n   i n   Fi g u r 7 :   J u s lik e   B o o ts tr ap ,   Fo u n d atio n   i s   u s ed   b y   b ig   n a m e s .   Am o n g   t h e m :   P B S Natio n al  Geo g r ap h ic T h W ash in g to n   an d   P o s tMo zilla .               Fig u r 7 .   Fo u n d atio n   p o p u lar   w eb s i te       5.   CO NCLU SI O N   Usi n g   f r o n t - e n d   f r a m e w o r k   is   g r ea f o r   p eo p le  w h o   w a n to   cr ea te  c o n ten q u ic k l y ,   o r   at  least  n o t   d o in g   it  f r o m   s cr atc h .   W ith o u d o u b t,  th u s o f   f r o n t - e n d   f r a m e w o r k   f ac ilit at es  th w o r k   o f   th e   d ev elo p er .   Ma n y   w eb   s ites   u s B o o ts tr ap   an d   Fo u n d ati o n   b ec au s th e y   ca n   b o th   m ee t h n ee d s   o f   d ev elo p er s ,   an d   to   ch o o s th r ig h f r a m e w o r k .   I n   t h is   co n te x th is   p ap er   p r o v id ed   d etailed   an al y s is   o f   t h es e   t w o   f r a m e w o r k s ,   to   en h a n ce   th p r o ce s s   o f   f r a m e w o r k s   s e lectio n .   T h r esu lts   o f   th i s   co n tr ib u tio n   p r o v id e   g u id eli n e s   to   f r o n t - e n d   d ev el o p er s   to   s elec th ap p r o p r iate  f r a m e w o r k   b ased   o n   t h f r am e w o r k   p o p u lar it y t h ac ti v d ev elo p m e n o f   t h f r a m e w o r k f r a m e w o r k   m at u r it y f r a m e w o r k   d o cu m e n tat i o n ,   an d   f i n all y   t h lev el  o f   s p ec i f icit y   o f   t h f r a m e w o r k .               Evaluation Warning : The document was created with Spire.PDF for Python.
                      I SS N :   2 0 8 8 - 8708   I n t J   E lec  &   C o m p   E n g ,   Vo l.  9 ,   No .   1 Feb r u ar y   2 0 1 9   :   7 1 3   -   722   722   RE F E R E NC E S     [1 ]   D.  R.   L a k sh m a n d   S .   S .   M a ll ik a ,   A   Re v ie w   o n   W e b   A p p li c a ti o n   T e stin g   a n d   it Cu rre n Re se a rc h   Dire c ti o n s,”   In ter n a t io n a J o u rn a o E lec trica a n d   C o mp u ter   En g in e e rin g   ( IJ ECE ) ,   v o l.   7 ,   n o .   4 ,   p .   2 1 3 2 ,   2 0 1 7 .   [2 ]   W .   D.  Cletu s,  A .   K a k a n d a r,   a n d   C.   N.  P a u l ,   Re sp o n siv e   W e b   D e sig n   F ra m e w o rk s :  A   R e v ie w ,   In t.   J .   S c i.   Res .   Co mp u t .   S c i .   En g .   In f.   T e c h n o l. ,   v o l.   4 ,   n o .   5 ,   p p .   1 3 2 1 3 6 ,   2 0 1 7 .   [3 ]   W .   Co m p u ter,  Re sp o n siv e   W e b   De sig n   W it h   Bo o tstrap ,   v o l.   5 ,   n o .   4 ,   p .   2 7 4 ,   2 0 1 6 .   [4 ]   N.  Ja in ,   Re v iew   o f   Di ff e re n Re sp o n siv e   CS S   F r o n t - En d   F ra m e wo rk s,”   J .   Glo b .   Res .   Co m p u t.   S c i . ,   v o l.   5 ,   n o .   1 1 ,   p p .   5 1 0 ,   2 0 1 4 .   [5 ]     In tro d u c ti o n   a u x   f ra m e w o rk s   f ro n t - e n d   (B o o tstrap ,   F o u n d a ti o n   a lt icre a ti o n .   [ O n li n e ] .   A v a il a b le:   h tt p s:/ /www . a lt icre a ti o n . c o m /b o o tstrap - f o u n d a ti o n - f ra m e w o r k s - f ro n t - e n d /.     [6 ]   S .   S u b ra m a n ia m ,   S . - C.   Ha w ,   a n d   P .   K.  Ho o n g ,   Brid g in g   X M L   a n d   Re latio n a Da tab a se s:  A n   E ffe c ti v e   M a p p in g   S c h e m e   b a se d   o n   P e rsiste n L a b e li n g ,   In ter n a ti o n a l   J o u r n a l   o f   El e c trica a n d   C o mp u ter   En g i n e e rin g   ( IJ ECE ) v o l.   2 ,   n o .   2 ,   p p .   2 3 9 2 4 6 ,   2 0 1 1 .   [7 ]   S .   K.  P a tel,   Re sp o n siv e   W e b   De sig n   w it h   A n g u larJ S ,   p .   1 4 2 ,   2 0 1 4 .   [8 ]   N.  Ed a n ,   A .   A l - sh e rb a z ,   a n d   S .   T u rn e r,   De sig n   a n d   I m p le m e n t   a   H y b rid   Web RT S ig n a ll in g   M e c h a n ism   f o Un id irec ti o n a &   Bi - d irec ti o n a l   Vid e o   C o n f e re n c in g ,   v o l.   8 ,   n o .   1 ,   p p .   3 9 0 3 9 9 ,   2 0 1 8 .   [9 ]   L e m e il leu rs  f ra m e w o rk CS S   p o u c e u n   site  w e b   p ro f e ss io n n e l.   |   Ou ti ls - w e b . f r.   [ On li n e ].   A v a il a b le:  h tt p : // o u ti ls - w e b . f r/l e s - m e il leu rs - fra m e w o rk s - c ss - pour - c re e r - un - site - w e b - p ro f e s sio n n e l/ .     [1 0 ]   COMP A RA IS ON   EN T RE  L ES   F RA M EW ORK   F RON T - END  BOO T S T R A P   ET   F ON DA T IO |   S UP INFO,   Éco le S u p é rieu re   d ’I n f o rm a ti q u e .   [ On l in e ] .   A v a il a b le:  h tt p s: // ww w . su p in f o . c o m /article s/sin g le/4 9 0 3 - c o m p a ra iso n - f ra m e w o rk - f ro n t - e n d - b o o tstrap - f o n d a t io n .   [1 1 ]   T u to riel  Bo o tstrap  :  les   p re m ier p a -   1 & a m p ;1 .   [ On li n e ] .   A v a il a b le:  h tt p s:/ /www . 1 a n d 1 . f r/d ig it a lg u id e /sit e s - in tern e t/ d e v e lo p p e m e n t - we b /t u to r iel - b o o tstrap - les - p re m iers - p a s/.    [1 2 ]   Re sp o n siv e   CS S   F ra m e w o rk   Co m p a riso n   |   V e r m il io n   De sig n   +   Dig it a l.   [ O n li n e ] .   A v a il a b le:   h tt p s:/ /www . v e r m il io n . c o m /res p o n siv e - c o m p a riso n /.       Evaluation Warning : The document was created with Spire.PDF for Python.