Style Guide

Define theme variables in /app/assets/stylesheets/theme.css. Edit global CSS styles in /app/assets/stylesheets/application.css.

Watch this page to see live results.

Color palette

Theme colors can be used either as Prewind utility classes like .bg-midtone or literal CSS custom properties like var(--midtone). Brand and status colors are shown below.

--brand-1
Content

Lorem ipsum dolor sit amet consectetur adipisicing elit.

--brand-2
Content

Lorem ipsum dolor sit amet consectetur adipisicing elit.

--brand-3
Content

Lorem ipsum dolor sit amet consectetur adipisicing elit.

--brand-4
Content

Lorem ipsum dolor sit amet consectetur adipisicing elit.

--info
Content

Lorem ipsum dolor sit amet consectetur adipisicing elit.

--success
Content

Lorem ipsum dolor sit amet consectetur adipisicing elit.

--warning
Content

Lorem ipsum dolor sit amet consectetur adipisicing elit.

--error
Content

Lorem ipsum dolor sit amet consectetur adipisicing elit.

--white
--lighter
--light
--midtone
--dark
--darker
--black

Fluid space

Fluid spaces are set using Prewind Fluid (see bin/fluid). These space sizes can be used throughout your project to keep space consistent and responsive.

--space-3xs .xx-3xs
--space-2xs .xx-2xs
--space-xs .xx-xs
--space-sm .xx-sm
--space-md .xx-md
--space-lg .xx-lg
--space-xl .xx-xl
--space-2xl .xx-2xl
--space-3xl .xx-3xl

Fluid typography

Fluid typography sizes are set using Prewind Fluid (see bin/fluid). Use these for consistent and responsive font sizes.

h1

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

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

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

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!

--text-xs .text-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.

--text-sm .text-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.

--text-base .text-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.

--text-lg .text-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.

--text-xl .text-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.

a

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

Lists are styled by default. Use class list-none when you need a semantic list without visual styling.

ul li
  • 2 pounds cat litter
  • 1/2 Liter dumpster juice
  • 2 hairballs
  • 4 tablespoons pigeon droppings
ol li
  1. Wake up
  2. Brush coffee
  3. Fry the cat
  4. Vacuum the lawn

Tables

Tables are styled by default. Wrap in a <div> for rounded corners.

div > table 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

Forms are styled automatically when they contain .ui-field elements. Use custom UI form helpers prefixed with ui_ like ui_text_field to generate form elements with floating labels, optional notes, and error messages. The form-row class can wrap multiple fields into a flex container for horizontal layout.

form:has(.ui-field) .form-row <%= form.ui_text_field %> <%= form.ui_password_field %> <%= form.ui_email_field %> <%= form.ui_url_field %> <%= form.ui_telephone_field %> <%= form.ui_search_field %> <%= form.ui_date_field %> <%= form.ui_time_field %> <%= form.ui_number_field %> <%= form.ui_checkbox %> <%= form.ui_radio_button %> <%= form.ui_collection_select %> <%= form.ui_collection_radio_buttons %> <%= form.ui_collection_checkboxes %> <%= form.ui_file_field %>
Helpful note
Click to upload or drag and drop
JPG/PNG only
This shows a validation error
Interests
Subscription Plan

Buttons

Buttons styles are defined in components.css.

.ui-button .ui-button.brand-1 .ui-button.brand-2 .ui-button.brand-3 .ui-button.brand-4 .ui-button.neutral .ui-button.info .ui-button.success .ui-button.warning .ui-button.error