Not Bootstrap

What  is  Seman,c  UI?

• Framework  providing  basic  front-­‐end  styling  and  func:onality  • Uses  Html,  CSS,  Javascript    

 • Uses  a  Grid  System    • Uses  JQUERY  

• Mobile  Friendly!  

What  are  other  op,ons?

• Founda:on  and  Bootstrap  are  also  great  op:ons  • Quite  large  in  comparison  

• Materialize  mimics  Android  UI  • S:ll  in  its  infancy  stage  

So  why  are  we  going  with  Seman,c  UI?

Seman&c  UI  •  Smaller  project  to  work  with  • BeNer  organized  (docs,  tutorials)  •  Friendliest  for  novices  •  Syntac:cally  light  •  Easier  to  fully  understand  internals  •  Style  is  newer  and  “edgy”  

Bootstrap  • Very  large  project  •  Lots  of  various  files  to  remember  to  include  in  your  project  

• Docs  are  less  novice  friendly  •  Syntac:cally  heavier  by  far  •  Looks  a  bit  dated  

What  can  Seman,c  UI  do?

Anima&ons  • Popups  • Dialogues  • Hovers  •  etc..  

Styling  • Grid  System  • Automa:c  Mobile  View  Adjus:ng  • Colour  variables/Fixed  styles  to  use  •  etc..  

Form  Checking  • Bad  input  •  Error  messages  

Clean  API  

Concise  HTML

Three  nicely  styled  buNons  with  5  lines  of  code  

Refined  Debugging

With  debug  set  to  true,  relevant  output  is  shown  in  the  browser  console  

BuDons  

HTML  Code  

hDp://seman,c-­‐ui.com/elements/buDon.html  

LoadingBuDons  

HTML  Code  

hDp://seman,c-­‐ui.com/elements/buDon.html  

Very  useful  when  wai:ng  for  GET/POST  request  to  return!  

Input  

Upon  Entry  

hDp://seman,c-­‐ui.com/elements/input.html

A`er  Entry  

Lists   hDp://seman,c-­‐ui.com/elements/list.html

Horizontally  Aligned  

…  

No:ce  the  trend  with  “ui  <insert  element  name  here>”  

Ver:cally  Aligned  

Dropdown   hDp://seman,c-­‐ui.com/elements/dropdown.html

This  won’t  work  immediately  though  …  

…  

JQUERY  ini,aliza,on

• Modules  •  For  things  like  dropdowns,  accordions,  dimmers  you  need  to  ini:alize  them  

For  a  dropdown  we  do:   The  Segngs  tab  provides  an  API  in  which  we  can  pass  parameters/segngs  through  to  the  dropdown  upon  ini:aliza:on  

Plethora  of  Icons   hDp://seman,c-­‐ui.com/elements/icon.html  

Theming hDp://seman,c-­‐ui.com/elements/theming.html  

•  You  can  create  your  own  themes  by  instruc:ons  below  

• Or  you  can  download  themes  and  use/manipulate  them  to  your  liking