How to use

Read the text on this page, inspect the source, and click through the main menu above to see examples of how you can use the code in this template.

This home page layout uses the flexbox element. You can create different numbers of columns and use the percent classes in the CSS to set the box widths. This box (or 'flex item') has a class of percent-33.

You can put a picture in here. If you do, you might want to make the row a fixed height.

This box has a class of percent-66. Here is an article about a flexbox grid system. It's similar to the technique used on this page. The only difference is that the flexbox content in this page is in a <div> nested within the flex item <div>. This gives us more flexibility with padding.

This box also has the class border, which adds the border, and a class padding. By default there is no padding in the inner <div>. If you want it, then add the padding class. If you don't want padding at all then you can remove the inner <div>.

Layout

This template also uses flexbox for the main layout. It's very simple. You include one, two, or no sidebars and change the class of the <div> with the class of body-content. There are no sidebars on this page so we have:
<div class="body-content one-column">
The body-content area is the area between the header and footer.

The Miscellaneous page has a two-column layout, and the rest of the pages have a three-column layout.

Columns within a page

You create columns within the page by adding flexboxes, like on this page.

If you don't want gutters between the columns, leave the gutters class off the flexrow div.

Remember

This isn't supposed to be a framework like Bootstrap or Foundation. It's just supposed to give some code that will help you create an ELIXIR template in your own system. You may prefer to use a native starter theme in a CMS like Drupal or Wordpress, or roll your own theme for your system. These will have their own classes, layout techniques and ways of presenting images. But hopefully you can adopt much of the code in this template to your own system.

SASS

The CSS was generated from SASS, a CSS preprocessor. SASS makes it easier to ensure consistency across the site and maintain your code. The colours on the site, for example, are all variables in SASS. This means that the orange is the same everywhere.

SASS (cont.)

If you don't use SASS then I do recommend using it (or another CSS preprocessor). Have a look at the SASS website to start with, but there are tons of good tutorials online, too. I normally use a SASS framework like Compass, but to keep things simple I haven't used it here.

SASS (cont.)

You may also want to streamline your coding by using a task runner like Grunt or Gulp.

You don't have to, though, you can just edit the CSS provided.

Javascript

This template doesn't use any javascript. The responsive menu and search box are done with CSS. It isn't a widely used technique so it's probably best to stick with a trusted Javascript solution using your favourite Javascript library. Here is an article about the pure CSS method, though, if you're interested.

Safari bug

The Safari browser up to 10.1 does not give content within a flex item equal heights. In other words the boxes on this page would shrink to the height of their content and would not form rows of equal height. This is a known big that has been fixed in Safari 11. The workaround is to give the flex items the property of display: flex (see this discussion). This may not work for you in all situations. If anything strange happens in your flexbox try neutralising this rule by setting the flex items to display: inline . This bug is relatively obscure and does not affect the layout of this template.

Browser support

This template should work on any modern browser (mobile or desktop). It will probably be a bit buggy in IE10 and below. If you need to support those browsers then you can use display: table instead of flexbox, as in this Codepen.

Font

This template uses the Google font Lato.

A note on the current elixir-europe site

The current site uses Drupal 7. This came out in 2011, and needed to support browsers like IE8 so the code is relatively old-fashioned. This template uses more modern code, and different code to the main ELIXIR website. It's the code the main ELIXIR site is aiming for!

The current ELIXIR site, incidentally, is a subtheme of AdaptiveTheme.

The code for this row is:

<div class="flexrow gutters">
  <div class="percent-50">
    <div class="tinted">
      (Content in here)
    </div>
  </div>
  <div class="percent-50">
    <div class="tinted">
      (Content in here)
    </div>
  </div>
</div>

Font

This template uses the Google font Lato.

Other things to mention

Schema.org, sectioning, atomic design (how SASS organised), PLatform and Use Case icons.