Template for a brand or style guide website. Responsive desktop and mobile layout. Built with PHP and AJAX
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
img
js/build
template
.gitignore
Gruntfile.js
README.md
colors.php
component_01.php
component_02.php
component_03.php
component_04.php
component_05.php
component_06.php
component_07.php
component_08.php
component_09.php
component_10.php
elevation.php
index.php
package.json
pattern_01.php
pattern_02.php
pattern_03.php
pattern_04.php
pattern_05.php
pattern_06.php
pattern_07.php
pattern_08.php
pattern_09.php
pattern_10.php
tech_stack.php
type_styles.php

README.md

Style Guide Responsive Layout

This Style Guide is a template for a documentation website for a brand or project. It displays font styles, color palette, web components, pattern recommendations. It is built with AJAX and PHP and is responsive at all device sizes. If JavaScript is disabled the site works as standard HTML.

AJAX

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.

If JavaScript is disabled the site works as standard HTML.

PX to REM Conversion

Users can choose between pixels or rem units. This selection is site-wide and is saved to the browser's local storage. The values are calculated on the fly with JavaScript.

PHP

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.

Responsive Design

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.