A Micro Micro CMS

CSS examples

Default theme (as in default.css and default-minified.css):


<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

There is not normally a need to use paragraph <p> tags if a blank line is left above and below the text. It happens automatically.


<ul>


<ol>

  1. Free ready-to-use website publishing system
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  3. Featherweight for simplicity and speed

<div class="bg1">

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

  • Free ready-to-use website publishing system
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Featherweight for simplicity and speed

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div class="bg2">

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

  • You own the site on your web server
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Choice of site languages

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div class="bg3">

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

  • You own the site on your web server
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Choice of site languages

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div class="bg4">

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

  • You own the site on your web server
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Choice of site languages

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div class="box">

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

  • Free ready-to-use website publishing system
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Featherweight for simplicity and speed

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Using the above boxes for text, leave a blank line above and below:

<div class="box">

Text with blank line above and below.

</div>

<p class="box">

When class="box" is used as a paragraph class the text is centred.

Image in <div class="box">

Emily

Unlike text, leave no space above and below the image HTML:

<div class="box" style="max-width: 640px;">
<img src="img/filename.jpg" width="640" height="whatever" alt="">
<h5>Emily</h5>
</div>

Image class="box"

Emily

Rather than put the image inside <div class="box"> use "box" as an image class:

<img src="img/filename.jpg" width="640" height="whatever" alt="" class="box">

<p class="caption">Emily</p>

The "box" border is 50 pixels each side so an image 640 pixels wide (or less) fits in the 740 pixel wide column (caption optional).

<ul class="listing">

<ul class="boxlist">

For menu pages.

Markup:

<ul class="boxlist">
<li><a href="#">Menu link one / more text</a></li>
<li><a href="#">Menu link two / more text</a></li>
<li><a href="#">Menu link three / more text</a></li>
</ul>

Information »

Page last modified: 08 December, 2020