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
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
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">
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
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.
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.
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.
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.
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>
This template uses the Google font Lato.
Other things to mention
Schema.org, sectioning, atomic design (how SASS organised), PLatform and Use Case icons.