Installation

Here is a list of instructions in order to begin using our digital styleguide.

Download

Before you can begin using our styleguide assets, you must request access by submitting some basic information about your project to our request form. There are two main reasons for the request form, to keep track of all the different projects that are utilizing our code base and so we can keep you up to date as as we release future versions of the style guide.

Request Files

Adding the Assets

Once we provide you with the files you can add our CSS and JS to your project. Once you find a directory for the files in your project you can refer to these files by using <link> and <script> tags in your HTML pages.

CSS

Add the CSS to your <head> element:

<link rel="stylesheet" href="/path/to/your/assets/css/styleguide.css">

Fonts

As outlined in the Font's section of atoms, you must add both our Typekit font family as well as two google font families. You must also add these to the <head> element in your HTML:

<!-- TypeKit include -->
<script src="https://use.typekit.net/bmk6quo.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

<!-- Google Font include -->  
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=La+Belle+Aurore" media="all">

JS

Add the JavaScript library at the very bottom of your page right before the closing </body> tag:

<script src="/path/to/your/assets/js/main.js"></script>

Our JavaScript is written without any external dependancies so you do not need to include libraries such as jQuery in order for it to execute.

Basic Template

A basic template using our style guide files would look like this:

<!doctype html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        
        <!-- TypeKit include -->
        <script src="https://use.typekit.net/bmk6quo.js"></script>
        <script>try{Typekit.load({ async: true });}catch(e){}</script>
        
        <!-- Google Fonts include -->
        <link href="https://fonts.googleapis.com/css?family=La+Belle+Aurore" rel="stylesheet" type="text/css">
        
        <!-- Stylesheet include -->
        <link rel="stylesheet" media="screen" href="/path/to/your/assets/css/styleguide.css">

    </head>
 
    <body>
        
        <!-- JS include -->
        <script src="/path/to/your/assets/js/main.js"></script>
    </body>
</html>

Browser and device support

Our styleguide built with a mobile first approach with a progressive enhancement ideology to give our users the best experience on every device. It was built to work with the most recent and up-to-date web browsers which means that our styles might display differently on older unsupported browsers.

Mobile Devices

Our styleguide supports the latest versions on each platform of major browsers.

	Chrome	Firefox	Safari
Android	Supported	Supported	Supported
iOS	Supported	Supported	Supported

Desktop browsers

The latest versions of major desktop browsers are also supported.

	Chrome	Firefox	Internet Explorer	Microsoft Edge	Safari
Windows	Supported	Supported	Supported	Supported	N/A
Mac	Supported	Supported	N/A	N/A	Supported

On windows, we support Internet Explorer 10 & 11.

Since we use Flexbox for our content structure, website layouts will look different in browsers that do not support it. However, we have installed a Flexbox Polyfill to improve the layout on older browsers.

Need installation help?

Do you have any questions regarding our file structure or setup? Have you noticed any errors with the files that we provided? You can send any issues or questions that you have to our functional mailbox at digital.strategy@countryfinancial.com