Basics
Colors #
Six tones for the components, fourteen hues for the rest. The text color of each background is chosen for contrast.
Tones
A solid background (.bg-primary), a soft one (.bg-primary-soft), a text color (.text-primary) and a border color (.border-primary). The soft, border and text shades are mixed by the browser from --ir-primary.
neutral
primary
success
warning
danger
info
neutral soft
primary soft
success soft
warning soft
danger soft
info soft
Palette
Five shades per hue: .bg-blue-lighter, -light, .bg-blue, -dark, -darker, and a text color, .text-blue.
lighter.bg-grey-lighter
light.bg-grey-light
grey.bg-grey
dark.bg-grey-dark
darker.bg-grey-darker
lighter.bg-red-lighter
light.bg-red-light
red.bg-red
dark.bg-red-dark
darker.bg-red-darker
lighter.bg-orange-lighter
light.bg-orange-light
orange.bg-orange
dark.bg-orange-dark
darker.bg-orange-darker
lighter.bg-amber-lighter
light.bg-amber-light
amber.bg-amber
dark.bg-amber-dark
darker.bg-amber-darker
lighter.bg-yellow-lighter
light.bg-yellow-light
yellow.bg-yellow
dark.bg-yellow-dark
darker.bg-yellow-darker
lighter.bg-lime-lighter
light.bg-lime-light
lime.bg-lime
dark.bg-lime-dark
darker.bg-lime-darker
lighter.bg-green-lighter
light.bg-green-light
green.bg-green
dark.bg-green-dark
darker.bg-green-darker
lighter.bg-teal-lighter
light.bg-teal-light
teal.bg-teal
dark.bg-teal-dark
darker.bg-teal-darker
lighter.bg-cyan-lighter
light.bg-cyan-light
cyan.bg-cyan
dark.bg-cyan-dark
darker.bg-cyan-darker
lighter.bg-blue-lighter
light.bg-blue-light
blue.bg-blue
dark.bg-blue-dark
darker.bg-blue-darker
lighter.bg-indigo-lighter
light.bg-indigo-light
indigo.bg-indigo
dark.bg-indigo-dark
darker.bg-indigo-darker
lighter.bg-violet-lighter
light.bg-violet-light
violet.bg-violet
dark.bg-violet-dark
darker.bg-violet-darker
lighter.bg-pink-lighter
light.bg-pink-light
pink.bg-pink
dark.bg-pink-dark
darker.bg-pink-darker
lighter.bg-brown-lighter
light.bg-brown-light
brown.bg-brown
dark.bg-brown-dark
darker.bg-brown-darker
Surfaces
.bg-surface
.bg-subtle
.bg-muted
.bg-inverse
Basics
Typography #
Poppins for the titles, the font of the system for the text: nothing to download for the body, fluid sizes for the titles.
The <h1> to <h6> elements, or the .h1 to .h6 classes for the look of a level without its rank in the document.
Display
Title of level 1
Title of level 2
Title of level 3
Title of level 4
Title of level 5
Title of level 6
Eyebrow
A lead paragraph introduces a page or a section.
A paragraph with a link , bold , italic , highlighted , code, Ctrl + K , H2 O and small text .
The flex one, in a flex world.
.text-sm .text-muted
.text-xl .font-heading .weight-semibold
Gradient
Basics
Icons #
.icon sizes any inline svg on the text, and its color follows the text. This site uses a sprite of Lucide icons.
house user mail bell heart star bookmark calendar clock search settings sliders-horizontal pencil trash-2 download upload share-2 link paperclip lock eye eye-off check x plus minus info triangle-alert circle-question-mark message-circle camera image map-pin globe shopping-cart credit-card chart-column code terminal database cloud smartphone monitor palette zap sparkles layers filter
Actions
Buttons #
.btn and a tone, on a <button> or a link.
Tones
Neutral
Primary
Success
Warning
Danger
Info
A link
Styles
Combine a tone with .btn-outline, .btn-soft, .btn-ghost or .btn-link.
Outline
Outline
Outline
Soft
Soft
Soft
Ghost
Ghost
Link
Sizes, shapes and icons
Small
Normal
Large
Messages 4
Block
States
aria-pressed="true" marks a toggle button. disabled disables a button; a disabled link loses its href and gets role="link" and aria-disabled="true".
Groups
Forms
Forms #
The controls are styled without class. .field stacks a label, a control and a help text.
Fields
Checkboxes, radios and switches
Drawn by the framework, the same in every browser: the radio is a ring, a gap and a dot.
States
Horizontal and inline forms
Forms
Input groups #
.input-group glues fields, buttons and texts; .input-icon puts an icon inside the field.
The last field shows its password with data-password-toggle (JavaScript).
Content
Badges and tags #
A badge counts, a tag qualifies. Both scale with the text around them.
A title with a tag
Neutral
Primary
Success
Warning
Danger
Info
Posts 52
Comments 138
Errors 3
Tasks 12
Content
Alerts #
A light background, readable text and an accent on the left. data-dismiss on a button closes the alert.
A neutral alert, for an information.
Well done!
The profile was saved.
×
Be careful
Your subscription ends in three days.
A solid alert, with .alert-solid.
×
Content
Cards #
A media, a header, a body and a footer, all optional. .card-hover lifts the card, .card-link makes all of it clickable.
Design
Twelve columns and no negative margin.
Visits this month
12.4k
72 %
AL
Ada Lovelace
Front-end developer
Follow
Message
Horizontal from the medium size
The media takes 40 % of the width on the left. On small screens, it goes back on top.
Read more
Content
Tables #
Styled without class. Add .table-striped, .table-hover, .table-bordered or .table-compact, and wrap a wide table in .table-responsive.
Breakpoints
Size
Suffix
From
Container
Small none 0 100 % Medium -m601px 100 % Large -l993px 100 % Extra large -xl1201px 75rem
Mobile first: a class applies from its size and above.
Layer Content
reset the differences between the browsers tokens the custom properties and the themes base typography, form controls, tables layout containers and grid components buttons, cards, navbar… utilities spacing, colors, display…
Content
Images and galleries #
Avatars, frames, hover effects and a masonry gallery in CSS columns. The lightbox opens the images full screen.
Avatars
AL
MB
Frames and hover effects
.overlay A caption on hover
Masonry
One column, two from the medium size, three (or .masonry-2, .masonry-4) from the large size.
Navigation
Navbar #
The bar of this site. .navbar-sticky keeps it on top, .navbar-transparent lays it over a header image until the page scrolls. Below the large size, the toggle opens the menu.
A .megamenu in an item opens on hover and on keyboard focus, as wide as the bar.
Navigation
Dropdowns #
A toggle and a menu. A click outside, Esc or a choice closes it; the arrow keys move from item to item.
Navigation
Tabs #
Buttons and panels, in the same order: the roles, the ARIA attributes and the keyboard come from the JavaScript.
HTML
CSS
JavaScript
The structure of the page.
The behaviour of the page.
For a navigation between pages, a .tab-list of links with aria-current="page":
Navigation
Breadcrumb and pagination #
Two lists; aria-current marks the current item.
Disclosure
Accordions #
Native <details>, no JavaScript. The same name keeps one open at a time.
Does iRoom need JavaScript?
Only for the dropdowns, the navbar, the tabs, the lightbox and a few helpers. Everything else is CSS.
Can I use my own colors?
Yes: override the custom properties, from --ir-primary to --ir-radius.
Which browsers are supported?
The current versions of Chrome, Edge, Firefox and Safari.
Tree view
Disclosure
Modals #
A native <dialog> opened with commandfor and command; Esc closes it, closedby="any" lets a click outside close it too. The page does not scroll behind.
Delete the project
The files and the history of the project will be deleted. This cannot be undone.
Disclosure
Tooltips #
A data-tooltip attribute, shown on hover and on keyboard focus. It uses the ::after of the element.
Hover me
Below
Feedback
Progress and spinners #
The native <progress>, a spinner that follows the text, skeletons for the content being loaded.
40 %
70 %
55 %
25 %
Loading
