HTML 5 Level III Responsive Web Design RWD

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

Outline �Layout Templates �Containers �Navigation �Tables �Lists �Forms �Images �Icons �Colors 9/25/2020 Copyright ©

Frameworks Selected 9/25/2020 Name Bootstrap Nancy X W 3 C. CSS Jean X Heather

Layout Templates Framework Layout Templates Bootstrap 1 W 3 C. CSS 15 HTML Kick. Start 1 Foundation 8 Semantic UI 9 UIKit 6 960 Grid 12 -16 -24 Col Grid YAML 4 Groundwork. CSS 2 4 Ink 10 Kickoff 1 Metro UI CSS 3. 0 4 9/25/2020 Copyright © Carl M. Burnett 4

Themes Framework Bootstrap http: //themes. getbootstrap. com/ W 3 C. CSS http: //www. w 3 schools. com/w 3 css_examples. asp HTML Kick. Start http: //www. 99 lime. com/elements/ Foundation http: //foundation. zurb. com/sites/docs/global. html Semantic UI UIKit 960 Grid YAML Groundwork. CSS 2 Ink Kickoff Metro UI CSS 3. 0 9/25/2020 Copyright © Carl M. Burnett 5

Containers Framework Bootstrap Grid system, Jumbotron, Panels, Wells, Modal, Carousel, W 3 C. CSS http: //www. w 3 schools. com/w 3 css_containers. asp HTML Kick. Start http: //www. 99 lime. 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 HTML 5 Semantic Elements – With Responsive Grid YAML HTML 5 Semantic Elements – With Responsive Grid Groundwork. CSS 2 Responsive Text - Placeholder Text Ink http: //ink. sapo. pt/ui-elements/grid/#dividing-space Kickoff HTML 5 Semantic Elements – With Responsive Grid Metro UI CSS 3. 0 HTML 5 Semantic Elements – With Responsive Grid 9/25/2020 Copyright © Carl M. Burnett 6

Navigation Framework Bootstrap Navs, Navbar W 3 C. CSS http: //www. w 3 schools. com/w 3 css_navigation. asp HTML Kick. Start http: //www. 99 lime. 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 Groundwork. CSS 2 http: //groundworkcss. github. io/groundwork/docs/navigation. html Ink http: //ink. sapo. pt/ui-elements/navigation/ Kickoff Metro UI CSS 3. 0 9/25/2020 Menu, Appbar, Fluent menu, Sidebar Copyright © Carl M. Burnett 7

Tables Framework Bootstrap http: //getbootstrap. com/css/#tables W 3 C. CSS http: //www. w 3 schools. com/w 3 css_tables. asp HTML Kick. Start http: //www. 99 lime. com/elements/ Foundation Pattern Tap Semantic UI http: //semantic-ui. com/collections/table. html UIKit http: //getuikit. com/docs/table. html 960 Grid YAML Groundwork. CSS 2 Ink http: //ink. sapo. pt/ui-elements/tables/ Kickoff Metro UI CSS 3. 0 9/25/2020 http: //metroui. org. ua/tables. html Copyright © Carl M. Burnett 8

Lists Framework Bootstrap http: //getbootstrap. com/components/#list-group W 3 C. CSS http: //www. w 3 schools. com/w 3 css_input. asp HTML Kick. Start http: //www. 99 lime. 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 Groundwork. CSS 2 Ink http: //ink. sapo. pt/ui-elements/typography/#lists Kickoff Metro UI CSS 3. 0 9/25/2020 http: //metroui. org. ua/listview. html Copyright © Carl M. Burnett 9

Forms Framework Bootstrap http: //getbootstrap. com/css/#forms W 3 C. CSS http: //www. w 3 schools. com/w 3 css_input. asp HTML Kick. Start http: //www. 99 lime. 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 Groundwork. CSS 2 http: //groundworkcss. github. io/groundwork/docs/forms. html Ink http: //ink. sapo. pt/ui-elements/forms/ Kickoff Metro UI CSS 3. 0 9/25/2020 http: //metroui. org. ua/inputs. html Copyright © Carl M. Burnett 10

Icons Framework Bootstrap http: //getbootstrap. com/components/#glyphicons W 3 C. CSS http: //www. w 3 schools. com/w 3 css_icons. asp HTML Kick. Start http: //www. 99 lime. 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 (Use Font Awesome) Groundwork. CSS 2 http: //groundworkcss. github. io/groundwork/docs/icons. html Ink http: //ink. sapo. pt/ui-elements/typography/#labels-and-badges Kickoff (Use Font Awesome) Metro UI CSS 3. 0 http: //metroui. org. ua/font. html 9/25/2020 Copyright © Carl M. Burnett 11

Colors Framework Bootstrap Contextual colors W 3 C. CSS http: //www. w 3 schools. com/w 3 css_colors. asp HTML Kick. Start http: //www. 99 lime. com/elements/ Foundation Global Styles Semantic UI http: //semantic-ui. com/usage/theming. html UIKit 960 Grid YAML Groundwork. CSS 2 Ink Kickoff Metro UI CSS 3. 0 9/25/2020 http: //metroui. org. ua/colors. html Copyright © Carl M. Burnett 12