So you want to edit the landing page
The preCICE documentation uses the popular Bootstrap 3.4 framework, based on documentation-theme-jekyll. The general idea is to adapt the layout and styling of the original theme as little as possible (‘never change a running system’) and style the landing page index.html
relative to the original styling.
Style sheets
The original theme consists (mainly) of
customstyles.css
: main style sheettheme-blue.css
: assembly of color-affecting styles
For the preCICE site these have been adapted to
customstyles.css
: as beforecustomstyles-precice.css
: material changes to the above style sheettheme-precice.css
: adaptation of color schemeslanding-page
: styles specific to the landing page.
Full-bleed layout
Currently the landing uses a full-bleed layout with three different background colours, white (default), light blue and dark blue. The default white (i.e. no background-color
set) is implemented through:
<div class="container">
<div class="section">
<div class="row">
<div class="col-lg-12">
Some content
</div>
</div>
</div>
</div>
A non-white background is achieve by wrapping the above in <div class="background-light"></div>
or <div class="background-dark"></div>
.
Bootstrap grid
Let’s further break down the structure of the code example.
<div class="container"> <!-- Bootstrap grid -->
<div class="section">
<div class="row"> <!-- Bootstrap grid -->
<div class="col-lg-12"> <!-- Bootstrap grid -->
Some content
</div>
</div>
</div>
</div>
The highlighted classes implement the Bootstrap grid whereas .section
is a custom style.
As a quick visual example, when the following .row
s are placed in .container
we have a number of .col-X-Y
column classes available, where X
targets the viewport and Y
denotes width from 1-12. For more information see the Bootstrap docs.
Code:
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
Output:
Typical example
In the case of the landing page a typical example looks like this:
<div class="background-light">
<div class="container">
<div class="section">
<div class="row">
<div class="col-lg-12">
<h2 class="section-header">A new section that wasn't there before</h2>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-6">
</div>
<div class="col-md-4 col-sm-6">
</div>
<div class="col-md-4 col-sm-6">
</div>
</div>
<div class="row">
<div class="col-lg-12">
<a href="#" class="btn btn-primary no-icon" role="button">Link <i class="fas fa-chevron-right"></i></a>
</div>
</div>
</div> <!-- section -->
</div> <!-- container -->
</div> <!-- background-light -->
This proto-example of
- a section header,
- some content, and a
- concluding link
consists of a separate .row
for each of the three elements, followed by one or more .col-X-Y
that make up a total width of 12.