Content
Layout
Components
The goal of this CSS reference is to show you the bricks provided by the framework to design your application. Then with the inspector for your browser (right-click on an item) you can pick-up the classes and DOM structures needed.
This bootstrap cover 80% of main needs, you can write an other CSS file for the rest of your project or try to reuse those 80% as much as possible.
CSS variables are used for colors and spacing (padding and margin) to have a single point to update.
Very often inline elements have relative size to the font size, so a button will be bigger if the paragraph which contains it is bigger.
.f1 or h1
.f2 or h2
.f3 or h3
.f4 or h4
.f5 or h5 (default, 1rem, 16px)
.f6 or h6
.f7 (very small and dense)
.text-left
.text-right
.text-center
.text-ellipsis This is a long text which will be truncated. This is a long text which will be truncated. This is a long text which will be truncated.
.text-no-select Impossible to select, useful to remove from copy/paste selection or apply on buttons
.text-light Makes small fonts more readable in some situations
.measure-narrow Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page… the 66-character line (counting both letters and spaces) is widely regarded as ideal. For multiple-column work, a better average is 40-50 characters.
.measure Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page… the 66-character line (counting both letters and spaces) is widely regarded as ideal. For multiple-column work, a better average is 40-50 characters.
.measure-wide Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page… the 66-character line (counting both letters and spaces) is widely regarded as ideal. For multiple-column work, a better average is 40-50 characters.
All colors of the framework are available with their name directly.
.primary
.success
.warning
.danger
.black
.gray-darker
.gray
.white
All text colors are available as background colors with the prefix bg-*, more grays are available to allow layout visual partitions.
.bg-primary
.bg-success
.bg-warning
.bg-danger
.bg-black
.bg-gray-darker
.bg-gray
.bg-gray-light
.bg-gray-lighter
.bg-white
The .btn class is designed to be used with <button> elements.
Buttons can have different states: .active, .selected, .loading (class name) and disabled (HTML attribute).
Five colors are available, .btn might be used everywhere, .btn.btn-primary for main buttons, .btn.btn-danger for destructive actions
.btn.btn-success for confirmatory actions, .btn.btn-warning for worrying actions.
Normal:
Active:
Disabled:
Loading:
Group buttons together:
Tabs:
Menu:
Dropdown:
Dropup:
Tooltip:
Switch Toggle:
The .badge class can be used to emphasize a field. It can be used together with all background and font classes:
Forms are a way to have user inputs in addition to buttons.
Always put a <label> tag with a for attribute associated to the id of the <input> it is targeting.
It helps the user to click, especially for checkboxes which are small.
<form> tag is not useful in single page application, except for a reset button which needs it.
Add the base class .table to any <table>
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Add .table-sm to make tables more compact by cutting cell padding in half.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | tr.table-primary | tr.table-primary | tr.table-primary |
| 3 | Larry | the Bird |
A simple way to modernize an app is to put some radius, it feels less raw and more elegant without designer skills.
The display specifies the type of rendering box used for an element.
.d-none (will turn off the display of element and its children)
.d-inline (span default behavior)
.d-inline-block (button, img, input default behavior)
.d-block (div default behavior)
inline inline inlineIncrease user experience and awareness with effects.
.highlight will flash the background in yellow, once
.spin-around will rotate 360° the item, forever.
.appearance will show the item slowly, once
Levels is a way to elevate contents and stack them, for example a menu is above the rest of the page which scrolls below. See Material Design.
.shadow-level0 for content (z-index and shadow)
.shadow-level1 for card of content
.shadow-level2 for topbar
.shadow-level3 for dropdown menu
.shadow-level4 for notification
.level0 (only z-index)
.level1
.level2
.level3
.level4
Specifies the type of positioning method used for an element and can be enhanced with some attributes (top, left, bottom, right).
.relative is positioned relative to its normal position
.absolute is positioned relative to the nearest positioned ancestor
.absolute-fill will fill completely its nearest parent which has .relative
Flex is the defacto way to manage the layout and alignment. For example, it makes easy to split the view in both content and sidebar or arrange many items in a container.
.flex-row
.flex-row
.flex-row
.flex-column
.flex-wrap
.flex-wrap.justify-center
.flex-wrap.justify-between
.flex-wrap.justify-around
.flex-row.items-start
.flex-row.items-end
.flex-row.items-center
.flex-row.items-baseline
.flex-row.items-stretch
This should always be applied to layouts before content to avoid overflow.
.scroll-y only show vertical scroll bar (recommended)
.scroll-auto add scroll bars if needed
.scroll-off just hide all overflow
<div class="absolute-fill scroll-y">
<p>
Very long text that should be scrollable if window is too small
...
</p>
</div>Main widths used to cut a view: full view (100%), 2 parts (50%), 3 parts (33%) and 4 parts (25%). More than this begins to be difficult to read.
The current documentation use a 25% sidebar and a flex-grow content for the rest (75%).
.w-25
.w-33
.w-50
.w-75
.w-100
Provides a spacing scale based on powers of two that starts at .25rem (for most devices this will be the equivalent of 4px).
Always use the same spacing for two contents that should be aligned (margin value of a button above a text with same padding value).
Padding all
Padding horizontal
Padding vertical
Margin all
Margin horizontal
Margin vertical
Main app layout with navbar, menubar and its content.
Example of basic layout with toolbar and one sidebar.
The sidebar can be closed with .sidebar-closed and the layout is free.
In the current example the menu is inside a scrollable container but we could imagine the sidebar to be
split in half to preview some element at the bottom and have a menu at the top.
Sidebar can also grow is more place is needed, use .sidebar-extend
or just specify the width you want with a style attribute.
Sidebar can also be used in a minimal iconic way if needed, use .sidebar-minimal
Only flex (.flex-row or .flex-column with .flex-grow)
and position (.relative and .absolute-fill) are required for most of your needs.
.scroll-y should be applied to layouts before content.
This component contains a spinner, a text and a layout to put the content in the middle of the screen.
Notification informs user of an event without blocking interaction like alert().
Notification has 3 states: initial (not displayed), opened (shows with animation) and closed (hides with animation).
Because of its absolute position, it should be placed on a top element inside body. In the following example, its position
is absolutely relative to the gray area.
You can use icons inside text, they will adapt to the font size with the 'icon' class. Choose the right one then put the mouse on top of it to get the icon name, the name is the function to call inside javascript to produce an hyperscript equivalent.
import {h} from '/js/src/index.js';
import {iconZoomIn, iconZoomOut} from '/js/src/icons.js';
function view(model) {
return [
h('button', {onclick: () => model.zoomIn()}, iconZoomIn()),
h('button', {onclick: () => model.zoomOut()}, iconZoomOut()),
];
}