Not Bootstrapmashiyat/csc309/Lectures/SemanticUI.pdf · 2016-02-01 · Whatareotheropons? •...
Transcript of Not Bootstrapmashiyat/csc309/Lectures/SemanticUI.pdf · 2016-02-01 · Whatareotheropons? •...
![Page 1: Not Bootstrapmashiyat/csc309/Lectures/SemanticUI.pdf · 2016-02-01 · Whatareotheropons? • Foundaon*and*Bootstrap*are*also*greatop:ons* • Quite*large*in*comparison* • Materialize*mimics*Android*UI](https://reader033.fdocuments.us/reader033/viewer/2022050213/5f5fc90585cb8e33d375df07/html5/thumbnails/1.jpg)
Not Bootstrap
![Page 2: Not Bootstrapmashiyat/csc309/Lectures/SemanticUI.pdf · 2016-02-01 · Whatareotheropons? • Foundaon*and*Bootstrap*are*also*greatop:ons* • Quite*large*in*comparison* • Materialize*mimics*Android*UI](https://reader033.fdocuments.us/reader033/viewer/2022050213/5f5fc90585cb8e33d375df07/html5/thumbnails/2.jpg)
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!
![Page 3: Not Bootstrapmashiyat/csc309/Lectures/SemanticUI.pdf · 2016-02-01 · Whatareotheropons? • Foundaon*and*Bootstrap*are*also*greatop:ons* • Quite*large*in*comparison* • Materialize*mimics*Android*UI](https://reader033.fdocuments.us/reader033/viewer/2022050213/5f5fc90585cb8e33d375df07/html5/thumbnails/3.jpg)
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
![Page 4: Not Bootstrapmashiyat/csc309/Lectures/SemanticUI.pdf · 2016-02-01 · Whatareotheropons? • Foundaon*and*Bootstrap*are*also*greatop:ons* • Quite*large*in*comparison* • Materialize*mimics*Android*UI](https://reader033.fdocuments.us/reader033/viewer/2022050213/5f5fc90585cb8e33d375df07/html5/thumbnails/4.jpg)
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
![Page 5: Not Bootstrapmashiyat/csc309/Lectures/SemanticUI.pdf · 2016-02-01 · Whatareotheropons? • Foundaon*and*Bootstrap*are*also*greatop:ons* • Quite*large*in*comparison* • Materialize*mimics*Android*UI](https://reader033.fdocuments.us/reader033/viewer/2022050213/5f5fc90585cb8e33d375df07/html5/thumbnails/5.jpg)
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
![Page 6: Not Bootstrapmashiyat/csc309/Lectures/SemanticUI.pdf · 2016-02-01 · Whatareotheropons? • Foundaon*and*Bootstrap*are*also*greatop:ons* • Quite*large*in*comparison* • Materialize*mimics*Android*UI](https://reader033.fdocuments.us/reader033/viewer/2022050213/5f5fc90585cb8e33d375df07/html5/thumbnails/6.jpg)
Concise HTML
Three nicely styled buNons with 5 lines of code
![Page 7: Not Bootstrapmashiyat/csc309/Lectures/SemanticUI.pdf · 2016-02-01 · Whatareotheropons? • Foundaon*and*Bootstrap*are*also*greatop:ons* • Quite*large*in*comparison* • Materialize*mimics*Android*UI](https://reader033.fdocuments.us/reader033/viewer/2022050213/5f5fc90585cb8e33d375df07/html5/thumbnails/7.jpg)
Refined Debugging
With debug set to true, relevant output is shown in the browser console
![Page 8: Not Bootstrapmashiyat/csc309/Lectures/SemanticUI.pdf · 2016-02-01 · Whatareotheropons? • Foundaon*and*Bootstrap*are*also*greatop:ons* • Quite*large*in*comparison* • Materialize*mimics*Android*UI](https://reader033.fdocuments.us/reader033/viewer/2022050213/5f5fc90585cb8e33d375df07/html5/thumbnails/8.jpg)
BuDons
HTML Code
hDp://seman,c-‐ui.com/elements/buDon.html
![Page 9: Not Bootstrapmashiyat/csc309/Lectures/SemanticUI.pdf · 2016-02-01 · Whatareotheropons? • Foundaon*and*Bootstrap*are*also*greatop:ons* • Quite*large*in*comparison* • Materialize*mimics*Android*UI](https://reader033.fdocuments.us/reader033/viewer/2022050213/5f5fc90585cb8e33d375df07/html5/thumbnails/9.jpg)
LoadingBuDons
HTML Code
hDp://seman,c-‐ui.com/elements/buDon.html
Very useful when wai:ng for GET/POST request to return!
![Page 10: Not Bootstrapmashiyat/csc309/Lectures/SemanticUI.pdf · 2016-02-01 · Whatareotheropons? • Foundaon*and*Bootstrap*are*also*greatop:ons* • Quite*large*in*comparison* • Materialize*mimics*Android*UI](https://reader033.fdocuments.us/reader033/viewer/2022050213/5f5fc90585cb8e33d375df07/html5/thumbnails/10.jpg)
Input
Upon Entry
hDp://seman,c-‐ui.com/elements/input.html
A`er Entry
![Page 11: Not Bootstrapmashiyat/csc309/Lectures/SemanticUI.pdf · 2016-02-01 · Whatareotheropons? • Foundaon*and*Bootstrap*are*also*greatop:ons* • Quite*large*in*comparison* • Materialize*mimics*Android*UI](https://reader033.fdocuments.us/reader033/viewer/2022050213/5f5fc90585cb8e33d375df07/html5/thumbnails/11.jpg)
Lists hDp://seman,c-‐ui.com/elements/list.html
Horizontally Aligned
…
No:ce the trend with “ui <insert element name here>”
Ver:cally Aligned
![Page 12: Not Bootstrapmashiyat/csc309/Lectures/SemanticUI.pdf · 2016-02-01 · Whatareotheropons? • Foundaon*and*Bootstrap*are*also*greatop:ons* • Quite*large*in*comparison* • Materialize*mimics*Android*UI](https://reader033.fdocuments.us/reader033/viewer/2022050213/5f5fc90585cb8e33d375df07/html5/thumbnails/12.jpg)
Dropdown hDp://seman,c-‐ui.com/elements/dropdown.html
This won’t work immediately though …
…
![Page 13: Not Bootstrapmashiyat/csc309/Lectures/SemanticUI.pdf · 2016-02-01 · Whatareotheropons? • Foundaon*and*Bootstrap*are*also*greatop:ons* • Quite*large*in*comparison* • Materialize*mimics*Android*UI](https://reader033.fdocuments.us/reader033/viewer/2022050213/5f5fc90585cb8e33d375df07/html5/thumbnails/13.jpg)
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
![Page 14: Not Bootstrapmashiyat/csc309/Lectures/SemanticUI.pdf · 2016-02-01 · Whatareotheropons? • Foundaon*and*Bootstrap*are*also*greatop:ons* • Quite*large*in*comparison* • Materialize*mimics*Android*UI](https://reader033.fdocuments.us/reader033/viewer/2022050213/5f5fc90585cb8e33d375df07/html5/thumbnails/14.jpg)
Plethora of Icons hDp://seman,c-‐ui.com/elements/icon.html
![Page 15: Not Bootstrapmashiyat/csc309/Lectures/SemanticUI.pdf · 2016-02-01 · Whatareotheropons? • Foundaon*and*Bootstrap*are*also*greatop:ons* • Quite*large*in*comparison* • Materialize*mimics*Android*UI](https://reader033.fdocuments.us/reader033/viewer/2022050213/5f5fc90585cb8e33d375df07/html5/thumbnails/15.jpg)
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