Date post: | 04-Jan-2016 |
Category: |
Documents |
Upload: | nathan-morgan |
View: | 232 times |
Download: | 2 times |
Frontend- HTML5- CSS3- Bootstrap 3.x
Semantics
Performance
CSS3
Semantics• <header>, <footer>• <aside>, <navigation>• <article>, <section>
Semantics• <header>, <footer>• <aside>, <navigation>• <article>, <section>
Form• Types: email, url, number, range, date,
search…• Form validation• Required fieldsWYSIWYG• Edit inline ‘ContentEditable’
CSS
Mistakes• Shorthand• Over-Qualifying Selectors• Duplicate CSS3 - http://css3generator.com/• Border radius• Box shadow• Gradient
Complete framework
HTML5 Boilerplate
Bootstrap
Jquery UI
Font-Awesome
Bootstrap 3 – How to buildStep 1: http://www.initializr.com/ Step 2:
http://www.bootstrapzero.com/Step 3: CustomizeStep 4: Testing (responsive)
◦Firefox Web Developer ToolStep 5: Testing (browsers)
◦https://browsershots.org/
Bootstrap 3 - Responsive“Mobile first” = Mobile friendlyDevices
xs sm md lg768px 992px 1200p
x
Bootstrap 3 - Gridhttp://960.gs/ 12 columns“row” class“col-” class“fixed” vs “fluid” width
Bootstrap 3 - FormStyle
◦Basic◦Inline◦Horizontal
Validation states
Bootstrap 3 - ImagesShapes
◦img-rounded◦img-circle◦img-thumbnail
Responsive◦“img-responsive”
Bootstrap 3 - ComponentsIconsNavigation
◦Navs◦Navbar
PaginationThumbnailsAlerts
Bootstrap 3 - JavascriptModalsTabCollapseCarousel