Skip to content
Snippets Groups Projects
Commit 504cced0 authored by Severine Duvaud's avatar Severine Duvaud
Browse files

Copy/paste of info from Vassilios' presentation + technical recommendation for the footer.

parent 2154b3e8
Branches
No related tags found
No related merge requests found
This is a package with examples using a minimal version of the new SIB CSS.
1. Introduction:
The SIB CSS is based on the responsive **bootstrap** framework with some custom enhancements.
It provides a good display on many devices (phones, tablets, laptops and desktop computers).
2. Guidelines:
**Page Header**
Logo or name of website should appear on the __top left__ of the page
It is also link (URL) to the home page.
SIB logo should appear on the __top right__ of the page
If several logos are present, the SIB logo should always be __on the very right__.
**Page Footer**
‘SIB Swiss Institute of Bioinformatics’ (URL) should be present in the footer.
If there are several institution URLs, SIB should always be __on the very left__.
**Page Content**
Currently, CSS classes are available for breadcrumbs, links, buttons, paginations, tables, and multi-columns.
3. Package:
The sib-css-admin-sites package provides examples using a minimal version of the new SIB CSS.
It is composed of 2 types of example pages:
- home pages
......@@ -7,3 +29,10 @@ It is composed of 2 types of example pages:
with 2 types of displays (depending on users' needs):
- logo on the top left
- brand name on the top left
4. Technical recommendations:
- Footer: We do not use any 'position' property for the CSS class 'footer'. Hence, the footer is not positioned in any special way; it is always positioned according to the normal flow of the page. For pages with few content, the footer can thus be in the middle of the page. In such case, you should either add the 'position' property to the 'footer' CSS class, with associated value 'absolute' (but beware of the display when resizing the page) or you should add a 'style' attribute to the div 'container' element with associated value 'min-height:1060px' (for example).
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment