Easy to use by creative and technical people
- Replace values for colour, font names, sizes and weights.
- Add and edit CSS Custom Properties (variables.)
- Edit sample style guide pages or add new ones.
Responsive by default
Simple style changes
CSS Custom Properties (variables) provide many of the benefits of a CSS preprocessor without the hassle of installing one and make changing styles quick and simple. Custom properties are supported in Chrome, Firefox, Microsoft Edge, Opera, and Safari. Of course you can use a pre-processor including LESS or Sass or a CSS post processor too.
Link to your own fonts
Inspired Guides come connected to popular Google Fonts, but are easily configured to include Adobe Typekit or self-hosted fonts. They show how to get the most from even the most common typefaces. Follow Adobe’s and Google’s instructions to integrate their fonts. Inspired Guides also include fluid type with calc and vw units to make responsive typography easier to implement than ever.
Compatible with popular frameworks
We’ve removed all dependencies, so you won’t need a framework or any particular software or toolset to make an inspiring style guide. They’re compatible with Bootstrap and Foundation though, so you can easily add components from their latest front-end frameworks into your style guide.
Inspired Guides use Mustache to populate HTML pages and stylesheets with content. Don’t worry about using Mustache, It’s simple and there’s nothing for you to install as it’s included with Inspired Guides.
Browsers and devices
We’ve used up-to-the-minute techniques and technologies including:
- CSS Blend Modes
- CSS Calc
- CSS Custom Properties
- Flexible Box layouts
- Scalable Vector Graphics
- Vh and vh units
They’re compatible with the latest versions of popular web browsers:
- Android Browser 56, February 2017
- Chrome 49, March 2016
- Chrome for Android 57, March 2017
- Edge 15, April 2017
- Firefox 51, January 2017
- Opera 44, March 2017
- Safari 10, September 2016
- Safari & Chrome for iOS 9.3, March 2016