Semantic HTML should always look right. The Globals aims to style everything in according to the general design. That means no extra CSS classes are needed to make things fit in.
Globals can also be extended with several variants for when you need to go beyond the default styling of something.
This page goes through the most relevant elements.
<button>, .button
-primary
-danger
-dark
-text
-icon
-small
-hover-rotate
Default button. Use .button for button behavior on <a>
For most important action in a given context.
For actions which causes permanent removal of things.
For buttons on top of $background-brightness-low
For less important actions where a full button seem bloated.
For buttons containing a single icon and no text.
Smaller buttons. Useful for interfaces with many buttons, or for buttons in table rows.
Rotates the button on hover, used for the cogwheel menu button.
<input>
<input class='-small'>
<textarea>
<textarea class='-small'>
<select>
<select class='-small'>
<input type='checkbox'>
<input type='radio'>
Background color can be alternated using -odd-rows-background.
| Heading 1 | Heading 2 | Heading 3 |
|---|---|---|
| Row 1 a | Row 1 b | Row 1 c |
| Row 2 a | Row 2 b | Row 2 c |
| Row 1 a | Row 1 b | Row 1 c |
| Row 2 a | Row 2 b | Row 2 c |
Optimized for use in building GUI. See "article" below on how to create larger text structures.
<h1>
<h2>
<h3>
<p>
<a>
Page title
Important titles, for example in modals
Section titles, when you need to divide content into several sections
Body text
Internal navigation or external sources. Use buttons for all other user actions
Using semantic HTML to build GUI means we don't want annoying margins or uneccecery constraints on font elements. Unfortunately this means that a bigger text structure with several topics and paragraphs won't be optimized for readability out of the box.
<article> to the rescue! Wrapping a text structure in <article> optimizes
margins for readbility in text structures with multiple font elements.
It also adds a max width constraint. This is because having too many words per row substansially decreases readability.
<article>
p text
<div>
There are two groups of microorganisms: Prokaryote and Eukaryote
Prokaryotes are organisms made up of cells that lack a cell nucleus or any membrane-encased organelles. This means the genetic material DNA in prokaryotes is not bound within a nucleus.
Within a eukaryotic cell, each membrane-bound structure carries out specific cellular functions. Here is an overview of many of the primary components of eukaryotic cells.
Eukaryotes are organisms whose cells have a nucleus and other organelles enclosed by a plasma membrane.
Organelles are internal structures responsible for a variety of functions, such as energy production and protein synthesis.
Within a eukaryotic cell, each membrane-bound structure carries out specific cellular functions. Here is an overview of many of the primary components of eukaryotic cells.
<article>
There are two big groups of microorganisms: Prokaryote and Eukaryote
Prokaryotes are organisms made up of cells that lack a cell nucleus or any membrane-encased organelles. This means the genetic material DNA in prokaryotes is not bound within a nucleus.
Within a eukaryotic cell, each membrane-bound structure carries out specific cellular functions. Here is an overview of many of the primary components of eukaryotic cells.
Eukaryotes are organisms whose cells have a nucleus and other organelles enclosed by a plasma membrane. Organelles are internal structures responsible for a variety of functions, such as energy production and protein synthesis.
Within a eukaryotic cell, each membrane-bound structure carries out specific cellular functions. Here is an overview of many of the primary components of eukaryotic cells.