# rnbw.css
> rnbw is a design system in one stylesheet: every html element styled as it is, and plain classes for the rest. no framework, no build step, no weird stuff.
## use it
put these two lines in the :
## write with it
- write semantic html first. h1–h6, p, a, ul, ol, li, blockquote, code, pre, table and form elements are already styled.
- add a class only for what html doesn't say: layout, spacing, size, colour, motion.
- layout is flex. .row is horizontal and wraps (add .flex-nowrap to keep one line); .column is vertical. .stack turns a row into a column on phones.
- space is a 4px scale: xs 4px, s 8px, m 12px, l 24px, xl 40px, for gap-, padding- and margin-.
- type is one face, under, at one weight, 200. sizes are h1–h6 and text-xs to text-xl.
- colour comes from the theme: background-*, inverse-primary, text-*, accent-*. data-theme="dark" on switches it.
- icons: , once icons.js is on the page.
- no inline style where a class says it.
## classes
### typography.css
.text-left text-align: left
.text-center text-align: center
.text-right text-align: right
.text-justify text-align: justify
.text-xs font-size: 8px; line-height: 8px
.text-s font-size: 12px; line-height: 12px
.text-m font-size: 14px; line-height: 14px
.text-l font-size: 18px; line-height: 18px
.text-xl font-size: 24px; line-height: 24px
.weight-thin font-weight: 200
.weight-light font-weight: 300
.weight-normal font-weight: 400
.weight-medium font-weight: 500
.weight-semibold font-weight: 600
.weight-bold font-weight: 700
.weight-heavy font-weight: 900
.nowrap white-space: nowrap
.truncate overflow: hidden; text-overflow: ellipsis; white-space: nowrap
### code.css
.mono font-family: var(--font-mono)
.code-comment color: color-mix(in srgb, var(--color-primary-foreground) 42%, transparent)
.code-string color: var(--color-positive)
.code-number color: var(--color-accent-secondary)
.code-keyword color: var(--color-accent-primary)
.diff-add background: color-mix(in srgb, var(--color-positive) 12%, transparent)
.diff-del box-shadow: inset 0 2px 0 var(--color-negative)
### colors.css
.background-primary background-color: var(--color-primary-background); color: var(--color-primary-foreground)
.background-secondary background-color: var(--color-secondary-background); color: var(--color-secondary-foreground)
.background-tertiary background-color: var(--color-tertiary-background); color: var(--color-tertiary-foreground)
.inverse-primary background-color: var(--color-primary-foreground); color: var(--color-primary-background)
.inverse-secondary background-color: var(--color-secondary-foreground); color: var(--color-primary-background)
.inverse-tertiary background-color: var(--color-tertiary-foreground); color: var(--color-tertiary-background)
.accent-primary background-color: var(--color-accent-primary); color: #fff
.accent-secondary background-color: var(--color-accent-secondary); color: #fff
.background-negative background-color: var(--color-negative); color: #fff
.background-warning background-color: var(--color-warning); color: #fff
.background-positive background-color: var(--color-positive); color: #fff
.text-primary color: var(--color-primary-foreground)
.text-secondary color: var(--color-secondary-foreground)
.text-tertiary color: var(--color-tertiary-foreground)
.text-negative color: var(--color-negative)
.text-warning color: var(--color-warning)
.text-positive color: var(--color-positive)
.opacity-xs opacity: 0.1
.opacity-s opacity: 0.25
.opacity-m opacity: 0.5
.opacity-l opacity: 0.75
.opacity-xl opacity: 0.9
### layout.css
.padding-xs padding: 4px
.padding-s padding: 8px
.padding-m padding: 12px
.padding-l padding: 24px
.padding-xl padding: 40px
.padding-top-xs padding-top: 4px
.padding-top-s padding-top: 8px
.padding-top-m padding-top: 12px
.padding-top-l padding-top: 24px
.padding-top-xl padding-top: 40px
.padding-right-xs padding-right: 4px
.padding-right-s padding-right: 8px
.padding-right-m padding-right: 12px
.padding-right-l padding-right: 24px
.padding-right-xl padding-right: 40px
.padding-bottom-xs padding-bottom: 4px
.padding-bottom-s padding-bottom: 8px
.padding-bottom-m padding-bottom: 12px
.padding-bottom-l padding-bottom: 24px
.padding-bottom-xl padding-bottom: 40px
.padding-left-xs padding-left: 4px
.padding-left-s padding-left: 8px
.padding-left-m padding-left: 12px
.padding-left-l padding-left: 24px
.padding-left-xl padding-left: 40px
.margin-xs margin: 4px
.margin-s margin: 8px
.margin-m margin: 12px
.margin-l margin: 24px
.margin-xl margin: 40px
.margin-auto margin: auto
.margin-top-xs margin-top: 4px
.margin-top-s margin-top: 8px
.margin-top-m margin-top: 12px
.margin-top-l margin-top: 24px
.margin-top-xl margin-top: 40px
.margin-right-xs margin-right: 4px
.margin-right-s margin-right: 8px
.margin-right-m margin-right: 12px
.margin-right-l margin-right: 24px
.margin-right-xl margin-right: 40px
.margin-bottom-xs margin-bottom: 4px
.margin-bottom-s margin-bottom: 8px
.margin-bottom-m margin-bottom: 12px
.margin-bottom-l margin-bottom: 24px
.margin-bottom-xl margin-bottom: 40px
.margin-left-xs margin-left: 4px
.margin-left-s margin-left: 8px
.margin-left-m margin-left: 12px
.margin-left-l margin-left: 24px
.margin-left-xl margin-left: 40px
.gap-xs gap: 4px
.gap-s gap: 8px
.gap-m gap: 12px
.gap-l gap: 24px
.gap-xl gap: 40px
.gap-column-xs column-gap: 4px
.gap-column-s column-gap: 8px
.gap-column-m column-gap: 12px
.gap-column-l column-gap: 24px
.gap-column-xl column-gap: 40px
.gap-row-xs row-gap: 4px
.gap-row-s row-gap: 8px
.gap-row-m row-gap: 12px
.gap-row-l row-gap: 24px
.gap-row-xl row-gap: 40px
.row display: flex; flex-wrap: wrap
.column display: flex; flex-wrap: wrap
.align-start display: flex
.align-center display: flex
.align-stretch display: flex
.align-end display: flex
.justify-start display: flex
.justify-center display: flex
.justify-end display: flex
.justify-between display: flex
.sticky position: sticky; top: 0
.view width: 100%; min-height: 100vh
.hidden display: none
.block display: block
.inline display: inline
.inline-block display: inline-block
.flex display: flex
.inline-flex display: inline-flex
.grid display: grid
.relative position: relative
.absolute position: absolute
.fixed position: fixed
.inset-0 inset: 0
.width-full width: 100%
.width-75 width: 75%
.width-50 width: 50%
.width-25 width: 25%
.width-page width: 100%; max-width: 1140px
.height-full height: 100%
.width-screen width: 100vw
.height-screen height: 100vh
.flex-1 flex: 1
.shrink-0 flex-shrink: 0
.flex-nowrap flex-wrap: nowrap
.flex-wrap flex-wrap: wrap
.overflow-hidden overflow: hidden
.overflow-auto overflow: auto
.overflow-x-auto overflow-x: auto
.overflow-y-auto overflow-y: auto
.overflow-x-hidden overflow-x: hidden
.overflow-y-hidden overflow-y: hidden
.z-1 z-index: 1
.z-10 z-index: 10
.z-100 z-index: 100
.z-1000 z-index: 1000
.cursor-pointer cursor: pointer
.cursor-grab cursor: grab
.cursor-grabbing cursor: grabbing
.cursor-default cursor: default
.no-select user-select: none
.no-events pointer-events: none
.no-outline outline: none
### media.css
.icon-xs display: inline-block; flex-shrink: 0; max-width: none
.icon-s display: inline-block; flex-shrink: 0; max-width: none
.icon-m display: inline-block; flex-shrink: 0; max-width: none
.icon-l display: inline-block; flex-shrink: 0; max-width: none
.icon-xl display: inline-block; flex-shrink: 0; max-width: none
.size-xs width: 12px; height: 12px
.size-s width: 24px; height: 24px
.size-m width: 32px; height: 32px
.size-l width: 48px; height: 48px
.size-xl width: 64px; height: 64px
.aspect-square aspect-ratio: 1 / 1
.aspect-video aspect-ratio: 16 / 9
.aspect-photo aspect-ratio: 3 / 2
### borders.css
.radius-xs border-radius: 4px
.radius-s border-radius: 8px
.radius-m border-radius: 12px
.radius-l border-radius: 24px
.radius-xl border-radius: 40px
.radius-full border-radius: 9999px
.border border-width: 1px; border-style: solid; border-color: var(--color-secondary-background)
.border-top border-top-width: 1px; border-top-style: solid; border-color: var(--color-secondary-background)
.border-right border-right-width: 1px; border-right-style: solid; border-color: var(--color-secondary-background)
.border-bottom border-bottom-width: 1px; border-bottom-style: solid; border-color: var(--color-secondary-background)
.border-left border-left-width: 1px; border-left-style: solid; border-color: var(--color-secondary-background)
.shadow box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1)
### animation.css
.animate animation-duration: 0.3s; animation-timing-function: ease; animation-fill-mode: both
.duration-fast animation-duration: 0.15s
.duration-normal animation-duration: 0.3s
.duration-slow animation-duration: 0.6s
.duration-loop animation-duration: 10s
.ease-in animation-timing-function: ease-in
.ease-out animation-timing-function: ease-out
.ease-in-out animation-timing-function: ease-in-out
.linear animation-timing-function: linear
.fade-in animation-name: fadeIn
.fade-out animation-name: fadeOut
.slide-up animation-name: slideUp
.slide-down animation-name: slideDown
.spin animation-name: spin
.zoom-in animation-name: zoomIn
.zoom-out animation-name: zoomOut
.pulse animation-name: pulse
.infinite animation-iteration-count: infinite
.transition transition: all 0.3s ease
.transition-fast transition: all 0.15s ease
.transition-slow transition: all 0.6s ease
.rotate-45 transform: rotate(45deg)
.rotate-90 transform: rotate(90deg)
.rotate-180 transform: rotate(180deg)
.scale-50 transform: scale(0.5)
.scale-75 transform: scale(0.75)
.scale-125 transform: scale(1.25)
.scale-150 transform: scale(1.5)
.blur-xs filter: blur(4px)
.blur-s filter: blur(8px)
.blur-m filter: blur(12px)
.blur-l filter: blur(24px)
.blur-xl filter: blur(40px)
## icons
197 icons, 12x12: absolute, aligncenter, alignleft, alignright, arrow-bottom-left, arrow-bottom-right, arrow-bottom, arrow-left, arrow-right, arrow-top-left, arrow-top-right, arrow-top, audio, background-position, bike-alternate, bike, blockquote, blur, body, bold, border-bottom, border-dashed, border-dotted, border-left, border-right, border-solid, border-top, border, brush, bubble, bullet-outlined, bullet, button, capitalize, check, checkbox-blank, checkbox, cloud-download, cloud-upload, code-html, code-js, component, contain, copy, coulmn-wrap-reverse-icon, cover, credit-card, cross, cursor, data, desktop, display-none, div, down, download, drop-shadow, edit, email, emoji, events, external, eye, figma, fixed, flex-child-no-wrap, flex-column, flex-row, flex-wrap, flex, flexibility, folder, font-size, font-weight, font, form, gallery-view, gap-column, gap-row, gift, github, globe-alt, globe, gradient-linear, gradient-radial, grid, grow-column, grow-row, heading, height, help, home, image, import, indent, inline, inner-shadow, input, italic, justify, laptop, layers, left, library, line-height, link, list-circle, list-decimal, list-disc, list-item, list-lower-latin, list-square, list-view, list, location, lock, lowercase, ltr, margin-bottom, margin-left, margin-right, margin-top, margin, max-height, max-width, media, min-height, min-width, minus, move, none, number, opacity, oval, padding-bottom, padding-left, padding-right, padding-top, padding, page, paragraph, paste, people, person, phone, play, plus, position, radius, radiusall, rectangle, redo, relative, repeat-1, repeat-x, repeat-y, repeat, right, rotate, routes, rtl, scroll-fixed, search, select, settings, share, shrink-column, shrink-row, size, skew, smartphone-landscape, smartphone-portrait, spacing, star-blank, star, states, static, sticky, stop, strikeout, sync-1, sync, tablet, text, toggle-off, toggle-on, top, transition, trash, triangle, underline, undo, upload, uppercase, video, watch, width, wrap-reverse