1Adecco Styleguide and Code Standards 2016
How do I make an 1adecco styleguide and code standards 2016?
What is a 1adecco styleguide and code standards 2016? How do you make a 1adecco styleguide and code standards 2016? This script and codes were developed by Elena [chwat] Wiener on 08 September 2022, Thursday.
1Adecco Styleguide and Code Standards 2016 Previews
1Adecco Styleguide and Code Standards 2016 - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>1Adecco Styleguide and Code Standards 2016</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://cd-adecco-fr-dev.adecco.net/Includes/Public/stylesheets/cms.css'>
<link rel='stylesheet prefetch' href='http://cd-adecco-fr-dev.adecco.net/~/media/adeccogroup/brands/adecco%20global%202016/assets/css/theme-adecco-uk.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="c44 c54 container-fluid"> <!-- Table of contents --> <div class="table-contents"> <div> <table class="c25"> <tbody> <tr class="c52"> <td class="c45" colspan="2" rowspan="1"> <p class="c1 c3 c12 c59 subtitle" ><span class="c60 c43 c20"></span></p> </td> <td class="c9" colspan="1" rowspan="1"> <p class="c1 c3 c41 c12 c61 subtitle" id="h.f5jbq7ljyseu"><span class="c43 c20 c60"></span></p> </td> </tr> </tbody> </table> <p class="c1 c3 c12"><span class="c55"></span></p> <p class="c1 c3 c12"><span class="c55"></span></p> <p class="c1 c3 c12"><span class="c55"></span></p> </div> <p class="c1 c19 title" id="h.p1kv1bmz525o"> <span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 132.25px; height: 71.00px;"> <img src="https://mug0.assets-yammer.com/mugshot/images/x100/FggzhkVcVC3Rrl6L6k1Cxpsq05G5HDrC?allow_upscale=false" style="width: 132.25px; height: 71.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"> </span> </p> <p class="c1 c19 title" id="h.z4vd0fbxcq6q"> <span class="c8 c56">Adecco Front End Guide <br /><em>May 2016</em></span> </p> <p class="c1 c41 subtitle" id="h.pz9lu4ldxxn2"> <span>CMS Front End Team | Coding Standards & Styleguide</span> </p> <hr style="page-break-before:always;display:none;"> <h2 class="c1" id="h.fanogkbl7r3b"> <span>Table of Contents</span> <span class="c8"> </span> <span class="c7">——————————————————————————————</span> </h2> <ol class="c35 lst-kix_zaoy60g0yiw4-0 start" start="1"> <li class="c1 c14 c29 c36 c30"> <span class="c7">1.0</span> <h2 id="h.kkozdee39ofn" style="display:inline"><span>Introduction</span></h2></li> </ol> <ol class="c35 lst-kix_zaoy60g0yiw4-1 start" start="1"> <li class="c4 c1"> <span class="c7"><strong>1.1</strong></span> <span class="c20">Goals</span> </li> <ol class="c35 lst-kix_zaoy60g0yiw4-2 start" start="1"> <li class="c1 c14 c46 c36 c30"> <span>"Brand-Analogous" Markup</span> </li> </ol> <li class="c4 c1"> <span class="c7"><strong>1.2</strong></span> <span class="c20">Browser Support & Testing</span> </li> <li class="c4 c1"> <span class="c7"><strong>1.3</strong></span> <span class="c20">Resources</span> </li> </ol> <ol class="c35 lst-kix_zaoy60g0yiw4-0" start="2"> <li class="c1 c14 c29 c36 c30"> <span class="c7">2.0</span> <h2 id="h.em6tz1ckd12c" style="display:inline"><span>Standards</span></h2> </li> </ol> <ol class="c35 lst-kix_zaoy60g0yiw4-1 start" start="1"> <li class="c4 c1"> <span class="c7"><strong>2.1</strong></span> <span class="c20">Naming Conventions</span> </li> </ol> <ol class="c35 lst-kix_zaoy60g0yiw4-2 start" start="1"> <li class="c1 c14 c46 c36 c30"> <span>BEM</span> </li> <li class="c1 c14 c46 c36 c30"> <span>Atomic CSS</span> </li> </ol> <ol class="c35 lst-kix_zaoy60g0yiw4-1" start="2"> <li class="c4 c1"> <span class="c7"><strong>2.2</strong></span> <span class="c20">Formatting</span> </li> </ol> <ol class="c35 lst-kix_zaoy60g0yiw4-2 start" start="1"> <li class="c1 c14 c46 c36 c30"><span>OOCSS</span></li> <li class="c1 c14 c46 c36 c30"><span>SMACSS</span></li> <li class="c1 c14 c46 c36 c30"><span>Atomic Design</span></li> </ol> <ol class="c35 lst-kix_zaoy60g0yiw4-0" start="3"> <li class="c1 c14 c29 c30 c36"> <span class="c7">3.0</span> <h2 id="h.y8yotf70lecx" style="display:inline"><span>HTML</span></h2> </li> </ol> <ol class="c35 lst-kix_zaoy60g0yiw4-1 start" start="1"> <li class="c4 c1"> <span class="c7"><strong>3.1</strong></span> <span>Page Structure</span> </li> <li class="c4 c1"> <span class="c7"><strong>3.2</strong></span> <span>General </span><span>Formatting</span> </li> </ol> <ol class="c35 lst-kix_zaoy60g0yiw4-2 start" start="1"> <li class="c1 c14 c46 c36 c30"><span>Self-Closing Elements</span></li> </ol> <ol class="c35 lst-kix_zaoy60g0yiw4-1" start="3"> <li class="c4 c1"> <span class="c7"><strong>3.3</strong></span> <span>Commenting</span> </li> <li class="c4 c1"> <span class="c7"><strong>3.4</strong></span> <span>Performance</span> </li> <li class="c1 c4"> <span class="c7"><strong>3.5</strong></span> <span>Web Fonts</span> </li> <li class="c4 c1"> <span class="c7"><strong>3.6</strong></span> <span>Grouping Classes</span> </li> </ol> <ol class="c35 lst-kix_zaoy60g0yiw4-0" start="4"> <li class="c1 c14 c29 c36 c30"> <span class="c7">4.0</span> <h2 id="h.nvzpyuf2oq5" style="display:inline"> <span>CSS</span></h2> </li> </ol> <ol class="c35 lst-kix_zaoy60g0yiw4-1 start" start="1"> <li class="c4 c1"> <span class="c7"><strong>4.1</strong></span> <span>File Structure</span></li> <li class="c4 c1"> <span class="c7"><strong>4.2</strong></span> <span>General </span><span>Formatting</span></li> <li class="c4 c1"> <span class="c7"><strong>4.3</strong></span> <span>Commenting</span></li> </ol> <ol class="c35 lst-kix_zaoy60g0yiw4-2 start" start="1"> <li class="c1 c14 c36 c30 c46"><span>Section Titles</span></li> <li class="c1 c14 c46 c36 c30"><span>Grouping Declaration Sets</span></li> <li class="c1 c14 c46 c36 c30"><span>Single Declaration Comments</span></li> </ol> <ol class="c35 lst-kix_zaoy60g0yiw4-1" start="4"> <li class="c4 c1"> <span class="c7"><strong>4.4</strong></span> <span>Performance</span></li> <li class="c4 c1"> <span class="c7"><strong>4.5</strong></span> <span>Multi-line CSS</span></li> <li class="c4 c1"> <span class="c7"><strong>4.6</strong></span> <span>Alignment</span></li> <li class="c4 c1"> <span class="c7"><strong>4.7</strong></span> <span>Nesting</span></li> </ol> <ol class="c35 lst-kix_zaoy60g0yiw4-0" start="5"> <li class="c1 c14 c29 c36 c30"> <span class="c7">5.0</span> <h2 id="h.b52mzlnb473h" style="display:inline"><span>Javascript</span></h2> </li> </ol> <ol class="c35 lst-kix_zaoy60g0yiw4-1 start" start="1"> <li class="c4 c1"> <span class="c7"><strong>5.1</strong></span> <span>Formatting</span> </li> </ol> <ol class="c35 lst-kix_zaoy60g0yiw4-0 start" start="1"> <li class="c1 c14 c29 c36 c30"> <span class="c7">6.0</span> <h2 id="h.kkozdee39ofn" style="display:inline"><span>Styles & Examples - <em>Adecco 2016</em></span></h2> </li> </ol> <ol class="c35 lst-kix_zaoy60g0yiw4-1 start" start="1"> <li class="c4 c1"> <span class="c7"><strong>6.1</strong></span> <span class="c20">Text </span> </li> <ol class="c35 lst-kix_zaoy60g0yiw4-2 start" start="1"> <li class="c1 c14 c46 c36 c30"> <span>Site Headers</span> </li> <li class="c1 c14 c46 c36 c30"> <span>Page Text, Font, Links</span> </li> </ol> <li class="c4 c1"> <span class="c7"><strong>6.2</strong></span> <span class="c20">Colors</span> </li> <li class="c4 c1"> <span class="c7"><strong>6.3</strong></span> <span class="c20">Buttons</span> </li> <li class="c4 c1"> <span class="c7"><strong>6.3</strong></span> <span class="c20">Facets</span> </li> <li class="c4 c1"> <span class="c7"><strong>6.3</strong></span> <span class="c20">Lists</span> </li> <li class="c4 c1"> <span class="c7"><strong>6.3</strong></span> <span class="c20">Icons</span> </li> </ol> </div> <!-- / --> <p class="c1 c12"><span></span></p> <p class="c1 c12"><span></span></p> <!-- Introduction --> <div class="introduction"> <h2 class="c1" id="h.xiq0fln7wim0"> <span class="c8">1.0</span><span class="c34"> </span><span>Introduction </span><span class="c7">—————————————————————————————————</span> </h2> <h1 class="c16" id="h.d7c6siica7vj"> <span class="c2">1.1 </span> <span class="c8">Goals</span> </h1> <p class="c1 c42"><span>This document contains the formatting guidelines and best practices for the front-end web development team at Adecco Group. Our goal in creating this document is to have manageable and consistent code that is scalable, flexible, and modular. We want to write:</span></p> <h2 class="c16" id="h.d7c6siica7vj"> <span class="c2">1.1 </span> <span class="c8">"Brand-Analogous" Markup</span> </h2> <p class="c1 c42"><span>At Adecco, we support various Business Units around the world with their own specific website requirements in terms of design, style, colors, page structure, components and more, sharing the same classes and html with different CSS. We are working <em>specifically</em> for <strong>CMS</strong>, which is <strong>global</strong>; all of the stylistic aspects including CSS, Javascript, images, fonts, etc. are within the Design Solution (<em>as well as gulp, node modules/npm etc.</em>) and are applied to <strong>every BU website</strong>.</span></p> <p class="c1 c42"><span> In order to effectively mark up components from the analogous mockup designs to fit all of the separate BUs' websites, there are a few things to keep in mind: <ul> <li><strong>Always</strong> make sure to use the most specific class names when creating new components; with over 200 websites using the styles there are often classes that already exist and you may be affecting a pre-existing element on another page with your new markup.</li> <li><strong>Test</strong> on your local as much as possible before checking in to Global CMS.</li> <li><strong>Do not</strong> markup CSS with the brand-specific colors. You shouldn't ever be using <em>anything but variables.</em> The variables we are using are within this document and can also be found in the Design Solution in the __variables.scss / related files.</li> <li><strong>Do not</strong> define colors with hexidecimal code. Always use the variables, first from global, second from the brand. </li> <li><strong>The Rollout Team</strong> will be handling anything brand-specific in terms of CSS and styling. If a particular BU needs something that differenciates it from the rest the change should not be made in Global CMS -- <em>hand it over to rollout!</em></li> </ul> </span> </p> <p class="c1 c42"> <img src="http://cd-modis-dev.adecco.net/~/media/adeccogroup/brands/modis%20brand/assets/css/img/modis-logo.png?h=40&w=155" alt="" /> <img src="http://cd-juddfarris-test.adecco.net/~/media/adeccogroup/brands/juddfarris%20brand/assets/css/img/judd-farris-logo.png?h=170&w=138" alt="" /> <img src="http://cd-tigeruk-dev.adecco.net/~/media/adeccogroup/brands/tigerstaffing%20brand/uk/css/img/flat-tiger-uk.jpg?h=117&w=159" alt="" /> <img src="http://cd-springprofessional-es-int.adecco.net/~/media/adeccogroup/brands/spring%20professional/assets/media/shared/logo/spring-professional-logo.png?h=51&w=102" alt="" /> <img src="http://www.badenochandclark.it/~/media/adeccogroup/brands/badenochandclark%20brand/assets/media/shared/logos/badenochandclark-logo.png?h=43&w=167" alt="" /> <img src="http://cd-adecco-fr-dev.adecco.net/~/media/adeccogroup/brands/adecco%20global%202016/assets/css/img/adecco-logo.png?h=51&w=205" alt="" /> </p> <h1 class="c16" id="h.3f6j5y6rndsk"> <span class="c2">1.2 </span> <span class="c8">Browser Support</span> </h1> <p class="c1"><span>As a rule of thumb, we support the last three versions of each browser.</span></p> <ul class="c35 lst-kix_12ihmi7fqdkt-0 start"> <li class="c1 c29 c30"><span>Chrome 43+</span></li> <li class="c1 c29 c30"><span>Firefox 40+</span></li> <li class="c1 c29 c30"><span>Safari 7+</span></li> <li class="c1 c29 c30"><span>Internet Explorer 9+</span></li> <li class="c1 c29 c30"><span>iOS 6.0+ (iPhone 5)</span></li> <li class="c1 c29 c30"><span>Android Jelly Bean 4.1+ (Samsung Galaxy S3 / Samsung Note 2)</span></li> </ul> <p class="c1 c12"><span></span></p> <p class="c1"><span>In addition, we should use BrowserStack to our advantage in order to test on a minimum number of devices and browsers, including iPhone, Android, Mac, and PC environments.</span></p> <h1 class="c16" id="h.xd70g6hgn9rx"> <span class="c2">1.3 </span> <span class="c8">Resources</span> </h1> <!-- Links --> <p class="c1"> <span class="c8 c17"> <ul> <li><a class="c40" href="https://www.google.com/url?q=http://cssguidelin.es&sa=D&ust=1462284683972000&usg=AFQjCNEBHvIA3ekAE3iQtCW7HtNEWZG_BQ">CSS Guidelines</a></li> <li><a class="c40" href="https://getbootstrap.com/css/">Bootstrap</a></li> <li><a class="c40" href="https://www.bootstrapcdn.com/">Bootstrap CDN</a> </li> <li><a class="c40" href="http://fontawesome.io/icons/">Font Awesome</a></li> <li><a class="c40" href="https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/">BEM</a> </li> <li><a class="c40" href="https://en.bem.info/methodology/naming-convention/">BEM Naming</a></li> <li><a class="c40" href="http://thesassway.com/beginner/how-to-structure-a-sass-project">SASS Structure</a></li> <li><a class="c40" href="https://smacss.com/">SMACSS</a></li> <li><a class="c40" href="http://dev.london.possible.com/adecco/html/styleguide.html">london.possible Styleguide</a></li> <li><a class="c40" href="http://dev.london.possible.com/adecco/html/">london.possible Adecco Pages / Components</a></li> </ul> </span> </p> <!-- / --> </div> <!-- / --> <hr /> <!-- Standards --> <div class="standards"> <h2 class="c1 c37" id="h.s9x1p0sjw48f"><span class="c8"></span></h2> <h2 class="c1" id="h.eet6je7ykcbb"><span class="c8">2</span><span class="c8">.0</span><span class="c34"> </span><span>Standards</span><span> </span><span class="c7">——————————————————————————————————</span></h2> <h1 class="c16" id="h.buha02fagwbw"><span class="c2">2.1 </span><span class="c8">Naming Conventions </span></h1> <p class="c1 c6"><span class="c32">Strings within classes should be delimited with a hyphen, for example</span><span class="c24"> .page-head {} </span><span class="c32">or </span><span class="c24">.sub-content {}</span><span class="c32">. Camel case and underscores should not be used for regular classes, for example, this is incorrect: </span> <span class="c24">.pageHead {} </span><span class="c32">or </span><span class="c24">.sub_content {}</span><span class="c32">.</span></p> <p class="c1 c6 c12"><span class="c32"></span></p> <p class="c1 c6"><span class="c32">Instead, the BEM naming convention should be used.</span></p> <h2 class="c1" id="h.ukkokibb0882"><span>BEM</span></h2> <p class="c1"><span>BEM is a front-end naming methodology based on using blocks, elements, and modifiers. It provides a naming convention which enables writing cleaner and clearer SASS and HTML. </span></p> <p class="c1 c12"><span></span></p> <p class="c1"><span>BEM splits components’ classes into three groups: Block, Element, and Modifier. Elements are delimited with two (2) underscores (__), and Modifiers are delimited by two (2) hyphens (--). An example of the syntax is:</span></p> <p class="c1 c14"><span class="c26">.</span><span class="c27">job </span><span class="c26">{}</span></p> <p class="c1 c14"><span class="c26">.</span><span class="c27">job__salary </span><span class="c26">{}</span></p> <p class="c1 c14"><span class="c26">.</span><span class="c27">job__salary</span><span class="c26">--</span><span class="c27">monthly </span><span class="c26">{}</span></p> <p class="c1 c14 c12"><span class="c64"></span></p> <p class="c1"><span>When using BEM, be careful not to nest too deep. The goal is not to mimic the DOM, but to make the easier to read the CSS. For example, you shouldn’t have .block__element__element (.card__info__title or .card__info__meta__match). Your classes should always reference back to the main level block, e.g. .card__title, .card__meta, .card__match etc.</span></p> <h2 class="c1" id="h.ckwcg6v131un"><span>Atomic CSS</span></h2> <p class="c1"><span>In order to easy identify the function of each class, use helper classes. For example, any class used as a javascript hook should have the prefix js-. Below are some helper classes used at Adecco:</span></p> <ul class="c35 lst-kix_nult1xyiia-0 start"> <li class="c1 c29 c30"><span>Javascript: js- (for example .js-resize )</span></li> <li class="c1 c29 c30"><span>Google Anatylics: ga- (for example .ga-export )</span></li> <li class="c1 c29 c30"><span>CSS Animations: an- (for example .an-spin )</span></li> <li class="c1 c29 c30"><span>Utility Classes: ut- (for example .ut-w100 )</span></li> <li class="c1 c29 c30"><span>Aria Classes ar- (for example .ar-email )</span></li> </ul> <h1 class="c16" id="h.jj6uqzky3vy"><span class="c2">2.2 </span> <span class="c8">Formatting</span> </h1> <h2 class="c1" id="h.rpk60p1zyl0p"> <span>OOCSS</span></h2> <p class="c1"><span>See this <a href="http://oocss.org/template.html">template</a> for more information.</span></p> <h2 class="c1" id="h.vjyyla8602z1"><span>SMACSS</span></h2> <p class="c1"> <span>At the very core of SMACSS is categorization. By categorizing CSS rules, we begin to see patterns and can define better practices around each of these patterns.</span> <ol> There are five types of categories: <li>Base</li> <li>Layout</li> <li>Module</li> <li>State</li> <li>Theme</li> </ol> For more info on <em>SMACSS</em>, <a href="https://smacss.com/">Click here</a>. </p> <h2 class="c1" id="h.4ewxinmgm2ud"><span>Atomic Design</span></h2> <p class="c1"><span>“Atomic design gives us the ability to traverse from abstract to concrete. Because of this, we can create systems that promote consistency and scalability while simultaneously showing things in their final context. And by assembling rather than deconstructing, we’re crafting a system right out of the gate instead of cherry picking patterns after the fact.”</span></p> <p class="c1">For more information click <a href="http://atomicdesign.bradfrost.com/">here</a></p>
</div>
<!-- / -->
<hr />
<!-- HTML -->
<div class="html"> <h2 class="c1" id="h.dah61k50gybv"> <span class="c8">3.0</span> <span>HTML</span> <span class="c7">————————————————————————————————————</span> </h2> <h1 class="c16" id="h.snx125jndn8h"> <span class="c2">3.1 </span> <span class="c8">Page Structure</span> </h1> <p class="c1 c6"><span class="c32">The following page structure should be followed for all projects and solutions. Stylesheets should always be called in the head section and JavaScript should be called just before the closing body tag. Both should be minified and consolidated into the fewest number of files where possible.</span></p> <p class="c1 c6"><span class="c5"><!doctype html></span></p> <p class="c1 c6"><span class="c18"><html></span></p> <p class="c1 c6"><span class="c0"> </span><span class="c18"><head></span></p> <p class="c1 c6"><span class="c0"> </span><span class="c18"><meta</span><span class="c0"> </span><span class="c5">charset</span><span class="c11">=</span><span class="c23">"utf-8"></span></p> <p class="c1 c6"><span class="c0"> </span><span class="c18"><title></span><span class="c0">This is my page title</span><span class="c18"></title></span></p> <p class="c1 c6"><span class="c0"> </span><span class="c18"><meta</span><span class="c0"> </span><span class="c5">name</span><span class="c11">=</span><span class="c23">"viewport"</span><span class="c0"> </span><span class="c5">content</span> <span class="c11">=</span><span class="c23">"width=device-width"></span></p> <p class="c1 c6"><span class="c0"> </span><span class="c22"><!-- stylesheets --></span></p> <p class="c1 c6"><span class="c0"> </span><span class="c18"><link</span><span class="c0"> </span><span class="c5">rel</span><span class="c11">=</span><span class="c23">"stylesheet"</span><span class="c0"> </span><span class="c5">href</span> <span class="c11">=</span><span class="c23">"css/style.css"></span></p> <p class="c1 c6"><span class="c0"> </span><span class="c18"></head></span></p> <p class="c1 c6"><span class="c18"><body></span></p> <p class="c1 c6"><span class="c0"> </span><span class="c22"><!-- javascripts --></span></p> <p class="c1 c6"><span class="c0"> </span><span class="c18"><script</span><span class="c0"> </span><span class="c5">src</span><span class="c11">=</span><span class="c23">"js/jquery.min.js"</span><span class="c18">></script></span></p> <p class="c1 c6"><span class="c0"> </span><span class="c18"><script</span><span class="c0"> </span><span class="c5">src</span><span class="c11">=</span><span class="c23">"js/plugins.min.js"</span><span class="c18">></script></span></p> <p class="c1 c6"><span class="c0"> </span><span class="c18"></body></span></p> <p class="c1 c6"><span class="c18"></html></span></p> <h1 class="c16" id="h.i58s19imeql8"><span class="c2">3.2 </span><span class="c8">General Formatting</span></h1> <p class="c1"><span>All components should be built without widths and heights. This means that we can let the grid provide the layout and the component can be reused throughout the site in different areas without breaking.</span></p> <p class="c1"><span>The grid system should be separated from all components. The grid is only used for layout. For example:</span></p> <p class="c1 c3"><span class="c18"><div</span><span class="c0"> </span><span class="c5">class</span><span class="c11">=</span><span class="c23">"col-sm-6</span><span class="c0"> </span><span class="c5">interviews</span><span class="c0">"></span></p> <p class="c1 c3"><span class="c0"> </span><span class="c11">... </span></p> <p class="c1 c3"><span class="c18"></div></span></p> <p class="c1 c3"><span class="c0"> </span></p> <p class="c1 c3"><span class="c18"><div</span><span class="c0"> </span><span class="c5">class</span><span class="c11">=</span><span class="c23">"col-sm-6</span><span class="c0">"></span></p> <p class="c1 c3"><span class="c0"> </span><span class="c18"><div</span><span class="c0"> </span><span class="c5">class</span><span class="c11">=</span><span class="c23">"</span><span class="c5">interviews</span> <span class="c23">"></span> </p> <p class="c1 c3"><span class="c0"> </span><span class="c11">...</span></p> <p class="c1 c3"><span class="c0"> </span><span class="c18"></div></span></p> <p class="c1 c3"><span class="c18"></div></span></p> <h2 class="c1" id="h.gg4svkehu684"><span>Self-Closing Elements</span></h2> <p class="c1"> <span>All tags must be properly closed. For tags that are self-closing, the forward slash should have one space preceding it. For example, <br /> is correct and <br/> is incorrect.</span> </p> <h1 class="c16" id="h.fizy48bp55r3"> <span class="c2">3.3 </span> <span>Commenting</span> </h1> <p class="c1"><span>As a best practice, comment everything in your HTML. Use comments to make maintaining and editing code easier, and also to denote information to make it easier for others to edit your code.</span></p> <p class="c1"><span>Always comment the end of an element so make is easier to read. Use the following format</span></p> <p class="c1 c12"><span></span></p> <p class="c1 c3"><span class="c18"><div</span><span class="c0"> </span><span class="c5">class</span><span class="c11">=</span><span class="c23">"container"></span></p> <p class="c1 c3"><span class="c0"> </span><span class="c18"><div</span><span class="c0"> </span><span class="c5">class</span><span class="c11">=</span><span class="c23">"row"></span></p> <p class="c1 c3"><span class="c0"> </span><span class="c18"><div</span><span class="c0"> </span><span class="c5">class</span><span class="c11">=</span><span class="c23">"col-xs-12"></span></p> <p class="c1 c3 c12"><span class="c0"></span></p> <p class="c1 c3"> <span class="c18"><p></span> <span class="c0"> This is a paragraph tag.</span> <span class="c18"></p></span> </p> <p class="c1 c3"><span class="c0"> </span><span class="c18"><p></span><span class="c0"> This is another paragraph tag.</span><span class="c18"></p></span></p> <p class="c1 c3 c12"><span class="c0"></span></p> <p class="c1 c3"><span class="c0"> </span><span class="c18"></div></span><span class="c0"> </span><span class="c22"><!-- / end .col-xs-12 --></span></p> <p class="c1 c3"><span class="c0"> </span><span class="c18"></div></span><span class="c0"> </span><span class="c22"><!-- / end .row --></span></p> <p class="c1 c3"><span class="c18"></div></span><span class="c0"> </span><span class="c22"><!-- / end .container --></span></p> <h1 class="c16" id="h.m2pyhrlg8v22"><span class="c2">3.4 </span><span class="c8">Performance</span></h1> <p class="c1 c6"><span class="c32">DRY, which stands for Don’t Repeat Yourself, is a principle that aims to keep the repetition of key information to a minimum. </span></p> <p class="c1 c6"><span class="c33 c51">In HTML, avoid coding elements twice and hiding on different devices. Instead, CSS should be used to write simple and flexible code. For example, the following is incorrect:</span></p> <p class="c1 c3 c12"><span class="c22"></span></p> <p class="c1 c3"><span class="c22"><!-- Mobile --></span></p> <p class="c1 c3"><span class="c18"><div</span><span class="c0"> </span><span class="c5">class</span><span class="c11">=</span><span class="c23">"col-xs-12 visible-xs"></span></p> <p class="c1 c3"><span class="c0"> </span><span class="c18"><p></span><span class="c0">This is a paragraph tag.</span><span class="c18"></p></span></p> <p class="c1 c3"><span class="c18"></div></span><span class="c0"> </span></p> <p class="c1 c3 c12"><span class="c0"></span></p> <p class="c1 c3"><span class="c22"><!-- Desktop and Tablet --></span></p> <p class="c1 c3"><span class="c18"><div</span><span class="c0"> </span><span class="c5">class</span><span class="c11">=</span><span class="c23">"col-sm-6 hidden-xs"></span></p> <p class="c1 c3"><span class="c0"> </span><span class="c18"><p></span><span class="c0">This is a paragraph tag.</span><span class="c18"></p></span></p> <p class="c1 c3"><span class="c18"></div></span></p> <h1 class="c16" id="h.kh7p57joy9tn"><span class="c2">3.5 </span><span class="c8">Web Fonts</span></h1> <p class="c1"> <span>Google Web Fonts are a popular and easy choice for implementing fonts into your project, with wide browser support. Google's Web Fonts API essentially does the same thing as @font-face, but in a simpler way. To make a Google Web Font work, we need to include a stylesheet and a declaration for the font name. For example, include the stylesheet:</span></p> <p class="c1 c12"><span></span></p> <p class="c1 c3"><span class="c18"><link</span><span class="c0"> </span><span class="c5">href</span><span class="c11">=</span><span class="c23">'https://fonts.googleapis.com/css?family=Merriweather:300'</span><span class="c0"> </span><span class="c5">rel</span> <span class="c11">=</span><span class="c23">'stylesheet'</span><span class="c0"> </span><span class="c5">type</span><span class="c11">=</span><span class="c23">'text/css'></span></p> <p class="c1 c3 c12"><span class="c24"></span></p> <p class="c1 c21"><span class="c33 c51">Then define a style for the selector you want to apply the font to: </span></p> <p class="c1 c12"><span></span></p> <p class="c1 c3"><span class="c0">body {</span></p> <p class="c1 c3"><span class="c0"> font</span><span class="c11">-</span><span class="c0">family</span><span class="c11">:</span><span class="c0"> </span><span class="c23">'Merriweather'</span><span class="c11">,</span><span class="c0"> serif;</span></p> <p class="c1 c3"><span class="c0">}</span></p> <p class="c1 c12"> <span>On this project we are using the following font-family classes for the branded theme styles:</span> <span><p data-height="266" data-theme-id="dark" data-slug-hash="NNEQwQ" data-default-tab="css,result" data-user="ewiener" data-embed-version="2" class="codepen">See the Pen <a href="https://codepen.io/ewiener/pen/NNEQwQ/">NNEQwQ</a> by Elena Wiener (<a href="https://codepen.io/ewiener">@ewiener</a>) on <a href="https://codepen.io">CodePen</a>.</p> <script async src="//assets.codepen.io/assets/embed/ei.js"></script></span> </p> <h1 class="c16" id="h.fkad886k2p1o"> <span class="c2">3.6 </span><span class="c8">Grouping Classes</span> </h1> <p class="c1"><span>In HTML, when writing multiple values in a class attribute, separate them with two spaces. When multiple classes are related to each other, consider grouping them in square brackets. For example:</span></p> <p class="c1 c12"><span></span></p> <p class="c1 c3"><span class="c18"><div</span><span class="c0"> </span><span class="c5">class</span><span class="c11">=</span><span class="c23">" [ cards--flex__item card ] [ is-collapsed js-expander ] "></span></p> <p class="c1 c3"><span class="c0"> </span><span class="c11">...</span></p> <p class="c1 c3"><span class="c18"></div></span></p> <p class="c1 c3 c12"><span class="c0"></span></p> <p class="c1 c3 c12"><span class="c0"></span></p> <p class="c1 c3"><span class="c18"><input</span><span class="c0"> </span><span class="c5">class</span><span class="c11">=</span><span class="c23">" [ form-control input-sm ] [ title ] [ js-resize ]"</span><span class="c0"> </span> <span class="c18">/></span> </p> <p class="c1 c3 c12"><span class="c0"></span></p> <p class="c1 c3 c12"><span class="c0"></span></p> <p class="c1 c3"><span class="c18"><ul</span><span class="c0"> </span><span class="c5">class</span><span class="c11">=</span><span class="c23">" [ nav nav-tabs ] [ wizard__labels flex--stretch ] "></span></p> <p class="c1 c3"><span class="c0"> </span><span class="c11">...</span></p> <p class="c1 c3"><span class="c18"></ul></span></p> <p class="c1 c3 c12"><span class="c24"></span></p> <p class="c1 c12"><span></span></p> <h2 class="c1 c37" id="h.imhuho2bv24s"><span class="c8"></span></h2>
</div>
<!-- / -->
<hr />
<!-- CSS -->
<div class="css"> <h2 class="c1" id="h.8dk8k8xc571f"><span class="c8">4.0</span><span class="c34"> </span><span>CSS</span><span> </span><span class="c7">—————————————————————————————————————</span></h2> <h1 class="c16" id="h.gs9nlu3to658"><span class="c2">4.1 </span><span class="c8">File Structure</span></h1> <p class="c1 c6"><span class="c32">Although there are many ways to structure your file system, we propose the following. When making folders for stylesheets and javascripts, use the most succinct yet understandable naming convention. For example, css vs stylesheets and js vs javascripts. The reason is that the files within these are referenced amongst each other many times and the bytes for the references add up. We should account for performance in every aspect of our development; hence, the folder names should be: css, fonts, img, js.</span></p> <p class="c1 c6 c12"><span class="c32"></span></p> <p class="c1 c3"><span class="c0">src/</span></p> <p class="c1 c3"><span class="c0">|</span></p> <p class="c1 c3"><span class="c11">|-</span><span class="c0"> js/</span></p> <p class="c1 c3"><span class="c0">|</span></p> <p class="c1 c3"><span class="c11">|-</span><span class="c0"> img/</span></p> <p class="c1 c3"><span class="c0">|</span></p> <p class="c1 c3"><span class="c11">|-</span><span class="c0"> fonts/</span></p> <p class="c1 c3"><span class="c0">|</span></p> <p class="c1 c3"><span class="c11">|-</span><span class="c0"> css/</span></p> <p class="c1 c3"><span class="c0"> |</span></p> <p class="c1 c3"><span class="c0"> </span><span class="c11">|-</span><span class="c0"> utilities/</span></p> <p class="c1 c3"><span class="c0"> </span><span class="c11">|</span><span class="c0"> </span><span class="c11">|-</span><span class="c0"> _variables</span><span class="c11">.</span><span class="c0">scss</span></p> <p class="c1 c3"><span class="c0"> </span><span class="c11">|</span><span class="c0"> </span><span class="c11">|-</span><span class="c0"> _mixins</span><span class="c11">.</span><span class="c0">scss</span></p> <p class="c1 c3"><span class="c0"> </span><span class="c11">|</span><span class="c0"> </span><span class="c11">|-</span><span class="c0"> _atomic</span><span class="c11">.</span><span class="c0">scss </span> <span class="c22">// atomic CSS utility classes</span> </p> <p class="c1 c3"><span class="c0"> |</span></p> <p class="c1 c3"><span class="c0"> </span><span class="c11">|-</span><span class="c0"> overrides/</span></p> <p class="c1 c3"><span class="c0"> </span><span class="c11">|</span><span class="c0"> </span><span class="c11">|-</span><span class="c0"> _shame</span><span class="c11">.</span><span class="c0">scss</span></p> <p class="c1 c3"><span class="c0"> |</span></p> <p class="c1 c3"><span class="c0"> </span><span class="c11">|-</span><span class="c0"> libs/</span></p> <p class="c1 c3"><span class="c0"> </span><span class="c11">|</span><span class="c0"> </span><span class="c11">|-</span><span class="c0"> _boostrap</span><span class="c11">.</span><span class="c0">scss</span></p> <p class="c1 c3"><span class="c0"> </span><span class="c11">|</span><span class="c0"> </span><span class="c11">|-</span><span class="c0"> _datepicker</span><span class="c11">.</span><span class="c0">scss</span></p> <p class="c1 c3"><span class="c0"> </span><span class="c11">|</span><span class="c0"> </span><span class="c11">|-</span><span class="c0"> _jqueryui</span><span class="c11">.</span><span class="c0">scss</span></p> <p class="c1 c3"><span class="c0"> |</span></p> <p class="c1 c3"><span class="c0"> </span><span class="c11">|-</span><span class="c0"> elements/</span></p> <p class="c1 c3"><span class="c0"> </span><span class="c11">|</span><span class="c0"> </span><span class="c11">|-</span><span class="c0"> _buttons</span><span class="c11">.</span><span class="c0">scss</span></p> <p class="c1 c3"><span class="c0"> </span><span class="c11">|</span><span class="c0"> </span><span class="c11">|-</span><span class="c0"> _alerts</span><span class="c11">.</span><span class="c0">scss</span></p> <p class="c1 c3"><span class="c0"> </span><span class="c11">|</span><span class="c0"> </span><span class="c11">|-</span><span class="c0"> _typography</span><span class="c11">.</span><span class="c0">scss</span></p> <p class="c1 c3"><span class="c0"> </span><span class="c11">|</span><span class="c0"> </span><span class="c11">|-</span><span class="c0"> _inputs</span><span class="c11">.</span><span class="c0">scss</span></p> <p class="c1 c3"><span class="c0"> |</span></p> <p class="c1 c3"><span class="c0"> </span><span class="c11">|-</span><span class="c0"> blocks</span><span class="c11">/</span><span class="c0"> </span><span class="c22">//components</span></p> <p class="c1 c3"><span class="c0"> </span><span class="c11">|</span><span class="c0"> </span><span class="c11">|-</span><span class="c0"> _search</span><span class="c11">-</span><span class="c0">form</span><span class="c11">.</span> <span class="c0">scss</span> </p> <p class="c1 c3"><span class="c0"> </span><span class="c11">|</span><span class="c0"> </span><span class="c11">|-</span><span class="c0"> _doc</span><span class="c11">-</span><span class="c0">check</span><span class="c11">.</span> <span class="c0">scss</span> </p> <p class="c1 c3"><span class="c0"> </span><span class="c11">|</span><span class="c0"> </span><span class="c11">|-</span><span class="c0"> _pie</span><span class="c11">-</span><span class="c0">chart</span><span class="c11">.</span> <span class="c0">scss</span> </p> <p class="c1 c3"><span class="c0"> </span><span class="c11">|</span><span class="c0"> </span><span class="c11">|-</span><span class="c0"> _scope</span><span class="c11">.</span><span class="c0">scss</span></p> <p class="c1 c3"><span class="c0"> </span><span class="c11">|</span><span class="c0"> </span><span class="c11">|-</span><span class="c0"> _card</span><span class="c11">.</span><span class="c0">scss</span></p> <p class="c1 c3"><span class="c0"> |</span></p> <p class="c1 c3"><span class="c0"> </span><span class="c11">|-</span><span class="c0"> modules/</span></p> <p class="c1 c3"><span class="c0"> </span><span class="c11">|</span><span class="c0"> </span><span class="c11">|-</span><span class="c0"> _header</span><span class="c11">.</span><span class="c0">scss</span></p> <p class="c1 c3"><span class="c0"> </span><span class="c11">|</span><span class="c0"> </span><span class="c11">|-</span><span class="c0"> _footer</span><span class="c11">.</span><span class="c0">scss</span></p> <p class="c1 c3"><span class="c0"> </span><span class="c11">|</span><span class="c0"> </span><span class="c11">|-</span><span class="c0"> _card</span><span class="c11">-</span><span class="c0">matching</span><span class="c11">.</span> <span class="c0">scss</span> </p> <p class="c1 c3"><span class="c0"> </span><span class="c11">|</span><span class="c0"> </span><span class="c11">|-</span><span class="c0"> _navigation</span><span class="c11">.</span><span class="c0">scss</span></p> <p class="c1 c3"><span class="c0"> </span><span class="c11">|</span><span class="c0"> </span><span class="c11">|-</span><span class="c0"> _sidebar</span><span class="c11">.</span><span class="c0">scss</span></p> <p class="c1 c3"><span class="c0"> </span><span class="c11">|</span><span class="c0"> </span><span class="c11">|-</span><span class="c0"> _wizard</span><span class="c11">.</span><span class="c0">scss</span></p> <p class="c1 c3"><span class="c0"> |</span></p> <p class="c1 c3"><span class="c0"> </span><span class="c11">|-</span><span class="c0"> pages/</span></p> <p class="c1 c3"><span class="c0"> </span><span class="c11">|</span><span class="c0"> </span><span class="c11">|-</span><span class="c0"> _pipeline</span><span class="c11">.</span><span class="c0">scss</span></p> <p class="c1 c3"><span class="c0"> </span><span class="c11">|</span><span class="c0"> </span><span class="c11">|-</span><span class="c0"> _index</span><span class="c11">-</span><span class="c0">candidate</span><span class="c11">.</span> <span class="c0">scss</span> </p> <p class="c1 c3"><span class="c0"> </span><span class="c11">|</span><span class="c0"> </span><span class="c11">|-</span><span class="c0"> _match</span><span class="c11">.</span><span class="c0">scss</span></p> <p class="c1 c3"><span class="c0"> |</span></p> <p class="c1 c3"><span class="c0"> </span><span class="c11">|-</span><span class="c0"> states/</span></p> <p class="c1 c3"><span class="c0"> </span><span class="c11">|</span><span class="c0"> </span><span class="c11">|</span><span class="c0"> </span><span class="c11">|-</span><span class="c0"> _states</span> <span class="c11">.</span><span class="c0">scss </span><span class="c22">// is-active, etc</span></p> <p class="c1 c3"><span class="c0"> </span><span class="c11">|</span><span class="c0"> </span><span class="c11">|</span><span class="c0"> </span><span class="c11">|-</span><span class="c0"> _deactivated</span> <span class="c11">.</span><span class="c0">scss </span></p> <p class="c1 c3"><span class="c0"> </span><span class="c11">| </span></p> <p class="c1 c3"><span class="c0"> </span><span class="c11">|-</span><span class="c0"> themes/</span></p> <p class="c1 c3"><span class="c0"> </span><span class="c11">|-</span><span class="c0"> rwp</span><span class="c11">.</span><span class="c0">scss</span></p> <h1 class="c16" id="h.yc2eqgz3iyz"> <span class="c2">4.2 </span> <span class="c8">General Formatting</span> </h1> <p class="c1"><span>One of the simplest ways of writing readable and maintainable code is using proper, consistent formatting. For all CSS, use: </span></p> <ul class="c35 lst-kix_s2fld8gljld0-0 start"> <li class="c1 c29 c30"><span>four (4) space indents or tabs with distance set to 4 spaces;</span></li> <li class="c1 c29 c30"><span>include a single space before the opening brace of a ruleset;</span></li> <li class="c1 c29 c30"><span>for color hex codes, always use 6 values. e.g. #ffffff;</span></li> <li class="c1 c29 c30"><span>use double quotes (no single quotes) consistently e.g. content: “”;</span></li> <li class="c1 c29 c30"><span>don’t specify units for zero values eg margin: 0;</span></li> <li class="c1 c29 c30"><span>include final semicolon in a rule set;</span></li> <li class="c1 c29 c30"><span>separate each ruleset by a blank line and separate each section by 3 blank lines;</span></li> <li class="c1 c29 c30"><span>Never use ID’s in CSS. IDs carry with them a specificity that is too large, causing bloated CSS.</span></li> </ul> <p class="c1"><span>This results in our code appearing identical across platforms.</span></p> <p class="c1"><span>Add CSS through external files, minimizing the number of files, if possible. It should always be in the <head> of the document. Use the <link> tag to include, never the @import. Don’t include styles inline in the document, either in a style tag or on the elements. It’s harder to track down style rules.</span></p> <h2 class="c1" id="h.jeq6vc482enu"><span>!important</span></h2> <p class="c1"><span>The general rule for !important tags is that they should never be used, unless for utility classes where the rule will never change. Don’t use !important tags to trump specificity. If needed for hot-fixes, include all CSS in the </span> <span class="c48">_shame.scss</span><span> partial and refactor the right way when time permits.</span></p> <p class="c1 c42 title" id="h.ayh2m8ohn995"><span class="c2">4.3 </span><span class="c38">Commenting</span></p> <p class="c1"><span>As a best practice, comment everything in your HTML and CSS. Use comments to make maintaining and editing code easier, and also to denote information to make it easier for others to edit your code.</span></p> <h2 class="c1" id="h.fjsgxfkiw43u"><span>Section Titles</span></h2> <p class="c1"><span>Each section of the table of contents should have a corresponding section title. Prefixed with a double hash (</span><span class="c24">##</span><span>) sign, this makes searching for sections easier. Use the following format for titling sections:</span></p> <p class="c1 c12"><span></span></p> <p class="c1 c3"><span class="c22">/* ------------------------------------</span></p> <p class="c1 c3"><span class="c0"> </span><span class="c22">## CARDS</span></p> <p class="c1 c3"><span class="c11">------------------------------------</span><span class="c0"> </span><span class="c11">*/</span></p> <p class="c1 c3 c12"><span class="c0"></span></p> <p class="c1 c3"><span class="c11">.</span><span class="c0">card {</span></p> <p class="c1 c3"><span class="c0"> background</span><span class="c11">-</span><span class="c0">color</span><span class="c11">:</span><span class="c0"> </span><span class="c22">#ffffff;</span></p> <p class="c1 c3"><span class="c0">}</span></p> <h2 class="c1" id="h.55biyfwir2px"><span>Grouping Declaration Sets</span></h2> <p class="c1"><span>When grouping together multiple declarations sets within a section, use the format /* Typography */. For example:</span></p> <p class="c1 c3 c12"><span class="c24"></span></p> <p class="c1 c3"><span class="c22">/* ------------------------------------</span></p> <p class="c1 c3"><span class="c0"> </span><span class="c22">## CARDS</span></p> <p class="c1 c3"><span class="c11">------------------------------------</span><span class="c0"> </span><span class="c11">*/</span></p> <p class="c1 c3 c12"><span class="c0"></span></p> <p class="c1 c3"><span class="c11">.</span><span class="c0">card {</span></p> <p class="c1 c3 c10"><span class="c0">background</span><span class="c11">-</span><span class="c0">color</span><span class="c11">:</span><span class="c0"> $white;</span></p> <p class="c1 c3"><span class="c0"> </span></p> <p class="c1 c3 c12 c10"><span class="c0"></span></p> <p class="c1 c3 c10"><span class="c22">/* Typography */</span></p> <p class="c1 c3 c12"><span class="c0"></span></p> <p class="c1 c3 c10"><span class="c11">&</span><span class="c0">__title {</span></p> <p class="c1 c3 c10"><span class="c0"> color</span><span class="c11">:</span><span class="c0"> $primary</span><span class="c11">-</span><span class="c0">font</span><span class="c11">-</span><span class="c0">color;</span></p> <p class="c1 c3 c10"><span class="c0">}</span></p> <p class="c1 c3 c12 c10"><span class="c0"></span></p> <p class="c1 c3 c10"><span class="c11">&</span><span class="c0">__subtitle {</span></p> <p class="c1 c3 c10"><span class="c0"> color</span><span class="c11">:</span><span class="c0"> $secondary</span><span class="c11">-</span><span class="c0">font</span><span class="c11">-</span><span class="c0">color;</span></p> <p class="c1 c3 c10"><span class="c0">}</span></p> <p class="c1 c3 c12 c10"><span class="c0"></span></p> <p class="c1 c3"><span class="c0"> </span></p> <p class="c1 c3"><span class="c0">}</span></p> <h2 class="c1" id="h.3y7qmsm7hjr"> <span>Single Declaration Comments</span> </h2> <p class="c1"><span>Oftentimes we want to comment on specific declarations (i.e. lines) in a ruleset. If the comments are short, use them inline. </span></p> <p class="c1"><span>Note: For internal design-team, use sass comments ( // comment ), and for external comments visible in the compiled CSS, use CSS comments ( /* comment */ ). </span></p> <p class="c1 c12"><span></span></p> <p class="c1 c12"><span></span></p> <p class="c1 c3"><span class="c0">box a</span><span class="c11">:</span><span class="c0">hover </span><span class="c11">{ </span></p> <p class="c1 c3"><span class="c0"> overflow</span><span class="c11">:</span><span class="c0">hidden</span><span class="c11">;</span><span class="c0"> </span><span class="c22">// overflow:hidden to clear floats - internal comment </span></p> <p class="c1 c3"><span class="c0"> height</span><span class="c11">:</span><span class="c0"> </span><span class="c31">30px</span><span class="c11">;</span><span class="c0"> </span><span class="c22">/* external comment */</span><span class="c0"> </span></p> <p class="c1 c3"><span class="c0">}</span></p> <p class="c1 c3 c12"><span class="c24"></span></p> <p class="c1"><span>If there are multiple, longer comments in a declaration set, </span><span class="c33 c51">we use a kind of reverse footnote.</span></p> <p class="c1 c12"><span class="c33 c51"></span></p> <p class="c1 c3"><span class="c22">/**</span></p> <p class="c1 c3"><span class="c11">*</span><span class="c0"> </span><span class="c31">1.</span><span class="c0"> </span><span class="c18">delegate</span><span class="c0"> layout to wrapper element</span></p> <p class="c1 c3"><span class="c11">*</span><span class="c0"> </span><span class="c31">2.</span><span class="c0"> positioning context </span><span class="c18">for</span><span class="c0"> us to lay </span><span class="c18">our</span> <span class="c0"> nav </span><span class="c18">and</span><span class="c0"> masthead text </span><span class="c18">in</span></p> <p class="c1 c3"><span class="c11">*</span><span class="c0"> </span><span class="c31">3.</span><span class="c0"> </span><span class="c5">Faux</span><span class="c11">-</span><span class="c0">fluid</span><span class="c11">-</span><span class="c0">height technique</span></p> <p class="c1 c3"><span class="c11">*/</span></p> <p class="c1 c3 c12"><span class="c0"></span></p> <p class="c1 c3"><span class="c11">.</span><span class="c0">page</span><span class="c11">-</span><span class="c0">head</span><span class="c11">--</span><span class="c0">masthead {</span></p> <p class="c1 c3"><span class="c0"> </span><span class="c11">.</span><span class="c0">wrapper </span><span class="c11">{</span><span class="c0"> </span><span class="c22">/* [1] */</span></p> <p class="c1 c3"><span class="c0"> position</span><span class="c11">:</span><span class="c0"> relative</span><span class="c11">;</span><span class="c0"> </span><span class="c22">/* [2] */</span></p> <p class="c1 c3"><span class="c0"> padding</span><span class="c11">-</span><span class="c0">top</span><span class="c11">:</span><span class="c0"> </span><span class="c31">56.25</span><span class="c11">%;</span> <span class="c0"> </span><span class="c22">/* [3] */</span></p> <p class="c1 c3"><span class="c0"> }</span></p> <p class="c1 c3"><span class="c0">}</span></p> <h1 class="c16" id="h.due2cp4k0la9"><span class="c2">4.4 </span><span class="c8">Performance</span></h1> <p class="c1 c6"><span class="c32">DRY, which stands for Don’t Repeat Yourself, is a principle that aims to keep the repetition of key information to a minimum. The key isn’t to avoid all repetition in code, but to normalize and abstract meaningful repetition. For example:</span></p> <p class="c1 c6 c12"><span class="c32"></span></p> <p class="c1 c3"><span class="c31">@mixin</span><span class="c0"> </span><span class="c18">font</span><span class="c11">()</span><span class="c0"> {</span></p> <p class="c1 c3"><span class="c0"> font</span><span class="c11">-</span><span class="c0">family</span><span class="c11">:</span><span class="c0"> </span><span class="c23">"Open Sans"</span><span class="c11">,</span><span class="c0"> sans</span> <span class="c11">-</span><span class="c0">serif;</span></p> <p class="c1 c3"><span class="c0"> font</span><span class="c11">-</span><span class="c0">weight</span><span class="c11">:</span><span class="c0"> bold;</span></p> <p class="c1 c3"><span class="c0">}</span></p> <p class="c1 c3 c12"><span class="c0"></span></p> <p class="c1 c3"><span class="c11">.</span><span class="c0">btn {</span></p> <p class="c1 c3"><span class="c0"> display</span><span class="c11">:</span><span class="c0"> </span><span class="c18">inline</span><span class="c11">-</span><span class="c0">block;</span></p> <p class="c1 c3"><span class="c0"> padding</span><span class="c11">:</span><span class="c0"> </span><span class="c31">1em</span><span class="c0"> </span><span class="c31">2em;</span></p> <p class="c1 c3"><span class="c0"> </span><span class="c31">@include</span><span class="c0"> font</span><span class="c11">();</span></p> <p class="c1 c3"><span class="c0">}</span></p> <p class="c1 c3 c12"><span class="c0"></span></p> <p class="c1 c3"><span class="c11">.</span><span class="c0">page</span><span class="c11">-</span><span class="c0">title {</span></p> <p class="c1 c3"><span class="c0"> font</span><span class="c11">-</span><span class="c0">size</span><span class="c11">:</span><span class="c0"> </span><span class="c31">3rem;</span></p> <p class="c1 c3"><span class="c0"> line</span><span class="c11">-</span><span class="c0">height</span><span class="c11">:</span><span class="c0"> </span><span class="c31">1.4;</span></p> <p class="c1 c3"><span class="c0"> </span><span class="c31">@include</span><span class="c0"> font</span><span class="c11">();</span></p> <p class="c1 c3"><span class="c0">}</span></p> <p class="c1 c3 c12"><span class="c0"></span></p> <p class="c1 c3"><span class="c11">.</span><span class="c0">user</span><span class="c11">-</span><span class="c0">profile__title {</span></p> <p class="c1 c3"><span class="c0"> font</span><span class="c11">-</span><span class="c0">size</span><span class="c11">:</span><span class="c0"> </span><span class="c31">1.2rem;</span></p> <p class="c1 c3"><span class="c0"> line</span><span class="c11">-</span><span class="c0">height</span><span class="c11">:</span><span class="c0"> </span><span class="c31">1.5;</span></p> <p class="c1 c3"><span class="c0"> </span><span class="c31">@include</span><span class="c0"> font</span><span class="c11">();</span></p> <p class="c1 c3"><span class="c0">}</span></p> <h1 class="c16" id="h.gwlfm226n8my"> <span class="c2">4.5 </span> <span class="c8">Multi-line </span> <span class="c8">CSS</span> </h1> <p class="c1"><span>CSS should be written across multiple lines, placing one declaration per line in a declaration block. However, in very specific circumstances, such as similar rulesets that only carry one declaration each, you may place CSS on single lines if it increases readability. For example:</span></p> <p class="c1 c12"><span></span></p> <p class="c1 c3"><span class="c11">.</span><span class="c0">icon {</span></p> <p class="c1 c3"><span class="c0"> display</span><span class="c11">:</span><span class="c0"> </span><span class="c18">inline</span><span class="c11">-</span><span class="c0">block;</span></p> <p class="c1 c3"><span class="c0"> width</span><span class="c11">:</span><span class="c0"> </span><span class="c31">16px;</span></p> <p class="c1 c3"><span class="c0"> height</span><span class="c11">:</span><span class="c0"> </span><span class="c31">16px;</span></p> <p class="c1 c3"><span class="c0"> background</span><span class="c11">-</span><span class="c0">image</span><span class="c11">:</span><span class="c0"> url</span><span class="c11">(</span><span class="c23">/img/</span><span class="c0">sprite</span> <span class="c11">.</span><span class="c0">svg</span><span class="c11">);</span></p> <p class="c1 c3"><span class="c0">}</span></p> <p class="c1 c3 c12"><span class="c0"></span></p> <p class="c1 c3"><span class="c11">.</span><span class="c0">icon</span><span class="c11">--</span><span class="c0">home </span><span class="c11">{</span><span class="c0"> background</span><span class="c11">-</span><span class="c0">position</span> <span class="c11">:</span><span class="c0"> </span><span class="c31">0</span><span class="c0"> </span><span class="c31">0</span><span class="c0"> </span><span class="c11">;</span><span class="c0"> }</span></p> <p class="c1 c3"><span class="c11">.</span><span class="c0">icon</span><span class="c11">--</span><span class="c0">person </span><span class="c11">{</span><span class="c0"> background</span><span class="c11">-</span><span class="c0">position</span> <span class="c11">:</span><span class="c0"> </span><span class="c11">-</span><span class="c31">16px</span><span class="c0"> </span><span class="c31">0</span><span class="c0"> </span><span class="c11">;</span><span class="c0"> }</span></p> <p class="c1 c3"><span class="c11">.</span><span class="c0">icon</span><span class="c11">--</span><span class="c0">files </span><span class="c11">{</span><span class="c0"> background</span><span class="c11">-</span><span class="c0">position</span> <span class="c11">:</span><span class="c0"> </span><span class="c31">0</span><span class="c0"> </span><span class="c11">-</span><span class="c31">16px</span><span class="c11">;</span><span class="c0"> }</span></p> <p class="c1 c3"><span class="c11">.</span><span class="c0">icon</span><span class="c11">--</span><span class="c0">settings </span><span class="c11">{</span><span class="c0"> background</span><span class="c11">-</span><span class="c0">position</span> <span class="c11">:</span><span class="c0"> </span><span class="c11">-</span><span class="c31">16px</span><span class="c0"> </span><span class="c11">-</span><span class="c31">16px</span><span class="c11">;</span><span class="c0"> }</span></p> <p class="c1 c3 c12"><span class="c24"></span></p> <p class="c1 c3 c12"><span class="c24"></span></p> <p class="c1"><span>In multi-line CSS each selector should be on its own line, ending in either a comma or an opening curly brace. Property-value pairs should be on their own line, with one tab of indentation and an ending semicolon. The closing brace should be flush left, using the same level of indentation as the opening selector. </span></p> <p class="c1 c12"><span></span></p> <p class="c1 c3"><span class="c22">//CORRECT</span></p> <p class="c1 c3"><span class="c22">#selector-1,</span></p> <p class="c1 c3"><span class="c22">#selector-2,</span></p> <p class="c1 c3"><span class="c22">#selector-3 {</span></p> <p class="c1 c3"><span class="c0"> background</span><span class="c11">-</span><span class="c0">color</span><span class="c11">:</span><span class="c0"> </span><span class="c22">#ddd;</span></p> <p class="c1 c3"><span class="c0"> color</span><span class="c11">:</span><span class="c0"> </span><span class="c22">#626262;</span></p> <p class="c1 c3"><span class="c0">}</span></p> <p class="c1 c3 c12"><span class="c0"></span></p> <p class="c1 c3"><span class="c22">//INCORRECT</span></p> <p class="c1 c3"><span class="c22">#selector-1, #selector-2, #selector-3 {</span></p> <p class="c1 c3"><span class="c0"> background</span><span class="c11">-</span><span class="c0">color</span><span class="c11">:</span><span class="c0"> </span><span class="c22">#ddd; color: #626262; }</span></p> <h1 class="c16" id="h.xylsv2bquov9"><span class="c2">4.6 </span><span class="c8">Alignment</span></h1> <p class="c1"><span>Attempt to align common and related identical strings in declarations. Vendor prefixed rules should be right aligned so their values are aligned. </span></p> <p class="c1 c12"><span></span></p> <p class="c1 c3"><span class="c11">.</span><span class="c0">foo {</span></p> <p class="c1 c3"><span class="c0"> </span><span class="c11">-</span><span class="c0">webkit</span><span class="c11">-</span><span class="c0">border</span><span class="c11">-</span><span class="c0">radius</span><span class="c11">:</span> <span class="c0"> </span><span class="c31">3px;</span></p> <p class="c1 c3"><span class="c0"> </span><span class="c11">-</span><span class="c0">moz</span><span class="c11">-</span><span class="c0">border</span><span class="c11">-</span><span class="c0">radius</span> <span class="c11">:</span><span class="c0"> </span><span class="c31">3px;</span></p> <p class="c1 c3"><span class="c0"> border</span><span class="c11">-</span><span class="c0">radius</span><span class="c11">:</span><span class="c0"> </span><span class="c31">3px;</span></p> <p class="c1 c3"><span class="c0">}</span></p> <p class="c1 c3 c12"><span class="c0"></span></p> <p class="c1 c3"><span class="c11">.</span><span class="c0">bar {</span></p> <p class="c1 c3"><span class="c0"> position</span><span class="c11">:</span><span class="c0"> absolute;</span></p> <p class="c1 c3"><span class="c0"> top</span><span class="c11">:</span><span class="c0"> </span><span class="c31">0;</span></p> <p class="c1 c3"><span class="c0"> right</span><span class="c11">:</span><span class="c0"> </span><span class="c31">0;</span></p> <p class="c1 c3"><span class="c0"> bottom</span><span class="c11">:</span><span class="c0"> </span><span class="c31">0;</span></p> <p class="c1 c3"><span class="c0"> left</span><span class="c11">:</span><span class="c0"> </span><span class="c31">0;</span></p> <p class="c1 c3"><span class="c0"> margin</span><span class="c11">-</span><span class="c0">right</span><span class="c11">:</span><span class="c0"> </span><span class="c11">-</span><span class="c31">10px;</span></p> <p class="c1 c3"><span class="c0"> margin</span><span class="c11">-</span><span class="c0">left</span><span class="c11">:</span><span class="c0"> </span><span class="c11">-</span><span class="c31">10px;</span></p> <p class="c1 c3"><span class="c0"> padding</span><span class="c11">-</span><span class="c0">right</span><span class="c11">:</span><span class="c0"> </span><span class="c31">10px;</span></p> <p class="c1 c3"><span class="c0"> padding</span><span class="c11">-</span><span class="c0">left</span><span class="c11">:</span><span class="c0"> </span><span class="c31">10px;</span></p> <p class="c1 c3"><span class="c0">}</span></p> <p class="c1 c12"><span></span></p> <p class="c1"> <span>This makes life a little easier for developers whose text editors support column editing, allowing them to change several identical and aligned lines in one go.</span> </p> <h1 class="c16" id="h.oigmxby8fa13"> <span class="c2">4.7 </span> <span class="c8">Nesting</span> </h1> <p class="c1"><span>As a rule of thumb, only nest selectors that will compile up to three levels deep. When using & in sass, you may nest more than three levels deep if the compiles CSS results in less than 3 levels. For example:</span></p> <p class="c1 c12"><span></span></p> <p class="c1 c3"><span class="c22">// Incorrect</span></p> <p class="c1 c3"><span class="c11">.</span><span class="c0">card {</span></p> <p class="c1 c3"><span class="c0"> </span><span class="c11">.</span><span class="c0">info {</span></p> <p class="c1 c3"><span class="c0"> </span><span class="c11">.</span><span class="c0">meta {</span></p> <p class="c1 c3 c29 c10"><span class="c0"> </span><span class="c11">.</span><span class="c0">match {</span></p> <p class="c1 c3 c29 c10"><span class="c0"> </span><span class="c11">...</span></p> <p class="c1 c3 c10 c57"><span class="c0">}</span></p> <p class="c1 c3 c29 c10"><span class="c0">}</span></p> <p class="c1 c3 c10"><span class="c0">}</span></p> <p class="c1 c3"><span class="c0">}</span></p> <p class="c1 c3 c12"><span class="c0"></span></p> <p class="c1 c3"><span class="c22">// will compile to </span></p> <p class="c1 c3"><span class="c11">.</span><span class="c0">card </span><span class="c11">.</span><span class="c0">info </span><span class="c11">.</span><span class="c0">meta </span><span class="c11">.</span><span class="c0">match </span> <span class="c11">{</span><span class="c0"> </span><span class="c11">...</span><span class="c0"> }</span></p> <p class="c1 c3 c12"><span class="c0"></span></p> <p class="c1 c3 c12"><span class="c0"></span></p> <p class="c1 c3 c12"><span class="c0"></span></p> <p class="c1 c3"><span class="c22">// Correct</span></p> <p class="c1 c3"><span class="c11">.</span><span class="c0">pipeline {</span></p> <p class="c1 c3"><span class="c0"> </span><span class="c11">&</span><span class="c0">__stage {</span></p> <p class="c1 c3"><span class="c0"> </span><span class="c11">.</span><span class="c18">is</span><span class="c11">-</span><span class="c0">active {</span></p> <p class="c1 c3 c29 c10"><span class="c0"> </span><span class="c11">.</span><span class="c0">count {</span></p> <p class="c1 c3 c57 c10"><span class="c0">}</span></p> <p class="c1 c3 c10 c29"><span class="c0">}</span></p> <p class="c1 c3 c10"><span class="c0">}</span></p> <p class="c1 c3"><span class="c0">}</span></p> <p class="c1 c3 c12"><span class="c0"></span></p> <p class="c1 c3"><span class="c22">// will compile to </span></p> <p class="c1 c3"><span class="c11">.</span><span class="c0">pipeline__stage</span><span class="c11">.</span><span class="c18">is</span><span class="c11">-</span><span class="c0">active </span><span class="c11">.</span><span class="c0">count </span> <span class="c11">{</span><span class="c0"> </span><span class="c11">...</span><span class="c0"> }</span></p>
</div>
<!-- / -->
<hr />
<!-- Javascript -->
<div class="javascript"> <p class="c1 c3 c12"><span class="c8"></span></p> <h2 class="c1" id="h.h53ke02jkrst"><span class="c8">5.0</span><span class="c34"> </span><span>Javascript</span><span> </span><span class="c7">———————————————————————————————————</span></h2> <h1 class="c16" id="h.fynirfpthcmz"><span class="c2">5.1 </span><span class="c8">Formatting</span></h1> <p class="c1"><span> Use semicolons. Always include spaces around elements and arguments to make code more legible, for example:</span></p> <p class="c1 c12"><span></span></p> <p class="c1 c3"><span class="c0">array </span><span class="c11">=</span><span class="c0"> </span><span class="c11">[</span><span class="c0"> a</span><span class="c11">,</span><span class="c0"> b</span><span class="c11">,</span> <span class="c0"> c</span><span class="c11">];</span></p> <p class="c1 c3 c12"><span class="c0"></span></p> <p class="c1 c3"><span class="c0">$</span><span class="c11">(</span><span class="c0"> </span><span class="c23">'p'</span><span class="c0"> </span><span class="c11">).</span><span class="c0">doSomething</span><span class="c11">();</span></p> <p class="c1 c3 c12"><span class="c24"></span></p> <p class="c1"><span>Strings should use single quotes, for example:</span></p> <p class="c1 c12"><span></span></p> <p class="c1 c3"><span class="c18">var</span><span class="c0"> myStr </span><span class="c11">=</span><span class="c0"> </span><span class="c23">'strings should be contained in single quotes';</span></p> <p class="c1 c3 c12"><span class="c24"></span></p> <p class="c1"><span>if, else, for, while, and try blocks should go on multiple lines. For example:</span></p> <p class="c1 c12"><span></span></p> <p class="c1 c3"><span class="c18">var</span><span class="c0"> a</span><span class="c11">,</span><span class="c0"> b</span><span class="c11">,</span><span class="c0"> c;</span></p> <p class="c1 c3 c12"><span class="c0"></span></p> <p class="c1 c3"><span class="c18">if</span><span class="c0"> </span><span class="c11">(</span><span class="c0"> myFunction</span><span class="c11">()</span><span class="c0"> </span><span class="c11">)</span><span class="c0"> {</span></p> <p class="c1 c3"><span class="c0"> </span><span class="c22">// Expressions</span></p> <p class="c1 c3"><span class="c11">}</span><span class="c0"> </span><span class="c18">else</span><span class="c0"> </span><span class="c18">if</span><span class="c0"> </span><span class="c11">(</span><span class="c0"> </span> <span class="c11">(</span><span class="c0"> a </span><span class="c11">&&</span><span class="c0"> b </span><span class="c11">)</span><span class="c0"> </span><span class="c11">||</span><span class="c0"> c </span> <span class="c11">)</span><span class="c0"> {</span></p> <p class="c1 c3"><span class="c0"> </span><span class="c22">// Expressions</span></p> <p class="c1 c3"><span class="c11">}</span><span class="c0"> </span><span class="c18">else</span><span class="c0"> {</span></p> <p class="c1 c3"><span class="c0"> </span><span class="c22">// Expressions</span></p> <p class="c1 c3"><span class="c0">}</span></p> <p class="c1 c3 c12"><span class="c24"></span></p> <p class="c21 c1"><span class="c32">Object declarations should be placed on multiple line.</span></p> <p class="c1 c3"><span class="c18">var</span><span class="c0"> car </span><span class="c11">=</span><span class="c0"> {</span></p> <p class="c1 c3"><span class="c0"> year</span><span class="c11">:</span><span class="c0"> </span><span class="c31">2010,</span></p> <p class="c1 c3"><span class="c0"> color</span><span class="c11">:</span><span class="c0"> </span><span class="c23">'blue',</span></p> <p class="c1 c3"><span class="c0"> manufacturer</span><span class="c11">:</span><span class="c0"> </span><span class="c23">'Nissan' </span></p> <p class="c1 c3"><span class="c11">};</span></p> <p class="c1 c12"><span></span></p> <h2 class="c1" id="h.yb1jk4sz25i"><span>Naming Conventions</span></h2> <p class="c1"><span class="c33 c28">Variable and function names should be full words, using camel case with a lowercase first letter. Names should be descriptive but not excessively so. Exceptions are allowed for iterators, such as the use of </span> <span class="c44 c28 c43">i</span><span class="c33 c28"> to represent the index in a loop. Constructors do not need a capital first letter.</span></p> <p class="c1 c12"><span class="c33 c28"></span></p> <h2 class="c1" id="h.h082h0x46t0v"><span>Spacing</span></h2> <p class="c1"><span class="c44 c28">In general, liberal spacing is encouraged for improved human readability. The minification process creates a file that is optimized for browsers to read and process.</span></p> <h2 class="c1" id="h.uoftsas6mh0p"><span>Multi-line Statements</span></h2> <p class="c1"><span class="c44 c28">When a statement is too long to fit on one line, line breaks must occur after an operator.</span></p> <p class="c1"><span class="c15 c20">var</span><span class="c15"> html = </span><span class="c44 c47">"<p>The sum of "</span><span class="c15"> + a + </span><span class="c44 c47">" and "</span><span class="c15"> + b + </span> <span class="c44 c47">" plus "</span><span class="c15"> + c +</span></p> <p class="c1"><span class="c15"> </span><span class="c44 c47">" is "</span><span class="c15"> + ( a + b + c );</span></p> <p class="c1 c12"><span class="c15"></span></p> <h2 class="c1" id="h.uroc5lyfsl7f"><span>Chained Method Calls</span></h2> <p class="c1"><span class="c15">When a chain of method calls is too long to fit on one line, there must be one call per line, with the first call on a separate line from the object the methods are called on. If the method changes the context, an extra level of indentation must be used. Example:</span></p> <p class="c1"><span class="c28">elements</span></p> <p class="c1"><span class="c28"> .addClass( "foo" )</span></p> <p class="c1"><span class="c28"> .children()</span></p> <p class="c1"><span class="c28"> .html( "hello" )</span></p> <p class="c1"><span class="c28"> .end()</span></p> <p class="c1"><span class="c28"> .appendTo( "body" );</span></p> <p class="c1 c12"><span class="c15"></span></p> <h2 class="c1" id="h.fftoz8albbpx"><span>Full File Closures</span></h2> <p class="c1"><span class="c15">When an entire file is wrapped in a closure, the body of the closure is not indented. Example:</span></p> <p class="c1 c12 c39"><span class="c15"></span></p> <p class="c1 c39"><span class="c40">( </span><span class="c40 c20">function</span><span class="c40">( $ ) {</span></p> <p class="c1 c39"><span class="c53 c48">// This doesn't get indented</span></p> <p class="c1 c39"><span class="c40">} )( jQuery );</span></p> <p class="c1 c12"><span class="c15"></span></p> <p class="c1 c39"><span class="c40">module.exports = </span><span class="c40 c20">function</span><span class="c40">( grunt ) {</span></p> <p class="c1 c39"><span class="c48 c53">// This doesn't get indented</span></p> <p class="c1 c39"><span class="c40">};</span></p> <p class="c1 c12"><span class="c15"></span></p> <h2 class="c1" id="h.fgu5go2z9cw4"><span>Equality</span></h2> <p class="c1"><span class="c33 c28">Strict equality checks (</span><span class="c28 c43">===</span><span class="c33 c28">) must be used in favor of abstract equality checks (</span><span class="c28 c43">==</span><span class="c33 c28">). The </span> <span class="c33 c28 c48">only</span><span class="c33 c28"> exception is when checking for </span><span class="c28 c43">undefined</span><span class="c33 c28"> and </span><span class="c28 c43">null</span><span class="c33 c28"> by way of </span> <span class="c28 c43">null</span><span class="c33 c28">. The use of </span><span class="c28 c43">== null</span><span class="c33 c28"> is also acceptable in cases where only one of </span><span class="c28 c43">null</span><span class="c33 c28"> or </span> <span class="c28 c43">undefined </span><span class="c33 c28">may be logically encountered, such as uninitialized variables.</span></p> <h2 class="c1" id="h.uz8drzne09av"><span>Commenting</span></h2> <p class="c1"><span class="c33 c28">Comments are always preceded by a blank line. Comments start with a capital first letter, but don't require a period at the end, unless you're writing full sentences. There must be a single space between the comment token and the comment text.</span></p>
</div>
<!-- / -->
<!-- Styles and Examples -->
<div class="examples"> <h2 class="c1" id="h.h53ke02jkrst"> <span class="c8">6.0</span> <span class="c34"> </span> <span>Styles & Examples</span> <span> </span> <span class="c7">———————————————————————————————————</span> </h2> <h1 class="c16" id="h.fynirfpthcmz"> <span class="c2">6.1 </span> <span class="c8">Text Styles, Site Titles, Links</span> </h1> <!-- Styles part --> <div> <!-- Text and Links --> <p data-height="600"data-theme-id="dark" data-slug-hash="pyQppy" data-default-tab="css,result" data-user="ewiener" data-embed-version="2" data-editable="true" class="codepen"> See the Pen <a href="https://codepen.io/ewiener/pen/pyQppy/">Styleguide CMS</a> by Elena Wiener (<a href="https://codepen.io/ewiener">@ewiener</a>) </p> <script async src="//assets.codepen.io/assets/embed/ei.js"></script> <!-- / text and links --> <!-- Colors --> <div class="colors"> <h3>Colors</h3> <div class="row"> <ul class="col-xs-6"> <li> <h5>Interface Color Palette</h5> <ul> <li class="red"> $red : #ef2e24;</li> <li class="orange"> $orange : #fff;</li> <li class="yellow"> $yellow : #fff;</li> <li class="green"> $green : #5cb85c;</li> <li class="blue"> $blue : #337ab7;</li> <li class="purple"> $purple : #fff;</li> <li class="pink"> $pink : #de008d;</li> </ul> </li> <li> <h5>Dark, Light</h5> <ul> <li class="d">$d : #141419;</li> <li class="l">$l : #fff; </li> </ul> </li> <li> <h5>States</h5> <ul> <li class="green">$positive : $green;</li> <li class="red">$negative : $red;</li> <li class="neutral">$neutral : lighten($d, 50%);</li> <li class="blue">$active : $blue;</li> <li class="inactive">$inactive : $l;</li> </ul> </li> </ul> <ul class="col-xs-6"> <li> <h5>SASS / Social Media Brand Colors</h5> <ul> <li class="twitter">$twitter: #00aced;</li> <li class="facebook">$facebook: #3b5998;</li> <li class="googleplus">$googleplus: #dd4b39;</li> <li class="pinterest">$pinterest: #cb2027;</li> <li class="linkedin">$linkedin: #007bb6;</li> <li class="youtube">$youtube: #bb0000;</li> <li class="vimeo">$vimeo: #aad450;</li> <li class="tumblr">$tumblr: #32506d;</li> <li class="instagram">$instagram: #517fa4;</li> <li class="flickr">$flickr: #ff0084;</li> <li class="dribbble">$dribbble: #ea4c89;</li> <li class="quora">$quora: #a82400;</li> <li class="foursquare">$foursquare: #0072b1;</li> <li class="forrst">$forrst: #5B9A68;</li> <li class="vk">$vk: #45668e;</li> <li class="wordpress">$wordpress: #21759b;</li> <li class="stumbleupon">$stumbleupon: #EB4823;</li> <li class="yahoo">$yahoo: #7B0099;</li> <li class="blogger">$blogger: #fb8f3d;</li> <li class="soundcloud">$soundcloud: #ff3a00;</li> </ul> </li> </ul> </div> </div> <!-- / Colors --> <!-- Buttons --> <div class="row"> <h3>Button Styles</h3> <div class="col-xs-12"> <button type="button" class="btn btn--red">btn--red</button> <button type="button" class="btn btn--blue">btn--blue</button> <button type="button" class="btn btn--reset">btn-reset</button> <button type="button" class="btn btn--apply">btn--apply</button> <button type="button" class="btn btn--negative">btn--negative</button> <button type="button" class="btn btn--apply-cta">btn--apply-cta</button> <h5>Bootstrap Buttons</h5> <button type="button" class="btn">btn</button> <button type="button" class="btn btn-default">btn-default</button> <button type="button" class="btn btn-success">btn-success</button> <button type="button" class="btn btn-primary">btn-primary</button> <button type="button" class="btn btn-warning">btn-warning</button> <button type="button" class="btn btn-info">btn-info</button> <button type="button" class="btn btn-danger">btn-danger</button> <button type="button" class="btn btn-link">btn-link</button> </div> </div> <!-- / --> <!-- facets --> <div class="facets"> <h3>Facets</h3> <div class="facets__dropdowns" id="multiselect-form"> <div class="dropdown"> <div class="facet__label--container clearfix"> <div class="facet__refresh"> <span> <i class="ion-refresh"></i> </span> </div> </div> <button type="button" class="btn btn-default dropdown-toggle facet__button" data-toggle="dropdown"> <span class="dropdown--label"> <span>Industry</span> <i class="ion-chevron-down pull-right"></i> </span> </button> </div> </div> </div> <!-- / --> <!-- lists --> <div class="lists"> <h3>Lists</h3> <div class="row"> <div class="col-xs-6"> <h6>Unordered List with list-group class</h6> <ul class="list-group"> <li class="list-group-item">list-group-item 1</li> <li class="list-group-item">list-group-item 1</li> <li class="list-group-item">list-group-item 1</li> </ul> <h6>Unordered List without list-group class</h6> <ul> <li>list-group-item 1</li> <li>list-group-item 1</li> <li>list-group-item 1</li> </ul> </div> <div class="col-xs-6"> <h6>Ordered List with list-group class</h6> <ol class="list-group"> <li class="list-group-item">list-group-item 1</li> <li class="list-group-item">list-group-item 1</li> <li class="list-group-item">list-group-item 1</li> </ol> <h6>Ordered List without list-group class</h6> <ol> <li>list-group-item 1</li> <li>list-group-item 1</li> <li>list-group-item 1</li> </ol> </div> </div> </div> <!-- / --> <!-- icons --> <div class="icons"> <div class="row"> <ul class="col-xs-2"> <li><i class="ion-arrow-down-a"></i> <p> ion-arrow-down-a</p></li> <li><i class="ion-arrow-down-b"></i> <p> ion-arrow-down-b</p></li> <li><i class="ion-arrow-down-c"></i> <p> ion-arrow-down-c</p></li> <li><i class="ion-arrow-expand"></i> <p> ion-arrow-expand</p></li> <li><i class="ion-arrow-graph-down-left"></i> <p> ion-arrow-graph-down-left </p></li> <li><i class="ion-arrow-graph-down-right"></i> <p> ion-arrow-graph-down-right </p></li> <li><i class="ion-arrow-graph-up-left"></i> <p> ion-arrow-graph-up-left </p></li> <li><i class="ion-arrow-graph-up-right"></i> <p> ion-arrow-graph-up-right </p></li> <li><i class="ion-ios-arrow-back"></i> <p> ion-ios-arrow-back</p></li> <li><i class="ion-ios-arrow-down"></i> <p> ion-ios-arrow-down</p></li> <li><i class="ion-ios-arrow-forward"></i> <p> ion-ios-arrow-forward</p></li> <li><i class="ion-ios-arrow-left"></i> <p> ion-ios-arrow-left</p></li> <li><i class="ion-ios-arrow-right"></i> <p> ion-ios-arrow-right</p></li> <li><i class="ion-ios-arrow-thin-down"></i> <p> ion-ios-arrow-thin-down</p></li> <li><i class="ion-ios-arrow-thin-left"></i> <p> ion-ios-arrow-thin-left</p></li> <li><i class="ion-ios-arrow-thin-right"></i> <p> ion-ios-arrow-thin-right</p></li> <li><i class="ion-ios-arrow-thin-up"></i> <p> ion-ios-arrow-thin-up</p></li> <li><i class="ion-ios-arrow-up"></i> <p> ion-ios-arrow-up</p></li> <li><i class="ion-ios-at"></i> <p> ion-ios-at</p></li> <li><i class="ion-ios-book"></i> <p> ion-ios-book</p></li> <li><i class="ion-ios-bookmarks"></i> <p> ion-ios-bookmarks</p></li> <li><i class="ion-ios-bookmarks-outline"></i> <p>ion-ios-bookmarks-outline</p></li> <li><i class="ion-ios-briefcase"></i> <p> ion-ios-briefcase</p></li> <li><i class="ion-ios-briefcase-outline"></i> <p> ion-ios-briefcase-outline</p></li> <li><i class="ion-ios-browsers"></i> <p> ion-ios-browsers</p></li> <li><i class="ion-ios-calculator"></i> <p> ion-ios-calculator</p></li> <li><i class="ion-ios-calendar"></i> <p> ion-ios-calendar</p></li> <li><i class="ion-ios-calendar-outline"></i> <p> ion-ios-calendar-outline</p></li> <li><i class="ion-university"></i> <p> ion-university</p></li> <li><i class="ion-unlocked"></i> <p> ion-unlocked</p></li> <li><i class="ion-upload"></i> <p> ion-upload</p></li> <li><i class="ion-usb"></i> <p> ion-usb</p></li> <li><i class="ion-videocamera"></i> <p> ion-videocamera</p></li> <li><i class="ion-checkmark"></i> <p> ion-checkmark </p></li> <li><i class="ion-checkmark-circled"></i> <p> ion-checkmark-circled </p></li> <li><i class="ion-checkmark-round"></i> <p> ion-checkmark-round </p></li> <li><i class="ion-chevron-down"></i> <p> ion-chevron-down</p></li> <li><i class="ion-chevron-left"></i> <p> ion-chevron-left</p></li> <li><i class="ion-chevron-right"></i> <p> ion-chevron-right</p></li> <li><i class="ion-chevron-up"></i> <p> ion-chevron-up</p></li> <li><i class="ion-ios-refresh"></i> <p> ion-ios-refresh </p></li> <li><i class="ion-ios-heart"></i> <p> ion-ios-heart </p></li> <li><i class="ion-ios-heart-outline"></i> <p> ion-ios-heart-outline </p></li> <li><i class="ion-power"></i> <p> ion-power</p></li> </ul> <ul class="col-xs-2"> <li><i class="ion-close"></i> <p> ion-close</p></li> <li><i class="ion-close-circled"></i> <p> ion-close-circled</p></li> <li><i class="ion-close-round"></i> <p> ion-close-round</p></li> <li><i class="ion-code-download"></i> <p> ion-code-download</p></li> <li><i class="ion-document"></i> <p> ion-document</p></li> <li><i class="ion-calendar"></i> <p> ion-calendar</p></li> <li><i class="ion-search"></i> <p> ion-search</p></li> <li><i class="ion-close"></i> <p> ion-close</p></li> <li><i class="ion-ios-download"></i> <p> ion-ios-download</p></li> <li><i class="ion-help"></i> <p> ion-help</p></li> <li><i class="ion-arrow-left-a"></i> <p> ion-arrow-left-a </p></li> <li><i class="ion-arrow-left-b"></i> <p> ion-arrow-left-b </p></li> <li><i class="ion-arrow-left-c"></i> <p> ion-arrow-left-c </p></li> <li><i class="ion-arrow-move"></i> <p> ion-arrow-move </p></li> <li><i class="ion-arrow-resize"></i> <p> ion-arrow-resize </p></li> <li><i class="ion-arrow-return-left"></i> <p> ion-arrow-return-left </p></li> <li><i class="ion-arrow-return-right"></i> <p> ion-arrow-return-right </p></li> <li><i class="ion-arrow-right-a"></i> <p> ion-arrow-right-a </p></li> <li><i class="ion-arrow-right-b"></i> <p> ion-arrow-right-b </p></li> <li><i class="ion-arrow-right-c"></i> <p> ion-arrow-right-c </p></li> <li><i class="ion-arrow-shrink"></i> <p> ion-arrow-shrink </p></li> <li><i class="ion-edit"></i> <p> ion-edit</p></li> <li><i class="ion-email-unread"></i> <p> ion-email-unread</p></li> <li><i class="ion-eye"></i> <p> ion-eye</p></li> <li><i class="ion-female"></i> <p> ion-female</p></li> <li><i class="ion-filing"></i> <p> ion-filing</p></li> <li><i class="ion-flag"></i> <p> ion-flag</p></li> <li><i class="ion-flash"></i> <p> ion-flash</p></li> <li><i class="ion-folder"></i> <p> ion-folder</p></li> <li><i class="ion-fork"></i> <p> ion-fork</p></li> <li><i class="ion-forward"></i> <p> ion-forward </p></li> <li><i class="ion-heart"></i> <p> ion-heart</p></li> <li><i class="ion-help"></i> <p> ion-help</p></li> <li><i class="ion-help-circled"></i> <p> ion-help-circled</p></li> <li><i class="ion-home"></i> <p> ion-home</p></li> <li><i class="ion-image"></i> <p> ion-image</p></li> <li><i class="ion-images"></i> <p> ion-images</p></li> <li><i class="ion-thermometer"></i> <p> ion-thermometer</p></li> <li><i class="ion-thumbsdown"></i> <p> ion-thumbsdown</p></li> <li><i class="ion-thumbsup"></i> <p> ion-thumbsup</p></li> <li><i class="ion-toggle"></i> <p> ion-toggle</p></li> <li><i class="ion-toggle-filled"></i> <p> ion-toggle-filled</p></li> <li><i class="ion-drag"></i> <p> ion-drag</p></li> <li><i class="ion-earth"></i> <p> ion-earth</p></li> <li><i class="ion-wifi"></i> <p> ion-wifi</p></li> </ul> <ul class="col-xs-2"> <li><i class="ion-clipboard"></i> <p> ion-clipboard</p></li> <li><i class="ion-clock"></i> <p> ion-clock</p></li> <li><i class="ion-social-linkedin"></i> <p> ion-social-linkedin </p></li> <li><i class="ion-social-instagram"></i> <p> ion-social-instagram </p></li> <li><i class="ion-alert-circled"></i> <p> ion-alert-circled</p></li> <li><i class="ion-information"></i> <p> ion-information</p></li> <li><i class="ion-star"></i> <p>ion-star</p></li> <li><i class="ion-ios-contact"></i> <p> ion-ios-contact</p></li> <li><i class="ion-ios-contact-outline"></i> <p> ion-ios-contact-outline </p></li> <li><i class="ion-pin"></i> <p> ion-pin</p></li> <li><i class="ion-location"></i> <p> ion-location</p></li> <li><i class="ion-alert"></i> <p> ion-alert</p></li> <li><i class="ion-arrow-swap"></i> <p> ion-arrow-swap </p></li> <li><i class="ion-arrow-up-a"></i> <p> ion-arrow-up-a </p></li> <li><i class="ion-arrow-up-b"></i> <p> ion-arrow-up-b</p></li> <li><i class="ion-arrow-up-c"></i> <p> ion-arrow-up-c</p></li> <li><i class="ion-bluetooth"></i> <p> ion-bluetooth</p></li> <li><i class="ion-bookmark"></i> <p> ion-bookmark</p></li> <li><i class="ion-briefcase"></i> <p> ion-briefcase </p></li> <li><i class="ion-bug"></i> <p> ion-bug </p></li> <li><i class="ion-calculator"></i> <p> ion-calculator </p></li> <li><i class="ion-calendar"></i> <p> ion-calendar </p></li> <li><i class="ion-camera"></i> <p> ion-camera </p></li> <li><i class="ion-card"></i> <p> ion-card </p></li> <li><i class="ion-cash"></i> <p> ion-cash </p></li> <li><i class="ion-ios-camera"></i> <p> ion-ios-camera</p></li> <li><i class="ion-ios-camera-outline"></i> <p> ion-ios-camera-outline</p></li> <li><i class="ion-ios-cart"></i> <p> ion-ios-cart</p></li> <li><i class="ion-ios-cart-outline"></i> <p> ion-ios-cart-outline</p></li> <li><i class="ion-ios-chatboxes"></i> <p> ion-ios-chatboxes</p></li> <li><i class="ion-ios-checkmark"></i> <p> ion-ios-checkmark</p></li> <li><i class="ion-ios-circle-filled"></i> <p> ion-ios-circle-filled</p></li> <li><i class="ion-ios-clock"></i> <p> ion-ios-clock</p></li> <li><i class="ion-ios-close"></i> <p> ion-ios-close</p></li> <li><i class="ion-ios-close-outline"></i> <p> ion-ios-close-outline</p></li> <li><i class="ion-ios-cloud"></i> <p> ion-ios-cloud</p></li> <li><i class="ion-ios-cloud-upload"></i> <p> ion-ios-cloud-upload</p></li> <li><i class="ion-ios-compose"></i> <p> ion-ios-compose</p></li> <li><i class="ion-ios-compose-outline"></i> <p> ion-ios-compose-outline</p></li> <li><i class="ion-ios-contact"></i> <p> ion-ios-contact</p></li> <li><i class="ion-ios-contact-outline"></i> <p> ion-ios-contact-outline</p></li> <li><i class="ion-ios-copy"></i> <p> ion-ios-copy</p></li> <li><i class="ion-ios-copy-outline"></i> <p> ion-ios-copy-outline</p></li> <li><i class="ion-ios-crop"></i> <p> ion-ios-crop</p></li> <li><i class="ion-document"></i> <p> ion-document</p></li> </ul> <ul class="col-xs-2"> <li><i class="ion-email"></i> <p> ion-email</p></li> <li><i class="ion-ios-download"></i> <p> ion-ios-download</p></li> <li><i class="ion-ios-drag"></i> <p> ion-ios-drag</p></li> <li><i class="ion-ios-email"></i> <p> ion-ios-email</p></li> <li><i class="ion-ios-email-outline"></i> <p> ion-ios-email-outline</p></li> <li><i class="ion-ios-eye"></i> <p> ion-ios-eye</p></li> <li><i class="ion-ios-filing"></i> <p> ion-ios-filing</p></li> <li><i class="ion-ios-filing-outline"></i> <p> ion-ios-filing-outline</p></li> <li><i class="ion-ios-flag"></i> <p> ion-ios-flag</p></li> <li><i class="ion-ios-flag-outline"></i> <p> ion-ios-flag-outline</p></li> <li><i class="ion-ios-folder"></i> <p> ion-ios-folder</p></li> <li><i class="ion-ios-folder-outline"></i> <p> ion-ios-folder-outline</p></li> <li><i class="ion-ios-gear"></i> <p> ion-ios-gear</p></li> <li><i class="ion-ios-glasses"></i> <p> ion-ios-glasses</p></li> <li><i class="ion-ios-glasses-outline"></i> <p> ion-ios-glasses-outline</p></li> <li><i class="ion-ios-heart"></i> <p> ion-ios-heart</p></li> <li><i class="ion-ios-heart-outline"></i> <p> ion-ios-heart-outline</p></li> <li><i class="ion-ios-help"></i> <p> ion-ios-help</p></li> <li><i class="ion-ios-home"></i> <p> ion-ios-home</p></li> <li><i class="ion-ios-home-outline"></i> <p> ion-ios-home-outline</p></li> <li><i class="ion-ios-infinite"></i> <p> ion-ios-infinite</p></li> <li><i class="ion-ios-infinite-outline"></i> <p> ion-ios-infinite-outline</p></li> <li><i class="ion-ios-information"></i> <p> ion-ios-information</p></li> <li><i class="ion-ios-information-empty"></i> <p> ion-ios-information-empty</p></li> <li><i class="ion-ios-information-outline"></i> <p> ion-ios-information-outline</p></li> <li><i class="ion-ios-ionic-outline"></i> <p> ion-ios-ionic-outline</p></li> <li><i class="ion-ios-keypad"></i> <p> ion-ios-keypad</p></li> <li><i class="ion-ios-keypad-outline"></i> <p> ion-ios-keypad-outline</p></li> <li><i class="ion-ios-lightbulb"></i> <p> ion-ios-lightbulb</p></li> <li><i class="ion-ios-location"></i> <p> ion-ios-location</p></li> <li><i class="ion-ios-location-outline"></i> <p> ion-ios-location-out</p></li> <li><i class="ion-ios-locked"></i> <p> ion-ios-locked</p></li> <li><i class="ion-ios-minus"></i> <p> ion-ios-minus</p></li> <li><i class="ion-ios-minus-outline"></i> <p> ion-ios-minus-outline</p></li> <li><i class="ion-ios-monitor"></i> <p> ion-ios-monitor</p></li> <li><i class="ion-ios-more"></i> <p> ion-ios-more</p></li> <li><i class="ion-ios-more-outline"></i> <p> ion-ios-more-outline</p></li> <li><i class="ion-ios-navigate"></i> <p> ion-ios-navigate</p></li> <li><i class="ion-navicon"></i> <p> ion-navicon</p></li> <li><i class="ion-navigate"></i> <p> ion-navigate</p></li> <li><i class="ion-network"></i> <p> ion-network</p></li> <li><i class="ion-paperclip"></i> <p> ion-paperclip</p></li> <li><i class="ion-pause"></i> <p> ion-pause</p></li> <li><i class="ion-person"></i> <p> ion-person</p></li> <li><i class="ion-person-add"></i> <p> ion-person-add</p></li> </ul> <ul class="col-xs-2"> <li><i class="ion-pin"></i> <p> ion-pin</p></li> <li><i class="ion-pinpoint"></i> <p> ion-pinpoint</p></li> <li><i class="ion-ios-paper"></i> <p> ion-ios-paper</p></li> <li><i class="ion-ios-pause"></i> <p> ion-ios-pause</p></li> <li><i class="ion-ios-people"></i> <p> ion-ios-people</p></li> <li><i class="ion-ios-person"></i> <p> ion-ios-person</p></li> <li><i class="ion-ios-photos"></i> <p> ion-ios-photos</p></li> <li><i class="ion-ios-photos-outline"></i> <p> ion-ios-photos-outline</p></li> <li><i class="ion-ios-pint"></i> <p> ion-ios-pint</p></li> <li><i class="ion-ios-play"></i> <p> ion-ios-play</p></li> <li><i class="ion-ios-plus"></i> <p> ion-ios-plus</p></li> <li><i class="ion-ios-plus-empty"></i> <p> ion-ios-plus-empty</p></li> <li><i class="ion-ios-printer"></i> <p> ion-ios-printer</p></li> <li><i class="ion-ios-redo"></i> <p> ion-ios-redo</p></li> <li><i class="ion-ios-refresh"></i> <p> ion-ios-refresh</p></li> <li><i class="ion-ios-reload"></i> <p> ion-ios-reload</p></li> <li><i class="ion-ios-search"></i> <p> on-ios-searc</p></li> <li><i class="ion-ios-settings"></i> <p> ion-ios-settings</p></li> <li><i class="ion-ios-star"></i> <p> ion-ios-star</p></li> <li><i class="ion-ios-stopwatch"></i> <p> ion-ios-stopwatch</p></li> <li><i class="ion-ios-telephone"></i> <p> ion-ios-telephone</p></li> <li><i class="ion-ios-time"></i> <p> ion-ios-time</p></li> <li><i class="ion-ios-timer"></i> <p> ion-ios-timer</p></li> <li><i class="ion-ios-toggle"></i> <p> ion-ios-toggle</p></li> <li><i class="ion-ios-toggle-outline"></i> <p> ion-ios-toggle-outline</p></li> <li><i class="ion-ios-trash"></i> <p> ion-ios-trash</p></li> <li><i class="ion-ios-trash-outline"></i> <p> ion-ios-trash-outline</p></li> <li><i class="ion-ios-undo"></i> <p> ion-ios-undo</p></li> <li><i class="ion-ios-unlocked"></i> <p> ion-ios-unlocked</p></li> <li><i class="ion-ios-upload"></i> <p> ion-ios-upload</p></li> <li><i class="ion-key"></i> <p> ion-key</p></li> <li><i class="ion-laptop"></i> <p> ion-laptop</p></li> <li><i class="ion-link"></i> <p> ion-link</p></li> <li><i class="ion-location"></i> <p> ion-location</p></li> <li><i class="ion-log-in"></i> <p> ion-log-in</p></li> <li><i class="ion-log-out"></i> <p> ion-log-out</p></li> <li><i class="ion-map"></i> <p> ion-map</p></li> <li><i class="ion-minus"></i> <p> ion-minus</p></li> <li><i class="ion-monitor"></i> <p> ion-monitor</p></li> <li><i class="ion-more"></i> <p> ion-more</p></li> <li><i class="ion-mouse"></i> <p> ion-mouse</p></li> <li><i class="ion-plus"></i> <p> ion-plus</p></li> <li><i class="ion-plus-circled"></i> <p> ion-plus-circled</p></li> <li><i class="ion-plus-round"></i> <p> ion-plus-round</p></li> <li><i class="ion-pound"></i> <p> ion-pound</p></li> </ul> <ul class="col-xs-2"> <li><i class="ion-search"></i> <p> ion-search</p></li> <li><i class="ion-settings"></i> <p> ion-settings</p></li> <li><i class="ion-share"></i> <p> ion-share</p></li> <li><i class="ion-social-dropbox"></i> <p> ion-social-dropbox</p></li> <li><i class="ion-social-dropbox-outline"></i> <p> ion-social-dropbox-outline</p></li> <li><i class="ion-social-euro"></i> <p> ion-social-euro</p></li> <li><i class="ion-social-euro-outline"></i> <p> ion-social-euro-outline</p></li> <li><i class="ion-social-facebook"></i> <p> ion-social-facebook</p></li> <li><i class="ion-social-facebook-outline"></i> <p> ion-social-facebook-outline</p></li> <li><i class="ion-social-google"></i> <p> ion-social-google</p></li> <li><i class="ion-social-google-outline"></i> <p> ion-social-google-outline</p></li> <li><i class="ion-social-googleplus"></i> <p> ion-social-googleplus</p></li> <li><i class="ion-social-googleplus-outline"></i> <p> ion-social-googleplus-outline</p></li> <li><i class="ion-social-instagram"></i> <p> ion-social-instagram</p></li> <li><i class="ion-social-instagram-outline"></i> <p> ion-social-instagram-outline</p></li> <li><i class="ion-social-javascript"></i> <p> ion-social-javascript</p></li> <li><i class="ion-social-javascript-outline"></i> <p> ion-social-javascript-outline</p></li> <li><i class="ion-social-linkedin"></i> <p> ion-social-linkedin</p></li> <li><i class="ion-social-linkedin-outline"></i> <p> ion-social-linkedin-outline</p></li> <li><i class="ion-reply"></i> <p> ion-reply</p></li> <li><i class="ion-reply-all"></i> <p> ion-reply-all</p></li> <li><i class="ion-social-rss"></i> <p> ion-social-rss</p></li> <li><i class="ion-social-rss-outline"></i> <p> ion-social-rss-outline</p></li> <li><i class="ion-social-sass"></i> <p> ion-social-sass</p></li> <li><i class="ion-social-tumblr"></i> <p> ion-social-tumblr</p></li> <li><i class="ion-social-tumblr-outline"></i> <p> ion-social-tumblr-outline</p></li> <li><i class="ion-social-twitter"></i> <p> ion-social-twitter</p></li> <li><i class="ion-social-twitter-outline"></i> <p> ion-social-twitter-outline</p></li> <li><i class="ion-social-usd"></i> <p> ion-social-usd</p></li> <li><i class="ion-social-usd-outline"></i> <p> ion-social-usd-outline</p></li> <li><i class="ion-social-windows"></i> <p> ion-social-windows</p></li> <li><i class="ion-social-windows-outline"></i> <p> ion-social-windows-outline</p></li> <li><i class="ion-social-wordpress"></i> <p> ion-social-wordpress</p></li> <li><i class="ion-social-wordpress-outline"></i> <p> ion-social-wordpress-outline</p></li> <li><i class="ion-social-yen"></i> <p> ion-social-yen</p></li> <li><i class="ion-social-yen-outline"></i> <p> ion-social-yen-outline</p></li> <li><i class="ion-social-youtube"></i> <p> ion-social-youtube</p></li> <li><i class="ion-social-youtube-outline"></i> <p> ion-social-youtube-outline</p></li> <li><i class="ion-speakerphone"></i> <p> ion-speakerphone</p></li> <li><i class="ion-star"></i> <p> ion-star</p></li> <li><i class="ion-stop"></i> <p> ion-stop</p></li> <li><i class="ion-wrench"></i> <p> ion-wrench</p></li> <li><i class="ion-quote"></i> <p> ion-quote</p></li> <li><i class="ion-record"></i> <p> ion-record</p></li> <li><i class="ion-refresh"></i> <p> ion-refresh</p></li> </ul> </div> </div> <!-- / --> </div> <!-- / --> <!-- End page --> <div class="ending"> <h2 class="c1" id="h.z8qwt4om3mfl"> <span>Team</span><span class="c7">————————————————————————————————————</span> </h2> <h2 class="c1" id="h.fz7ewuiy8hk"><span>Front-End CMS Design Team, Adecco Melville</span></h2> <p class="c1"><span>Elena Wiener</span></p> <p class="c1 c58"><span class="c62 c48 c66">Updated 05/03/2016</span></p> </div> <!-- / -->
</div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script>
</body>
</html>
1Adecco Styleguide and Code Standards 2016 - Script Codes CSS Codes
@import url("https://themes.googleusercontent.com/fonts/css?kit=384rsQkuuLKrqu_E2x74BbMOsRfr0qdg9BkZmgDAFv-VKfU1IvEY3IUgSCBQQkThVzOk9bMJx2CxDDX7EactHw");
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
/* Fonts */
@font-face { font-family: adecco-font-1; src: url("http://cd-adecco-uk-test.adecco.net/~/media/adeccogroup/brands/adecco global 2016/assets/font/icons/adecco-font-1-eot.eot"); src: url("http://cd-adecco-uk-test.adecco.net/~/media/adeccogroup/brands/adecco global 2016/assets/font/icons/adecco-font-1-eot.eot?#iefix") format("embedded-opentype"), url("http://cd-adecco-uk-test.adecco.net/~/media/adeccogroup/brands/adecco global 2016/assets/font/icons/adecco-font-1-woff.woff") format("woff"), url("http://cd-adecco-uk-test.adecco.net/~/media/adeccogroup/brands/adecco global 2016/assets/font/icons/adecco-font-1-ttf.ttf") format("truetype"), url("http://cd-adecco-uk-test.adecco.net/~/media/adeccogroup/brands/adecco global 2016/assets/font/icons/adecco-font-1-svg.svg#adecco-font-1") format("svg"); src: url("http://cd-adecco-uk-test.adecco.net/~/media/adeccogroup/brands/adecco global 2016/assets/font/icons/adecco-font-1-eot.eot"); src: url("http://cd-adecco-uk-test.adecco.net/~/media/adeccogroup/brands/adecco global 2016/assets/font/icons/adecco-font-1-eot.eot?#iefix") format("embedded-opentype"), url("http://cd-adecco-uk-test.adecco.net/~/media/adeccogroup/brands/adecco global 2016/assets/font/icons/adecco-font-1-woff.woff") format("woff"), url("http://cd-adecco-uk-test.adecco.net/~/media/adeccogroup/brands/adecco global 2016/assets/font/icons/adecco-font-1-ttf.ttf") format("truetype"), url("http://cd-adecco-uk-test.adecco.net/~/media/adeccogroup/brands/adecco global 2016/assets/font/icons/adecco-font-1-svg.svg#adecco-font-1") format("svg"); font-weight: 400; font-style: normal;
}
@font-face { font-family: houschka_rounded-bold; src: url("http://cd-adecco-uk-test.adecco.net/~/media/adeccogroup/brands/adecco global 2016/assets/font/houschkarounded-bold-webfont-eot.eot"); src: url("http://cd-adecco-uk-test.adecco.net/~/media/adeccogroup/brands/adecco global 2016/assets/font/houschkarounded-bold-webfont-eot.eot?#iefix") format("embedded-opentype"), url("http://cd-adecco-uk-test.adecco.net/~/media/adeccogroup/brands/adecco global 2016/assets/font/houschkarounded-bold-webfont.woff2") format("woff2"), url("http://cd-adecco-uk-test.adecco.net/~/media/adeccogroup/brands/adecco global 2016/assets/font/houschkarounded-bold-webfont-woff.woff") format("woff"), url("http://cd-adecco-uk-test.adecco.net/~/media/adeccogroup/brands/adecco global 2016/assets/font/houschkarounded-bold-webfont-ttf.ttf") format("truetype"), url("http://cd-adecco-uk-test.adecco.net/~/media/adeccogroup/brands/adecco global 2016/assets/font/houschkarounded-bold-webfont-svg.svg#houschka_roundedbold") format("svg"); font-weight: 400; font-style: normal;
}
@font-face { font-family: houschka_rounded-demibold; src: url("http://cd-adecco-uk-test.adecco.net/~/media/adeccogroup/brands/adecco global 2016/assets/font/houschkarounded-demibold-webfont-eot.eot"); src: url(http://cd-adecco-uk-test.adecco.net/fonts/houschkarounded-demibold-webfont-eot.eot?#iefix) format("embedded-opentype"), url("http://cd-adecco-uk-test.adecco.net/~/media/adeccogroup/brands/adecco global 2016/assets/font/houschkarounded-demibold-webfont.woff2") format("woff2"), url("http://cd-adecco-uk-test.adecco.net/~/media/adeccogroup/brands/adecco global 2016/assets/font/houschkarounded-demibold-webfont-woff.woff") format("woff"), url("http://cd-adecco-uk-test.adecco.net/~/media/adeccogroup/brands/adecco global 2016/assets/font/houschkarounded-demibold-webfont-ttf.ttf") format("truetype"), url("http://cd-adecco-uk-test.adecco.net/~/media/adeccogroup/brands/adecco global 2016/assets/font/houschkarounded-demibold-webfont-svg.svg#houschka_roundeddemibold") format("svg"); src: url("../font/houschkahead-demibold-web.woff") format("woff"); src: url("") format("embedded-opentype"), url(""), url("http://cd-adecco-uk-test.adecco.net/~/media/adeccogroup/brands/adecco global 2016/assets/font/icons/adecco-font-1-ttf.ttf") format("truetype"), url("http://cd-adecco-uk-test.adecco.net/~/media/adeccogroup/brands/adecco global 2016/assets/font/icons/adecco-font-1-svg.svg#adecco-font-1") format("svg"); font-weight: 400; font-style: normal;
}
@font-face { font-family: houschka_rounded-medium; src: url("http://cd-adecco-uk-test.adecco.net/~/media/adeccogroup/brands/adecco global 2016/assets/font/houschkarounded-medium-webfont-eot.eot"); src: url("http://cd-adecco-uk-test.adecco.net/~/media/adeccogroup/brands/adecco global 2016/assets/font/houschkarounded-medium-webfont-eot.eot?#iefix") format("embedded-opentype"), url("http://cd-adecco-uk-test.adecco.net/~/media/adeccogroup/brands/adecco global 2016/assets/font/houschkarounded-medium-webfont.woff2") format("woff2"), url("http://cd-adecco-uk-test.adecco.net/~/media/adeccogroup/brands/adecco global 2016/assets/font/houschkarounded-medium-webfont-woff.woff") format("woff"), url("http://cd-adecco-uk-test.adecco.net/~/media/adeccogroup/brands/adecco global 2016/assets/font/houschkarounded-medium-webfont-ttf.ttf") format("truetype"), url("http://cd-adecco-uk-test.adecco.net/~/media/adeccogroup/brands/adecco global 2016/assets/font/houschkarounded-medium-webfont-svg.svg#houschka_roundedmedium") format("svg"); font-weight: 400; font-style: normal;
}
@font-face { font-family: houschka_headmedium; src: url("http://cd-adecco-uk-test.adecco.net/~/media/adeccogroup/brands/adecco global 2016/assets/font/houschkahead-medium-web-eot.eot"); src: url("http://cd-adecco-uk-test.adecco.net/~/media/adeccogroup/brands/adecco global 2016/assets/font/houschkahead-medium-web-eot.eot?#iefix") format("embedded-opentype"), url("http://cd-adecco-uk-test.adecco.net/~/media/adeccogroup/brands/adecco global 2016/assets/font/houschkahead-medium-web.woff2") format("woff2"), url("/~/media/adeccogroup/brands/adecco global 2016/assets/font/houschkahead-medium-web-woff.woff") format("woff"), url("http://cd-adecco-uk-test.adecco.net/~/media/adeccogroup/brands/adecco global 2016/assets/font/houschkahead-medium-web-ttf.ttf") format("truetype"), url("http://cd-adecco-uk-test.adecco.net/~/media/adeccogroup/brands/adecco global 2016/assets/font/houschkahead-medium-web-svg.svg#houschka_headmedium") format("svg"); font-weight: 400; font-style: normal;
}
@font-face { font-family: houschka_headdemibold; src: url("http://cd-adecco-uk-test.adecco.net/~/media/adeccogroup/brands/adecco global 2016/assets/font/houschkahead-demibold-web-eot.eot"); src: url("http://cd-adecco-uk-test.adecco.net/~/media/adeccogroup/brands/adecco global 2016/assets/font/houschkahead-demibold-web-eot.eot?#iefix") format("embedded-opentype"), url("http://cd-adecco-uk-test.adecco.net/~/media/adeccogroup/brands/adecco global 2016/assets/font/houschkahead-demibold-web.woff2") format("woff2"), url("http://cd-adecco-uk-test.adecco.net/~/media/adeccogroup/brands/adecco global 2016/assets/font/houschkahead-demibold-web-woff.woff") format("woff"), url("http://cd-adecco-uk-test.adecco.net/~/media/adeccogroup/brands/adecco global 2016/assets/font/houschkahead-demibold-web-ttf.ttf") format("truetype"), url("http://cd-adecco-uk-test.adecco.net/~/media/adeccogroup/brands/adecco global 2016/assets/font/houschkahead-demibold-web-svg.svg#houschka_headdemibold") format("svg"); font-weight: 400; font-style: normal;
}
@font-face { font-family: houschka_headbold; src: url("http://cd-adecco-uk-test.adecco.net/~/media/adeccogroup/brands/adecco global 2016/assets/font/houschkahead-bold-web-eot.eot"); src: url("http://cd-adecco-uk-test.adecco.net/~/media/adeccogroup/brands/adecco global 2016/assets/font/houschkahead-bold-web-eot.eot?#iefix;") format("embedded-opentype"), url("http://cd-adecco-uk-test.adecco.net/~/media/adeccogroup/brands/adecco global 2016/assets/font/houschkahead-bold-web.woff2") format("woff2"), url("http://cd-adecco-uk-test.adecco.net/~/media/adeccogroup/brands/adecco global 2016/assets/font/houschkahead-bold-web-woff.woff") format("woff"), url("http://cd-adecco-uk-test.adecco.net/~/media/adeccogroup/brands/adecco global 2016/assets/font/houschkahead-bold-web-ttf.ttf") format("truetype"), url("http://cd-adecco-uk-test.adecco.net/~/media/adeccogroup/brands/adecco global 2016/assets/font/houschkahead-bold-web-svg.svg#houschka_headbold") format("svg"); font-weight: 400; font-style: normal;
}
@font-face { font-family: houschkahead-demibolditalic; src: url("http://cd-adecco-uk-test.adecco.net/~/media/adeccogroup/brands/adecco global 2016/assets/font/houschkahead-demibolditalic-web-eot.eot"); src: url("http://cd-adecco-uk-test.adecco.net/~/media/adeccogroup/brands/adecco global 2016/assets/font/houschkahead-demibolditalic-web-eot.eot?#iefix;") format("embedded-opentype"), url("http://cd-adecco-uk-test.adecco.net/~/media/adeccogroup/brands/adecco global 2016/assets/font/houschkahead-demibolditalic-web-woff2.woff2") format("woff2"), url("http://cd-adecco-uk-test.adecco.net/~/media/adeccogroup/brands/adecco global 2016/assets/font/houschkahead-demibolditalic-web-woff.woff") format("woff"), url("http://cd-adecco-uk-test.adecco.net/~/media/adeccogroup/brands/adecco global 2016/assets/font/houschkahead-demibolditalic-web-ttf.ttf") format("truetype"), url("http://cd-adecco-uk-test.adecco.net/~/media/adeccogroup/brands/adecco global 2016/assets/font/houschkahead-demibolditalic-web-svg.svg#houschka_headbold") format("svg"); font-weight: 400; font-style: normal;
}
@font-face { font-family: "Ionicons"; src: url("http://cd-adecco-uk-test.adecco.net/fonts/icons/ionicons.eot?v=2.0.0"); src: url("http://cd-adecco-uk-test.adecco.net/fonts/icons/ionicons.eot?v=2.0.0#iefix") format("embedded-opentype"), url("http://cd-adecco-uk-test.adecco.net/fonts/icons/ionicons.ttf?v=2.0.0") format("truetype"), url("http://cd-adecco-uk-test.adecco.net/fonts/icons/ionicons.woff?v=2.0.0") format("woff"), url("http://cd-adecco-uk-test.adecco.net/fonts/icons/ionicons.svg?v=2.0.0#Ionicons") format("svg"); font-weight: normal; font-style: normal;
}
/* Fonts we are using :
-- "Ionicons"
-- houschkahead-demibolditalic
-- houschka_headbold; houschka_headdemibold
-- houschka_headmedium
-- houschka_rounded-medium
-- houschka_rounded-demibold
-- houschka_rounded-bold
-- adecco-font-1
*/
/* SASS / Social Media Brand Colors */
hr { page-break-before: always; display: none;
}
ul { list-style-type: none;
}
ol { list-style-type: none; margin: 0; padding: 0;
}
table td,
table th { padding: 0;
}
.c45 { border-right-style: solid; padding: 5pt 5pt 5pt 5pt; border-bottom-color: #ef2e24; border-top-width: 1pt; border-right-width: 1pt; border-left-color: #ef2e24; vertical-align: middle; border-right-color: #ef2e24; border-left-width: 1pt; border-top-style: solid; background-color: #ef2e24; border-left-style: solid; border-bottom-width: 1pt; width: 453.8pt; border-top-color: #ef2e24; border-bottom-style: solid;
}
.c63 { border-right-style: solid; padding: 5pt 5pt 5pt 5pt; border-bottom-color: #ef2e24; border-top-width: 1pt; border-right-width: 1pt; border-left-color: #ef2e24; vertical-align: middle; border-right-color: #ef2e24; border-left-width: 1pt; border-top-style: solid; background-color: #ef2e24; border-left-style: solid; border-bottom-width: 1pt; border-top-color: #ef2e24; border-bottom-style: solid;
}
.c9 { border-right-style: solid; padding: 5pt 5pt 5pt 5pt; border-bottom-color: #ef2e24; border-top-width: 1pt; border-right-width: 1pt; border-left-color: #ef2e24; vertical-align: middle; border-right-color: #ef2e24; border-left-width: 1pt; border-top-style: solid; background-color: #ef2e24; border-left-style: solid; border-bottom-width: 1pt; width: 197.2pt; border-top-color: #ef2e24; border-bottom-style: solid;
}
.c13 { color: #de008d; font-weight: normal; text-decoration: none; vertical-align: baseline; font-size: 11pt; font-style: normal;
}
.c60 { color: #ffffff; text-decoration: none; vertical-align: baseline; font-style: normal;
}
.c0 { background-color: #ffffff; font-size: 9pt; color: #000000;
}
.c31 { background-color: #ffffff; font-size: 9pt; color: #006666;
}
.c4 { margin-left: 72pt; padding-top: 5pt; padding-left: 0pt; line-height: 1;
}
.c5 { background-color: #ffffff; font-size: 9pt; color: #660066;
}
.c18 { background-color: #ffffff; font-size: 9pt; color: #000088;
}
.c25 { margin-left: -93.8pt; border-spacing: 0; border-collapse: collapse; margin-right: auto;
}
.c11 { background-color: #ffffff; font-size: 9pt; color: #666600;
}
.c23 { background-color: #ffffff; font-size: 9pt; color: #008800;
}
.c22 { background-color: #ffffff; font-size: 9pt; color: #880000;
}
.c59 { margin-left: 85.5pt; padding-bottom: 0pt; text-align: left;
}
.c24 { background-color: #ffffff; color: #676767;
}
.c27 { font-size: 9pt; color: #000000;
}
.c7 { background-color: #ffffff; color: #ef2e24;
}
.c21 { padding-top: 8pt; padding-bottom: 8pt; line-height: 1.6;
}
.c34 { background-color: #ffffff; font-family: "Arial"; color: #f75d5d;
}
.c26 { font-size: 9pt; color: #666600;
}
.c1 { orphans: 2; widows: 2;
}
.c49 { color: inherit;
}
.c19 { line-height: 1.15; text-align: center;
}
.c6 { padding-top: 0pt; line-height: 1.56522;
}
.c3 { padding-top: 0pt; line-height: 1;
}
.c16 { line-height: 1.15; page-break-after: avoid;
}
.c54 { padding: 54pt 54pt 54pt 54pt;
}
.c15 { background-color: #ffffff; color: #333333;
}
.c53 { background-color: #eeeeee; color: #999988;
}
.c35 { padding: 0; margin: 0;
}
.c33 { background-color: #ffffff; font-size: 11.5pt;
}
.c65 { padding-top: 6pt; text-align: left;
}
.c32 { background-color: #ffffff; color: #676767;
}
.c2 { color: #000000; font-size: 12pt;
}
.c40 { background-color: #eeeeee; color: #333333;
}
.c14 { line-height: 1.0;
}
.c55 { font-size: 6pt;
}
.c38 { font-size: 16pt;
}
.c41 { text-align: center;
}
.c44 { background-color: #ffffff;
}
.c62 { color: #337ab7;
}
.c8 { color: #ef2e24;
}
.c47 { color: #337ab7;
}
.c29 { margin-left: 36pt;
}
.c57 { margin-left: 72pt;
}
.c66 { font-size: 8pt;
}
.c61 { padding-bottom: 0pt;
}
.c28 { color: #000000;
}
.c46 { margin-left: 108pt;
}
.c37 { height: 12pt;
}
.c51 { color: #676767;
}
.c12 { height: 11pt;
}
.c36 { padding-top: 5pt;
}
.c48 { font-style: italic;
}
.c52 { height: 27pt;
}
.c56 { font-size: 30pt;
}
.c43 { font-size: 10pt;
}
.c30 { padding-left: 0pt;
}
.c39 { line-height: 1.076086956521739;
}
.c50 { font-size: 18pt;
}
.c42 { line-height: 1.15;
}
.c10 { text-indent: 36pt;
}
.c58 { text-align: right;
}
.c20 { font-weight: bold;
}
.title { padding-top: 24pt; color: #ef2e24; font-weight: bold; font-size: 30pt; padding-bottom: 0pt; line-height: 1.5; orphans: 2; widows: 2; text-align: left;
}
.subtitle { padding-top: 10pt; color: #000000; font-weight: bold; font-size: 12pt; padding-bottom: 0pt; line-height: 1.15; orphans: 2; widows: 2; text-align: left;
}
li { color: #666666;
}
p { margin: 0; color: #666666; font-size: 11pt;
}
h1 { padding-top: 24pt; color: #ef2e24; font-weight: bold; font-size: 16pt; padding-bottom: 0pt; line-height: 1.15; page-break-after: avoid; text-align: left; font-family: houschka_headdemibold, Helvetica, Arial, sans-serif;
}
h2 { padding-top: 10pt; color: #000000; font-weight: bold; font-size: 12pt; padding-bottom: 0pt; line-height: 1.15; orphans: 2; widows: 2; text-align: left; font-family: houschka_headdemibold, Helvetica, Arial, sans-serif;
}
h3 { padding-top: 10pt; color: #000000; font-weight: bold; font-size: 12pt; padding-bottom: 0pt; line-height: 1.15; orphans: 2; widows: 2; text-align: left; font-family: houschka_headdemibold, Helvetica, Arial, sans-serif;
}
h4 { padding-top: 6pt; color: #000000; font-weight: bold; font-size: 11pt; padding-bottom: 0pt; line-height: 1.15; orphans: 2; widows: 2; text-align: left;
}
h5 { padding-top: 8pt; color: #666666; font-size: 11pt; padding-bottom: 0pt; line-height: 1.15; page-break-after: avoid; orphans: 2; widows: 2; text-align: left;
}
h6 { padding-top: 8pt; color: #666666; font-size: 11pt; padding-bottom: 0pt; line-height: 1.15; page-break-after: avoid; font-style: italic; orphans: 2; widows: 2; text-align: left;
}
.red { background-color: #ef2e24;
}
.orange { background-color: #fff;
}
.yellow { background-color: #fff;
}
.green { background-color: #5cb85c;
}
.blue { background-color: #337ab7;
}
.purple { background-color: #fff;
}
.pink { background-color: #de008d;
}
.neutral { background-color: #8a8aa2;
}
.inactive { background-color: #fff;
}
.d { background-color: #141419;
}
.l { background-color: #fff;
}
.twitter { background-color: #00aced;
}
.facebook { background-color: #3b5998;
}
.googleplus { background-color: #dd4b39;
}
.pinterest { background-color: #cb2027;
}
.linkedin { background-color: #007bb6;
}
.youtube { background-color: #bb0000;
}
.vimeo { background-color: #aad450;
}
.tumblr { background-color: #32506d;
}
.instagram { background-color: #517fa4;
}
.flickr { background-color: #ff0084;
}
.dribbble { background-color: #ea4c89;
}
.quora { background-color: #a82400;
}
.foursquare { background-color: #0072b1;
}
.forrst { background-color: #5B9A68;
}
.vk { background-color: #45668e;
}
.wordpress { background-color: #21759b;
}
.stumbleupon { background-color: #EB4823;
}
.yahoo { background-color: #7B0099;
}
.blogger { background-color: #fb8f3d;
}
.soundcloud { background-color: #ff3a00;
}
.link { padding: 0; background: none; border: none; color: blue; text-decoration: none;
}
.btn-primary { color: #fff; background-color: #428bca; border-color: #357ebd;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary { color: #fff; background-color: #3071a9; border-color: #285e8e;
}
h5 { color: #ef2e24; margin: 20px 0;
}
.link-light { color: #000000;
}
.link-light:hover { text-decoration: none;
}
.link-dark { color: #ffffff;
}
.link-dark:hover { text-decoration: none;
}
a { font-weight: 500; line-height: 1.1; color: inherit; text-decoration: underline;
}
body, button, input, select, textarea { font-size: 16px; letter-spacing: -0.5px; line-height: 22px; color: #231f20;
}
/* For DEMO PURPOSES ONLY !! */
ul li { border-radius: 4px; padding: 5px; margin: 5px; list-style: none;
}
.icons ul li { list-style: none; border-bottom: solid rgba(0, 0, 0, 0.1) 1px; border-radius: 0; font-size: 14px; text-align: center; height: 80px; padding-top: 15px; color: #FFF;
}
.icons ul li i { color: #ef2e24; font-size: 24px;
}
.c42 .img-responsive { max-height: 90px !important; width: auto !important;
}
.ion-alert:before { content: "\f101";
}
.ion-alert-circled:before { content: "\f100";
}
.ion-arrow-down-a:before { content: "\f103";
}
.ion-arrow-down-b:before { content: "\f104";
}
.ion-arrow-down-c:before { content: "\f105";
}
.ion-arrow-expand:before { content: "\f25e";
}
.ion-arrow-graph-down-left:before { content: "\f25f";
}
.ion-arrow-graph-down-right:before { content: "\f260";
}
.ion-arrow-graph-up-left:before { content: "\f261";
}
.ion-arrow-graph-up-right:before { content: "\f262";
}
.ion-arrow-left-a:before { content: "\f106";
}
.ion-arrow-left-b:before { content: "\f107";
}
.ion-arrow-left-c:before { content: "\f108";
}
.ion-arrow-move:before { content: "\f263";
}
.ion-arrow-resize:before { content: "\f264";
}
.ion-arrow-return-left:before { content: "\f265";
}
.ion-arrow-return-right:before { content: "\f266";
}
.ion-arrow-right-a:before { content: "\f109";
}
.ion-arrow-right-b:before { content: "\f10a";
}
.ion-arrow-right-c:before { content: "\f10b";
}
.ion-arrow-shrink:before { content: "\f267";
}
.ion-arrow-swap:before { content: "\f268";
}
.ion-arrow-up-a:before { content: "\f10c";
}
.ion-arrow-up-b:before { content: "\f10d";
}
.ion-arrow-up-c:before { content: "\f10e";
}
.ion-bluetooth:before { content: "\f116";
}
.ion-bookmark:before { content: "\f26b";
}
.ion-briefcase:before { content: "\f26c";
}
.ion-bug:before { content: "\f2be";
}
.ion-calculator:before { content: "\f26d";
}
.ion-calendar:before { content: "\f117";
}
.ion-camera:before { content: "\f118";
}
.ion-card:before { content: "\f119";
}
.ion-cash:before { content: "\f316";
}
.ion-checkmark:before { content: "\f122";
}
.ion-checkmark-circled:before { content: "\f120";
}
.ion-checkmark-round:before { content: "\f121";
}
.ion-chevron-down:before { content: "\f123"; color: #ef2e24;
}
.ion-chevron-left:before { content: "\f124";
}
.ion-chevron-right:before { content: "\f125";
}
.ion-chevron-up:before { content: "\f126";
}
.ion-clipboard:before { content: "\f127";
}
.ion-clock:before { content: "\f26e";
}
.ion-close:before { content: "\f12a";
}
.ion-close-circled:before { content: "\f128";
}
.ion-close-round:before { content: "\f129";
}
.ion-code-download:before { content: "\f26f";
}
.ion-document:before { content: "\f12f";
}
.ion-drag:before { content: "\f130";
}
.ion-earth:before { content: "\f276";
}
.ion-edit:before { content: "\f2bf";
}
.ion-email:before { content: "\f132";
}
.ion-email-unread:before { content: "\f3c3";
}
.ion-eye:before { content: "\f133";
}
.ion-female:before { content: "\f278";
}
.ion-filing:before { content: "\f134";
}
.ion-flag:before { content: "\f279";
}
.ion-flash:before { content: "\f137";
}
.ion-folder:before { content: "\f139";
}
.ion-fork:before { content: "\f27a";
}
.ion-forward:before { content: "\f13a";
}
.ion-heart:before { content: "\f141";
}
.ion-help:before { content: "\f143";
}
.ion-help-circled:before { content: "\f142";
}
.ion-home:before { content: "\f144";
}
.ion-image:before { content: "\f147";
}
.ion-images:before { content: "\f148";
}
.ion-ios-arrow-back:before { content: "\f3cf";
}
.ion-ios-arrow-down:before { content: "\f3d0";
}
.ion-ios-arrow-forward:before { content: "\f3d1";
}
.ion-ios-arrow-left:before { content: "\f3d2";
}
.ion-ios-arrow-right:before { content: "\f3d3";
}
.ion-ios-arrow-thin-down:before { content: "\f3d4";
}
.ion-ios-arrow-thin-left:before { content: "\f3d5";
}
.ion-ios-arrow-thin-right:before { content: "\f3d6";
}
.ion-ios-arrow-thin-up:before { content: "\f3d7";
}
.ion-ios-arrow-up:before { content: "\f3d8";
}
.ion-ios-at:before { content: "\f3da";
}
.ion-ios-at-outline:before { content: "\f3d9";
}
.ion-ios-barcode:before { content: "\f3dc";
}
.ion-ios-barcode-outline:before { content: "\f3db";
}
.ion-ios-book:before { content: "\f3e8";
}
.ion-ios-bookmarks:before { content: "\f3ea";
}
.ion-ios-bookmarks-outline:before { content: "\f3e9";
}
.ion-ios-briefcase:before { content: "\f3ee";
}
.ion-ios-briefcase-outline:before { content: "\f3ed";
}
.ion-ios-browsers:before { content: "\f3f0";
}
.ion-ios-calculator:before { content: "\f3f2";
}
.ion-ios-calendar:before { content: "\f3f4";
}
.ion-ios-calendar-outline:before { content: "\f3f3";
}
.ion-ios-camera:before { content: "\f3f6";
}
.ion-ios-camera-outline:before { content: "\f3f5";
}
.ion-ios-cart:before { content: "\f3f8";
}
.ion-ios-cart-outline:before { content: "\f3f7";
}
.ion-ios-chatboxes:before { content: "\f3fa";
}
.ion-ios-checkmark:before { content: "\f3ff";
}
.ion-ios-circle-filled:before { content: "\f400";
}
.ion-ios-clock:before { content: "\f403";
}
.ion-ios-close:before { content: "\f406";
}
.ion-ios-close-outline:before { content: "\f405";
}
.ion-ios-cloud:before { content: "\f40c";
}
.ion-ios-cloud-upload:before { content: "\f40b";
}
.ion-ios-cloudy:before { content: "\f410";
}
.ion-ios-compose:before { content: "\f418";
}
.ion-ios-compose-outline:before { content: "\f417";
}
.ion-ios-contact:before { content: "\f41a";
}
.ion-ios-contact-outline:before { content: "\f419";
}
.ion-ios-copy:before { content: "\f41c";
}
.ion-ios-copy-outline:before { content: "\f41b";
}
.ion-ios-crop:before { content: "\f41e";
}
.ion-ios-download:before { content: "\f420";
}
.ion-ios-drag:before { content: "\f421";
}
.ion-ios-email:before { content: "\f423";
}
.ion-ios-email-outline:before { content: "\f422";
}
.ion-ios-eye:before { content: "\f425";
}
.ion-ios-filing:before { content: "\f429";
}
.ion-ios-filing-outline:before { content: "\f428";
}
.ion-ios-flag:before { content: "\f42d";
}
.ion-ios-flag-outline:before { content: "\f42c";
}
.ion-ios-folder:before { content: "\f435";
}
.ion-ios-folder-outline:before { content: "\f434";
}
.ion-ios-gear:before { content: "\f43d";
}
.ion-ios-glasses:before { content: "\f43f";
}
.ion-ios-glasses-outline:before { content: "\f43e";
}
.ion-ios-heart:before { content: "\f443";
}
.ion-ios-heart-outline:before { content: "\f442";
}
.ion-ios-help:before { content: "\f446";
}
.ion-ios-home:before { content: "\f448";
}
.ion-ios-home-outline:before { content: "\f447";
}
.ion-ios-infinite:before { content: "\f44a";
}
.ion-ios-infinite-outline:before { content: "\f449";
}
.ion-ios-information:before { content: "\f44d";
}
.ion-ios-information-empty:before { content: "\f44b";
}
.ion-ios-information-outline:before { content: "\f44c";
}
.ion-ios-ionic-outline:before { content: "\f44e";
}
.ion-ios-keypad:before { content: "\f450";
}
.ion-ios-keypad-outline:before { content: "\f44f";
}
.ion-ios-lightbulb:before { content: "\f452";
}
.ion-ios-location:before { content: "\f456";
}
.ion-ios-location-outline:before { content: "\f455";
}
.ion-ios-locked:before { content: "\f458";
}
.ion-ios-minus:before { content: "\f464";
}
.ion-ios-minus-outline:before { content: "\f463";
}
.ion-ios-monitor:before { content: "\f466";
}
.ion-ios-more:before { content: "\f46a";
}
.ion-ios-more-outline:before { content: "\f469";
}
.ion-ios-musical-note:before { content: "\f46b";
}
.ion-ios-navigate:before { content: "\f46e";
}
.ion-ios-paper:before { content: "\f472";
}
.ion-ios-pause:before { content: "\f478";
}
.ion-ios-people:before { content: "\f47c";
}
.ion-ios-person:before { content: "\f47e";
}
.ion-ios-photos:before { content: "\f482";
}
.ion-ios-photos-outline:before { content: "\f481";
}
.ion-ios-pint:before { content: "\f486";
}
.ion-ios-play:before { content: "\f488";
}
.ion-ios-plus:before { content: "\f48b";
}
.ion-ios-plus-empty:before { content: "\f489";
}
.ion-ios-printer:before { content: "\f491";
}
.ion-ios-redo:before { content: "\f499";
}
.ion-ios-refresh:before { content: "\f49c";
}
.ion-ios-reload:before { content: "\f49d";
}
.ion-ios-search:before { content: "\f4a5";
}
.ion-ios-settings:before { content: "\f4a7";
}
.ion-ios-star:before { content: "\f4b3";
}
.ion-ios-stopwatch:before { content: "\f4b5";
}
.ion-ios-telephone:before { content: "\f4b9";
}
.ion-ios-time:before { content: "\f4bf";
}
.ion-ios-timer:before { content: "\f4c1";
}
.ion-ios-toggle:before { content: "\f4c3";
}
.ion-ios-toggle-outline:before { content: "\f4c2";
}
.ion-ios-trash:before { content: "\f4c5";
}
.ion-ios-trash-outline:before { content: "\f4c4";
}
.ion-ios-undo:before { content: "\f4c7";
}
.ion-ios-unlocked:before { content: "\f4c9";
}
.ion-ios-upload:before { content: "\f4cb";
}
.ion-key:before { content: "\f296";
}
.ion-laptop:before { content: "\f1fc";
}
.ion-link:before { content: "\f1fe";
}
.ion-location:before { content: "\f1ff";
}
.ion-log-in:before { content: "\f29e";
}
.ion-log-out:before { content: "\f29f";
}
.ion-loop:before { content: "\f201";
}
.ion-map:before { content: "\f203";
}
.ion-minus:before { content: "\f209";
}
.ion-monitor:before { content: "\f20a";
}
.ion-more:before { content: "\f20b";
}
.ion-mouse:before { content: "\f340";
}
.ion-navicon:before { content: "\f20e";
}
.ion-navigate:before { content: "\f2a3";
}
.ion-network:before { content: "\f341";
}
.ion-paperclip:before { content: "\f20f";
}
.ion-pause:before { content: "\f210";
}
.ion-person:before { content: "\f213";
}
.ion-person-add:before { content: "\f211";
}
.ion-pie-graph:before { content: "\f2a5";
}
.ion-pin:before { content: "\f2a6";
}
.ion-pinpoint:before { content: "\f2a7";
}
.ion-plus:before { content: "\f218";
}
.ion-plus-circled:before { content: "\f216";
}
.ion-plus-round:before { content: "\f217";
}
.ion-pound:before { content: "\f219";
}
.ion-power:before { content: "\f2a9";
}
.ion-quote:before { content: "\f347";
}
.ion-record:before { content: "\f21b";
}
.ion-refresh:before { content: "\f21c";
}
.ion-reply:before { content: "\f21e";
}
.ion-reply-all:before { content: "\f21d";
}
.ion-search:before { content: "\f21f";
}
.ion-settings:before { content: "\f2ad";
}
.ion-share:before { content: "\f220";
}
.ion-social-dropbox:before { content: "\f22f";
}
.ion-social-dropbox-outline:before { content: "\f22e";
}
.ion-social-euro:before { content: "\f4e1";
}
.ion-social-euro-outline:before { content: "\f4e0";
}
.ion-social-facebook:before { content: "\f231";
}
.ion-social-facebook-outline:before { content: "\f230";
}
.ion-social-google:before { content: "\f34f";
}
.ion-social-google-outline:before { content: "\f34e";
}
.ion-social-googleplus:before { content: "\f235";
}
.ion-social-googleplus-outline:before { content: "\f234";
}
.ion-social-instagram:before { content: "\f351";
}
.ion-social-instagram-outline:before { content: "\f350";
}
.ion-social-javascript:before { content: "\f4e5";
}
.ion-social-javascript-outline:before { content: "\f4e4";
}
.ion-social-linkedin:before { content: "\f239";
}
.ion-social-linkedin-outline:before { content: "\f238";
}
.ion-social-rss:before { content: "\f23d";
}
.ion-social-rss-outline:before { content: "\f23c";
}
.ion-social-sass:before { content: "\f4ea";
}
.ion-social-tumblr:before { content: "\f241";
}
.ion-social-tumblr-outline:before { content: "\f240";
}
.ion-social-twitter:before { content: "\f243";
}
.ion-social-twitter-outline:before { content: "\f242";
}
.ion-social-usd:before { content: "\f353";
}
.ion-social-usd-outline:before { content: "\f352";
}
.ion-social-windows:before { content: "\f247";
}
.ion-social-windows-outline:before { content: "\f246";
}
.ion-social-wordpress:before { content: "\f249";
}
.ion-social-wordpress-outline:before { content: "\f248";
}
.ion-social-yen:before { content: "\f4f2";
}
.ion-social-yen-outline:before { content: "\f4f1";
}
.ion-social-youtube:before { content: "\f24d";
}
.ion-social-youtube-outline:before { content: "\f24c";
}
.ion-speakerphone:before { content: "\f2b2";
}
.ion-star:before { content: "\f24e";
}
.ion-stop:before { content: "\f24f";
}
.ion-thermometer:before { content: "\f2b6";
}
.ion-thumbsdown:before { content: "\f250";
}
.ion-thumbsup:before { content: "\f251";
}
.ion-toggle:before { content: "\f355";
}
.ion-toggle-filled:before { content: "\f354";
}
.ion-university:before { content: "\f357";
}
.ion-unlocked:before { content: "\f254";
}
.ion-upload:before { content: "\f255";
}
.ion-usb:before { content: "\f2b8";
}
.ion-videocamera:before { content: "\f256";
}
.ion-wifi:before { content: "\f25c";
}
.ion-wrench:before { content: "\f2ba";
}
body, button, input, select, textarea, p { font-family: houschka_headmedium, Helvetica, Arial, sans-serif !important;
}
| Developer | Elena [chwat] Wiener |
| Username | ewiener |
| Uploaded | September 08, 2022 |
| Rating | 3 |
| Size | 28,640 Kb |
| Views | 16,192 |
Do you need developer help for 1Adecco Styleguide and Code Standards 2016?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Elena [chwat] Wiener (ewiener) Script Codes
| Name | Size |
| Sticky Footer B-13823 | 32,542 Kb |
| Social Insurance - ApplySocialInsurance | 71,887 Kb |
| Social Insurance 2 Application | 6,975 Kb |
| Justified Nav Bootstrap | 4,090 Kb |
| Styleguide CMS icons | 17,934 Kb |
| Adecco Group 1 | 7,056 Kb |
| Flexbox Card 12-15 | 2,894 Kb |
| Worldwide Variables | 4,820 Kb |
| Facet Sidebar | 5,438 Kb |
| Bootstrap Dashboard Example | 4,390 Kb |
Create amazing blog posts with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| A Pen by Alex Edwards | Exards | 8,218 Kb |
| Blog | Rottingroom | 1,430 Kb |
| GLSL Hills | Ykob | 6,991 Kb |
| IE flex collapse bug fix | Rowno | 2,678 Kb |
| SVG email test v2.0 | M_J_Robbins | 2,090 Kb |
| Sticky div | Kaslab | 2,225 Kb |
| Count up | Alanshortis | 2,391 Kb |
| SVG Animation | Pollardld | 3,133 Kb |
| Hello People | Danburrows | 2,365 Kb |
| Horizontal slider on scroll | Alojzije | 2,672 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!