The CSS Framework for the Hoodie Open Source Project

This is a small CSS Framework to maintain all the Hood.ie related websites.

Getting started

To get started check out the recent version and type npm install.
The default task (just type ‘grunt’) will fire up a local server at localhost:1337 with livereload and dev Sass compiling (including sourcemap and nested output).
There’s also a production task (‘grunt build’) which at this point just spits out a compressed CSS file, without sourcemap in a dedicated folder(css/build).

!IMPORTANT

We’re using a font loading method on http://hood.ie which relies on the following script, which has to be included in the head.html file. If the page has multiple head includes the script has to be included in each one of them.

        <script>
      (function(){
          function addFont() {
              var style = document.createElement('style');
              style.rel = 'stylesheet';
              document.head.appendChild(style);
              style.textContent = localStorage.firaSans;
          }

          try {
              if (localStorage.firaSans) {
                  // The font is in localStorage, we can load it directly
                  addFont();
              } else {
                  // We have to first load the font file asynchronously
                  var request = new XMLHttpRequest();
                  request.open('GET', '/dist/css/fonts.css', true);

                  request.onload = function() {
                      if (request.status >= 200 && request.status < 400) {
                          // We save the file in localStorage
                          localStorage.firaSans = request.responseText;

                          // ... and load the font
                          addFont();
                      }
                  };

                  request.send();
              }
          } catch(ex) {
              // maybe load the font synchronously for woff-capable browsers
              // to avoid blinking on every request when localStorage is not available
          }
      }());
  </script>

Editorconfig & coding standards

Use the .editorsconfig file with your editor of choice to ensure a consistent coding style. Plugins are available at http://editorconfig.org/#download.

Sass

  • Use 1 space between your selector and the opnening curly brace.
  • Use breakpoints with @include breakpoint() from the _breakpoints.scss inside your declaration.
  • Do not add arbitrary new breakpoints.
  • Always set breakpoints in em.

Rem-calc

We use rem units instead of pixels. There is a Sass function called “rem-calc” to simplify this. Just use rem-calc(px-value). You can also provide multiple values like you would do with a CSS shorthand e.g. margin: rem-calc(20 0 20).
If you’re using Sublime Text you can add this handy snippet to your user directory(user/Library/Apllication\ Support/Sublime\ Text\ 3/Packages/User:

<snippet>
  <content><![CDATA[
rem-calc($1)
]]></content>

<tabTrigger>rem</tabTrigger>
</snippet>

Save it as name.sublime-snippet. After you’ve done that restart Sublime Text. Now you just have to type rem(tab) and you’ll get rem-calc(cursor here).

gh-pages branch

This branch will be developed parallel to the main branch to set up the page structure and functionality. To start the local Jekyll environment just follow this guide: http://jekyllrb.com/docs/installation/. Inside the project folder type jekyll serve --watch. Afterwards the hood.ie website should be available for you on localhost:4000.

How to use

Themes

<body class="orange">

$orange: #e94e1b; $orange-l: #f9c4b3;

<body class="blue">

$blue: #312783; $blue-l: #bfbcd8;

<body class="green">

$green: #0b8e36; $green-l: #a9d6b8;

<body class="yellow">

$yellow: #f9b233; $yellow-l: #fce3b6;

<body class="lilac">

$lilac: #520644; $lilac-l: #c1a7bc;

<body class="gray">

$gray-1: #282828; $gray-5: #b3b3b3;

Font colours

$gray-2: #404040;



$gray-3: #606060;



$gray-4: #999;



Background

$gray-6: #fdfdfd;

Layout

header with 100% width and colour of theme

<header>
</header>

.logo header with logo position / left**

<header>
    <div class="logo"></div>
</header>

.main-nav header with main navigation / middle

<header>
    <nav class="main-nav">
</header>

.meta-nav header with meta navigation / right

<header>
    <ul class="meta-nav">
</header>

.sub-nav, hidden with .hide helper

<header>
    <section class="hide">
         <ul class="sub-nav">
</header>

.content, content-div, max-width of 840px, centered, adds big logo to content when a theme is selected

<div class="content">