HTML5 Level III Responsive Web Design (RWD) and Front-End Frameworks Session II http://www.profburnett.com

Outline Layout Templates Containers Navigation Tables Lists Forms Images Icons Colors 9/20/2018 Copyright © Carl M. Burnett

Layout Templates 9/20/2018 Copyright © Carl M. Burnett Framework Bootstrap 1 W3C.CSS 15 HTML KickStart Foundation 8 Semantic UI 9 UIKit 6 960 Grid 12-16-24 Col Grid YAML 4 GroundworkCSS 2 Ink 10 Kickoff Metro UI CSS 3.0 9/20/2018 Copyright © Carl M. Burnett

Themes 9/20/2018 Copyright © Carl M. Burnett Framework Bootstrap http://themes.getbootstrap.com/ W3C.CSS http://www.w3schools.com/w3css/w3css_examples.asp HTML KickStart http://www.99lime.com/elements/ Foundation http://foundation.zurb.com/sites/docs/global.html Semantic UI UIKit 960 Grid YAML GroundworkCSS 2 Ink Kickoff Metro UI CSS 3.0 9/20/2018 Copyright © Carl M. Burnett

Containers 9/20/2018 Copyright © Carl M. Burnett Framework Bootstrap Grid system, Jumbotron, Panels, Wells, Modal, Carousel, W3C.CSS http://www.w3schools.com/w3css/w3css_containers.asp HTML KickStart http://www.99lime.com/elements/ Foundation Grid, Modal, Panels, Accordion, Tabs Semantic UI http://semantic-ui.com/elements/container.html UIKit Panel Block Article Comment Utility Flex Cover 960 Grid HTML5 Semantic Elements – With Responsive Grid YAML GroundworkCSS 2 Responsive Text - Placeholder Text Ink http://ink.sapo.pt/ui-elements/grid/#dividing-space Kickoff Metro UI CSS 3.0 9/20/2018 Copyright © Carl M. Burnett

Overlay Navigation Menu Menu, Appbar, Fluent menu, Sidebar Framework Bootstrap Navs, Navbar W3C.CSS http://www.w3schools.com/w3css/w3css_navigation.asp HTML KickStart http://www.99lime.com/elements/ Foundation Overlay Navigation Menu Semantic UI http://semantic-ui.com/collections/menu.html UIKit http://getuikit.com/docs/nav.html 960 Grid YAML http://www.yaml.de/docs/index.html#yaml-navigation GroundworkCSS 2 http://groundworkcss.github.io/groundwork/docs/navigation.html Ink http://ink.sapo.pt/ui-elements/navigation/ Kickoff Metro UI CSS 3.0 Menu, Appbar, Fluent menu, Sidebar 9/20/2018 Copyright © Carl M. Burnett

Tables 9/20/2018 Copyright © Carl M. Burnett Framework Bootstrap http://getbootstrap.com/css/#tables W3C.CSS http://www.w3schools.com/w3css/w3css_tables.asp HTML KickStart http://www.99lime.com/elements/ Foundation Pattern Tap Semantic UI http://semantic-ui.com/collections/table.html UIKit http://getuikit.com/docs/table.html 960 Grid YAML GroundworkCSS 2 Ink http://ink.sapo.pt/ui-elements/tables/ Kickoff Metro UI CSS 3.0 http://metroui.org.ua/tables.html 9/20/2018 Copyright © Carl M. Burnett

Lists 9/20/2018 Copyright © Carl M. Burnett Framework Bootstrap http://getbootstrap.com/components/#list-group W3C.CSS http://www.w3schools.com/w3css/w3css_input.asp HTML KickStart http://www.99lime.com/elements/ Foundation http://zurb.com/library/search?query=list&property=buildingblocks Semantic UI http://semantic-ui.com/elements/list.html UIKit http://getuikit.com/docs/list.html 960 Grid YAML GroundworkCSS 2 Ink http://ink.sapo.pt/ui-elements/typography/#lists Kickoff Metro UI CSS 3.0 http://metroui.org.ua/listview.html 9/20/2018 Copyright © Carl M. Burnett

zurb.com/building-blocks/signup-form Forms Framework Bootstrap http://getbootstrap.com/css/#forms W3C.CSS http://www.w3schools.com/w3css/w3css_input.asp HTML KickStart http://www.99lime.com/elements/ Foundation zurb.com/building-blocks/signup-form Semantic UI http://semantic-ui.com/collections/form.html UIKit http://getuikit.com/docs/form.html 960 Grid YAML http://www.yaml.de/docs/index.html#yaml-forms GroundworkCSS 2 http://groundworkcss.github.io/groundwork/docs/forms.html Ink http://ink.sapo.pt/ui-elements/forms/ Kickoff Metro UI CSS 3.0 http://metroui.org.ua/inputs.html 9/20/2018 Copyright © Carl M. Burnett

http://www.99lime.com/elements/ (Use Font Awesome) Icons Framework Bootstrap http://getbootstrap.com/components/#glyphicons W3C.CSS http://www.w3schools.com/w3css/w3css_icons.asp HTML KickStart http://www.99lime.com/elements/ (Use Font Awesome) Foundation http://zurb.com/building-blocks/foundation-icon-font-styles Semantic UI http://semantic-ui.com/elements/icon.html UIKit Icon, Badge 960 Grid (Use Font Awesome) YAML GroundworkCSS 2 http://groundworkcss.github.io/groundwork/docs/icons.html Ink http://ink.sapo.pt/ui-elements/typography/#labels-and-badges Kickoff Metro UI CSS 3.0 http://metroui.org.ua/font.html 9/20/2018 Copyright © Carl M. Burnett

Colors 9/20/2018 Copyright © Carl M. Burnett Framework Bootstrap Contextual colors W3C.CSS http://www.w3schools.com/w3css/w3css_colors.asp HTML KickStart http://www.99lime.com/elements/ Foundation Global Styles Semantic UI http://semantic-ui.com/usage/theming.html UIKit 960 Grid YAML GroundworkCSS 2 Ink Kickoff Metro UI CSS 3.0 http://metroui.org.ua/colors.html 9/20/2018 Copyright © Carl M. Burnett

Student Exercise 1. Continue designing your website.   •  Develop Site Navigation   •  Develop Page Layout   •  Create or Find Textual Content for Web Pages   •  Create or Find Graphical Content for Web Pages   •  Create or Find Other Media Content for Web Pages   •  Determine Information to be Collected from Site Users   •  Design Form to Collect Information from Site Users 2. Review frameworks available that Meet Your Site Requirements. 3. Begin narrowing down Framework to be Selected. 9/20/2018 Copyright © Carl M. Burnett

Review Layout Templates Containers Navigation Tables Lists Forms Images Icons Colors 9/20/2018 Copyright © Carl M. Burnett