A single static HTML page built to illustrate a responsive nav skeleton with cross-browser and platform compatibilty in mind. Written in vanilla everything.
All scripts are processed on the client-side (in the browser). Requires no server or server-side processing or compiling.
Responsive Behavior in plain CSS. No JS, Libraries, or APIs.
Live Demo: http://alicechuang.com/nerdery/fuzz/
- Pure HTML/CSS/JS, FlexBox
- XMLHttpRequest Object + JSON
- Google Fonts
- FontAwesome
- Vue.js (for placeholder body content only)
Requires no installation. Can be run from any local machine by clicking on html file.
Google Responsive Web Design Patterns - https://developers.google.com/web/fundamentals/design-and-ux/responsive/
CSS Breakpoints - https://medium.freecodecamp.org/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862
W3C Resolutions and Statistics - https://www.w3schools.com/browsers/browsers_display.asp http://viewportsizes.com/
Viewport Testing - Chrome Dev Tools - https://developers.google.com/web/tools/chrome-devtools/
Split between two main categories: Desktops + Laptops or Tablets + Smartphones. Roughly-
- smaller than 500 px (phone)
- larger than 500 px (tablet)
- larger than 600 px (tablet landscape)
- larger than 900 px (laptop, small devices)
- larger than 1000 px (laptop, medium devices)
- larger than 1800px (desktop, large devices)
Flex Row Auto Height + centered
- 12 items
- 800px-1200px
Flex Row Auto Height + left
- 12-24 items
- 800px-1200px
- 24+ items
- 500px-800px
Flex Column + left
- 24+ items
- 800px-1200px
Dropdown + centered
- Mobile
- any number of items
- 600px or less
Great opportunity to use a CSS Pre-Processor SASS or LESS @mixins to set variable values
CSS can be written and organized in many ways given the tools used, situation, and guidelines. My approach, get a barebones down that fits most of what I'm looking for. Then step back, consider re-factoring options. Choose one.
Ended up spending a lot of time doing research on best practices for responsive layout patterns, viewport, resolution, and device best practices, best solutions for css, so did not use an application framework like React.
Design may not look similar but the skeleton is there. Chosen display styles are for ease of reference rather than to translate design.
Design Process - I coded out various menu displays. Played with those to see responsive behaviors. Combined all bevaiors into one master nav.
To see block elements turn on OUTLINE in css line 6.
Not tested across PC but it uses HTML/CSS/JS supported by all platforms and browsers at worst IE11+. (*Must include css prefixes).