Upload
others
View
3
Download
0
Embed Size (px)
Citation preview
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