Style Guide Tech
Page contents load dynamically with AJAX. This allows for a persistent nav menu that doesn't reload as the user clicks through content.
AJAX calls are loaded into the browser history to that users can step backward without backing out of the site. The page URL also updates easy copy/paste and bookmarking.
The navigation menu, scripts, CSS, unit switcher, and meta tags are loaded with PHP includes for basic templating.
The nav menu auto-selects the correct nav item based on the content's URL.
This style guide is responsive using flexbox to display the content at any screen size. On wide monitors the nav menu is pinned open by default and sites next to a multi-column spec layout. Below 1200px the nav menu collapses by default and can be opened on hover.
As the screen continues to scale down the content switches to a single column layout and the nav bar moves completely off the screen. On small handheld devices the page header is simplified to prevent overlapping content.
|Grunt||Watch and compile LESS files
Add vendor prefixes
Concatenate CSS to one file