Card heading
Card content*
*with small content
Based on MVP, but extensively extended, and originally built to be used with AuroraCMS,
it is MIT Licensed and you are free to fork, modify, contribute, or abuse it to your hearts content.
This page is to show the styling of the elements, and their markup.
Area's with this background colour area are documentation area's.
Colours, Borders, and some elements widths can be controlled by the :root styling directive at the top of the stylesheet, so if you only want to change the colours you only need to edit this area. Elements have been designed to be as responsive as possible, and without using @media breakpoints unless absolutely necessary. Typography is an exception to our breakpoint rule so text elements are easily readable on different devices.
You may notice a lot of elements styled similarly to other CSS Frameworks. This is on purpose, the styling wasn't simply copied, but replicated for recognisibility of components. In essence, we've taken the best part of other Frameworks and best practises to try and facilitate readability for the end users that will be visually impacted by the styling.
:root {
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--body-background-color: #fff;
--color: #000;
--color-muted: #6c757d;
--link-color: #0044ff;
--link-color-hover: #0056b3;
--content-background-color: #920de90b;
--content-border-color: #007bff;
--box-shadow-color: #f4f4f4;
--border-radius: .25rem;
--border-color: #e9e9e9;
--border-width: 1px;
--mark-background-color: #ff0;
--menu-background-color: #fff;
--menu-background-color-hover: #ddd;
--menu-background-color-active: #ccc;
--menu-color: #444;
--menu-color-active: #000;
--menu-link-color: #444;
--menu-link-color-hover: #666;
--menu-link-color-active: #000;
--menu-dropdown-background-color: #fff;
--menu-dropdown-border-color: #e9e9e9;
--button-color: #fff;
--button-color-hover: #f5f5f5;
--button-background-color: #007bff;
--button-background-color-hover: #0069d9;
--button-border-color: #007bff;
--button-border-color-hover: #0069d9;
--table-background-color: #fff;
--table-color: #000;
--table-head-background-color: #000;
--table-head-color: #fff;
--table-border-color: #e9e9e9;
--table-zebra-background: #f9f9f9;
--form-border-color: #ced4da;
--form-border-color-hover: #007bff;
--form-color: #495057;
--form-placeholder-color: #999;
--form-focus-color: #495057;
--form-focus-border-color: #8bbafe;
--form-focus-shadow: rgba(13, 110, 253, .25);
--form-required-color: #dc3545;
--form-required-border-color: #dc3545;
--form-focus-required-shadow: rgba(253, 110, 13, .25);
--form-valid-color: #28a745;
--form-valid-border-color: #28a745;
--form-valid-shadow: rgba(40, 167, 69, .25);
--slidertron-height: 400px;
--slidertron-background-color: #ddd;
--jumbotron-background-color: #ddd;
--badge-background-color: #5755d9;
--badge-color: #fff;
--dialog-background-color: #fff;
--dialog-border-color: #e9e9e9;
--dialog-border-radius: .25rem;
--dialog-min-width: 460px;
--dialog-max-width: 800px;
--tooltip-background-color: #000;
--tooltip-color: #fff;
--primary-background-color: #cfe2ff;
--primary-border-color: #bbd6fe;
--primary-color: #073984;
--primary-link: #042454;
--secondary-background-color: #e2e3e5;
--secondary-border-color: #d6d8db;
--secondary-color: #383d41;
--secondary-link: #202326;
--default-background-color: #ddd;
--default-border-color: #ced4da;
--default-color: #000;
--default-link: #000;
--info-background-color: #d1ecf1;
--info-border-color: #bee5eb;
--info-color: #0c5460;
--info-link: #062c33;
--success-background-color: #d4edda;
--success-border-color: #c3e6cb;
--success-color: #15572f;
--success-link: #0b2e13;
--warning-background-color: #fff3cd;
--warning-border-color: #ffeeba;
--warning-color: #856404;
--warning-link: #533f03;
--danger-background-color: #f8d7da;
--danger-border-color: #f5c6cb;
--danger-color: #721c24;
--danger-link: #491217;
--code-background-color: #f8f9fa;
--code-color: #000;
--code-border-color: #e9e9e9;
--justify-important: center;
--justify-normal: left;
--width-card: 285px;
--width-card-medium: 460px;
--width-card-wide: 800px;
--width-content: 100%; }
@media (prefers-color-scheme: dark) {
:root {
--body-background-color: #333;
--color: #f7f7f7;
--color-muted: #aaa;
--link-color: #007bff;
--link-color-hover: #0056b3;
--content-background-color: #555;
--content-border-color: #007bff;
--box-shadow-color: #bbbbbb10;
--border-color: #444;
--menu-background-color: #343a40;
--menu-background-color-hover: #454b51;
--menu-background-color-active: #454b51;
--menu-color: #fff;
--menu-color-active: ;
--menu-link-color: #ffffff80;
--menu-link-color-hover: #ffffff40;
--menu-link-color-active: #fff;
--menu-dropdown-background-color: #343a40;
--menu-dropdown-border-color: #666;
--table-background-color: #444;
--table-color: #fff;
--table-head-background-color: #000;
--table-head-color: #fff;
--table-border-color: #666;
--table-zebra-background: #555;
--jumbotron-background-color: #222;
--code-background-color: #222;
--code-color: #fff;
--code-border-color: #666; }
}
/* Extra small devices (portrait phones, less than 576px)
No media query for `xs` since this is the default.
Obviously you can set custom breakpoints, these are here to
help faciliate ease of use.
*/
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}
This area is made up of an <address/> block element, with <aside/>.
<address>
<aside>
<a href="/"><img src="logo.png" alt="Alt Text"/></a>
</aside>
<aside>
Address Information
</aside>
<aside>
Address Information
</aside>
<aside>
Address Information
</aside>
</address>
Typography includes elements that are used to style user readable content, such as Headings, Paragraphs and so on. Below are the commonly used elements and how the default styling looks.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Paragraph Text
You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as italicized text.
<p>Paragraph Text</p>
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
attr
HTML
<abbr title="attribute">attr</abbr>
<abbr title="HyperText Markup Language">HTML</abbr>
I18N
<abbr title="Internationalization">I18N</abbr>
WWW
<acronym title="World Wide Web">WWW</acronym>
Bold
<strong>Bold</strong> <b>Bold</b>
Citation
<cite>Citation</cite>
Deleted
<del>Deleted</del>
Emphasis
<em>Emphasis</em>
Italic
<i>Italic</i>
Inserted
<ins>Inserted</ins>
Ctrl + S
<kbd>Ctrl + S</kbd>
Highlighted
<mark>Highlighted</mark>
A short quotation.
<q cite="https://link.com/">A short quotation.</q>
Small Text
<small>Small Text</small>
Strikethrough
<s>Strikethrough</s>
Sample
<samp>Sample</samp>
Text Subscripted
<sub>Subscripted<sub>
Text Superscripted
<sup>Superscripted</sup>
<time>20:00</time>
Underline
<u>Underline</u>
x = y + 2
<var>x</var> = <var>y</var> + 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<cite title="Source Title"Someone famous in Source Title</cite>
</blockquote>
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Eget porttitor lorem</li>
</ul>
<dl>
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>
<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
<p>Donec id elit non mi porta gravida at eget metus.</p>
</dd>
<dt>Nesting</dt>
<dd>
<dl>
<dt>Nested definition list</dt>
<dd>Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
</dl>
</dd>
</dl>
<section> should be wrapped as inline.<p>Sample text here...</p>
<p>And another line of sample text here...</p>
For example, <code><section></code> should be wrapped as inline.
<pre><code>
<p>Sample text here...</p>
<p>And another line of sample text here...</p>
</code></pre>
<samp>This text is meant to be treated as sample output from a computer program.</samp>
<img src="..." alt="Alt Text">
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." alt="Alt Text">
</picture>
<figure>
<img src="..." alt="Alt Text">
<figcaption>A caption for the above image.</figcaption>
</figure>
| # | First | Last | Handle |
|---|---|---|---|
| 1 | First | Last | @handle |
| 2 | First | Last | @handle |
<table>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>First</td>
<td>Last</td>
<td>@handle</td>
</tr>
<tr>
<th scope="row">2</th>
<td>First</td>
<td>Last</td>
<td>@handle</td>
</tr>
</tbody>
</table>
The next sections are areas or elements with assigned styling that are really extras that can be modified to suite by editing their style poperties directly in the stylesheet for that element, or you can just change their colour, border styles or other common presentation styles in the :root directive as shown before the Typography section.
Section Subheading
Standard un-data'd cards
Card content*
*with small content
Card content
Card content
Card content
<section>
<header>
<h2>Section Heading</h2>
<p>Section Subheading</p>
<p>Standard un-data'd cards</p>
</header>
<article>
<h3>Card heading</h3>
<p>Card content*</p>
<p><small>*with small content</small></p>
</article>
<article>
<h3>Card heading</h3>
<p>Card content</p>
</article>
<article>
<h3>Card heading</h3>
<p>Card content</p>
</article>
<article>
<h3>Card heading</h3>
<p>Card content</p>
</article>
</section>
Section Subheading
data'd cards
Card content*
*with small content
Card content with notification
Card content
<section>
<section class="content-items">
<header>
<h2>Section Heading</h2>
<p>Section Subheading</p>
<p>data'd cards</p>
</header>
<article class="card">
<img src="image.png" alt="Sample">
<h3>Card heading</h3>
<p>Card content*</p>
<p><small>*with small content</small></p>
</article>
<article class="card">
<img src="image.png" alt="Sample">
<h3>Card heading</h3>
<p>Card content <sup>with notification</sup></p>
</article>
<article class="card">
<img src="image.png" alt="Sample">
<h3>Card heading</h3>
<p>Card content</p>
</article>
</section>
<aside class="sidemenu">
Aside Contents
</aside>
</section>
<form>
<fieldset>
<legend>Form Title</legend>
<label for="input1">Text Input Label</label>
<input type="text" id="input1" name="input1" placeholder="Text Input Placeholder">
<label for="email">Email Address</label>
<input type="email" id="email" name="email" required placeholder="Email Placeholder">
<div class="requirements alert alert-danger">
Must be a valid email address.
</div>
<Label for="input2">Password Label</label>
<input type="password" id="input2" name="input2" placeholder="Password Placeholder" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}">
<div class="requirements alert alert-danger">
Your password must be at least 6 characters as well as contain at least one uppercase, one lowercase, and one number.
</div>
<label for="dateinput">Date (unstyled WIP)</label>
<input type="date" id="dateinput" name="dateinput">
<label for="timeinput">Time (unstyled WIP)</label>
<input type="time" id="timeinput" name="timeinput">
<label for="datetimeinput">Date/Time (unstyled WIP)</label>
<input type="datetime-local" id="datetimeinput" name="datetimeinput">
<label for="rangeinput">Range</label>
<input type="range" id="rangeinput" name="rangeinput" min="0" max="100" step="1" value="50">
<label for="colorinput">Color (unstyled WIP)</label>
<input type="color" id="colorinput" name="colorinput">
<input type="file" id="fileinput" name="fileinput">
<label for="fileinput">File Select Button</label>
<label for="checkboxinput">Checkbox</label><br>
<input type="checkbox" id="checkboxinput" name="checkboxinput"><br>
<label for="radioinput">Radio</label><br>
<input type="radio" id="radioinput" name="radioinput"><br>
<label for="progress">Progress Label</label>
<progress id="progress" value="80" max="100"></progress>
<label for="meter">Meter Label</label>
<meter id="meter" min="0" low="10" optimum="50" high="90" max="100"></meter>
<label for="select">Select Label</label>
<select id="select" required>
<option value="option1">option1</option>
<option value="option2">option2</option>
</select>
<label for="textarea1">Textarea Label</label>
<textarea id="textarea1" placeholder="Textarea Placeholder" required></textarea>
<button type="submit">Submit</button>
</fieldset>
</form>
The page footer for using at the bottom of most of a websites page layout uses class="pagefooter".
<footer>
<aside>
Address Information
</aside>
<aside>
Address Information
</aside>
<aside>
Address Information
</aside>
<aside>
Address Information
</aside>
</footer>
These Classes are available as extras for various User Interface utilities. We've tried to add classes that are common to many frameworks to help facilitate ease of transition.
/* Display Classes */
.hide, /* Bootstrap 2, 3 */
.hidden, /* Bootstrap 3 */
.d-hide, /* Spectre */
.d-none, /* Bootstrap 4, Spectre */
.is-invisible, /* Foundatio 6 */
[hidden] { /* Foundation 6 */
display: none; }
.d-visible { /* Spectre */
visibility: visible; }
.d-invisible, /* Spectre */
.invisible { /* Bootstrap 2, 3 */
visibility: hidden; }
.d-inline { /* Bootstrap 4 */
display: inline; }
.d-inline-block { /* Bootstrap 4 */
display: inline-block; }
.is-visible, /* Foundation 6 */
.show, /* Bootstrap 2 */
.d-block { /* Bootstrap 4 */
display: block; }
.d-table { /* Bootstrap 4 */
display: table; }
.d-table-row { /* Bootstrap 4 */
display: table-row; }
.d-table-cell { /* Bootstrap 4 */
display: table-cell; }
.d-flex { /* Bootstrap 4 */
display: flex; }
.d-inline-flex { /* Bootstrap 4 */
display: inline-flex; }