Style Guide

Edit the variables and classes in /static/css/style.css. Watch this page to see live results.

Color palette

These colors can be accessed as CSS variables and are also added to the color pallete in the Tailwind config. This means you can use Tailwind classes like text-dark or bg-brand-1.

--<color> .xxx-<color>

--brand-1

--brand-2

--brand-3

--brand-4

--brand-5

--white

--lighter

--light

--midtone

--dark

--darker

--black

--info

--success

--warning

--error

Fluid space

Fluid spaces are set using Utopia (see fluid.css). These gaps can be used throughout your project to keep spacing consistent and responsive. They can be accessed as CSS variables and are also added to the spaces options in the Tailwind config. This means you can use Tailwind classes like .m-f/md for margin fluid medium or .pl-f/xs for padding left fluid extra-small.

--fluid-space-3xs .xxx-f/3xs

--fluid-space-2xs .xxx-f/2xs

--fluid-space-xs .xxx-f/xs

--fluid-space-sm .xxx-f/sm

--fluid-space-md .xxx-f/md

--fluid-space-lg .xxx-f/lg

--fluid-space-xl .xxx-f/xl

--fluid-space-2xl .xxx-f/2xl

--fluid-space-3xl .xxx-f/3xl

Fluid typography

Fluid typography sizes are set using Utopia (see fluid.css). They can be accessed as CSS variables and are also added to the font-sizes options in the Tailwind config. This means you can use Tailwind classes like .text-f/md for font-size fluid medium.

H1 Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, temporibus minima ea molestiae laudantium voluptatum a esse id nihil eius at quo!

H2 Consectetur adipisicing elit

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, temporibus minima ea molestiae laudantium voluptatum a esse id nihil eius at quo!

H3 Facere, temporibus minima ea

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, temporibus minima ea molestiae laudantium voluptatum a esse id nihil eius at quo!

H4 laudantium voluptatum a esse

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, temporibus minima ea molestiae laudantium voluptatum a esse id nihil eius at quo!

--fluid-text-xs .text-f/xs

Imagine a combination of IIS and J2EE. Is it more important for something to be best-of-breed? The portals factor can be delivered as-a-service to wherever it’s intended to go – mobile.

--fluid-text-sm .text-f/sm

We believe we know that if you drive micro-mega-cyber-virally then you may also mesh iteravely. If you transition globally, you may also reintermediate magnetically.

--fluid-text-base .text-f/base

(default)

Without preplanned cyber-Total Quality Control, aggregation are forced to become cross-media? We think that most C2C2C web-based applications use far too much XSL, and not enough PNG. We apply the proverb 'Look before you leap' not only on our feature set, but our granular integrated, value-added convergence and easy use is frequently considered a terrific achievement.

--fluid-text-lg .text-f/lg

Without micro-resource-constrained performance, you will lack architectures. The capability to implement wirelessly leads to the capacity to harness without devaluing our power to syndicate. Our infinitely reconfigurable feature set is second to none, but our strategic angel investors and user-proof use.

--fluid-text-xl .text-f/xl

Without interfaces, you will lack affiliate-based compliance. Without efficient, transparent bloatware, you will lack affiliate-based compliance. Without niches, you will lack experiences.

blockquote

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse tempora nobis aut expedita perspiciatis laudantium, dolore odit. Exercitationem cum harum aperiam non sapiente, dolorum deleniti! Eos, minima doloremque? Nesciunt, eum!

mark

Use a mark tag to highlight.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit asperiores sapiente, quaerat totam, dolores reiciendis consectetur.

Style for all anchor links except children of a nav element.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit asperiores sapiente, quaerat totam, dolores reiciendis consectetur.

Lists

List tags are styled directly with no additional classes required.

ul li

2 pounds cat litter
1/2 Liter dumpster juice
2 hairballs
4 tablespoons pigeon droppings

ol li

Wake up
Brush coffee
Fry the cat
Vacuum the lawn

Tables

Table tags are styled directly with no additional classes required.

table.stripes th tr td

Name	Age	Email
Bob	45	bob@gmail.com
Dave	38	dave@gmail.com
Sarah	26	sarah@gmail.com
Orville	93	orville@gmail.com

Forms

Form tags are styled directly with no additional classes required. Additional classes are also available for .form-note .invalid, and .invalid-message and style is also added for elements with disabled attribute present.

form fieldset input textarea select option .invalid .invalid-message .form-note

Text input

Text input disabled

Text input w/note Form note using class=".form-note"

Invalid email input Invalid message using <z-invalid>

Select

Textarea

Checkboxes Checkbox 1 Checkbox 2 Checkbox 3 Checkbox disabled

Radios Radio 1 Radio 2 Radio 3 Radio disabled

Buttons

Buttons are styled directly with no additional classes required. Use the color palette to set background color. For example, <button class="bg-success">. Note that the button style is also applied to a tags with the .button class as well as input tags with type="button" or type="submit" attributes.

button a.button input[type=button] input[type=submit]

Shown here with disabled attribute.