page title : Style, default template

This is the page main content. It uses default template.
it’s in a
<section class=”container”>

by default, 1040px. You can override width with
body{--max-width:1200px}.

you can’t use full width row with this template. To do this, use Page-Full-Width template instead

There is a full css reset, so, for instance

  • ul/li have no style; except if they are in a text-content box
  • links have no default style
  • Hn have no style.

However, for a better documentation visibility, I’ve added a quick stylesheet in jblank-child

It uses an opinionated style sheet in custom.css. jblank avoid the use of bootstrap , or foundation, or any other complicated framework , that will get deprecated and is hard to maintain. plus adds weight to your website

this a div class=”text-content”, so ul/li bullet points appear.

  • section are automatically centered , a default top/bottom margin of 30px

We have a full layout system to structure content :

Grid. It uses classes : grid (for auto grid), grid-2, grid-3, grid-4

Grid are css-grid, elements are always the same width. Reponsive is

This a div with a grid 2 class

My first element

My second element

This a div with a grid 3 class

My first element
My second element
I’m not the same size
My third element

Elements. If you have X elements on a row, this is the best. Just wrap the 3 elements in a div class=”elements”

First arg
Second arg. Image is not the same height
Third arg. Image is not the same width

align-left-right

It should be quite similar to grid-2, but with a focus of beign aligned lef/right

For example, a text on the left

which explains the feature. And an image on the right to illustrate it

Alignment modificators

MODIFICATORS for SELF:

  •  left, center, right
  • top, middle, bottom

MODIFICATORS for container CONTENT:

  • align-left
  • align-center (default)
  • align-right
  • align-top
  • align-middle
  • align-bottom

eg. elements align-middle

we are in a elements align-middle, so all are vertially centered
and by default horizontally centerd too,
but this third div has an “left” class

eg. grid align-top

  • we are in a ul class=”elements align-top”
  • and by default aligned center,
  • but this third div has an “right” class