Style Guide

Define Tailwind and DaisyUI theme variables in /app/assets/tailwind/application.css.

Edit global CSS styles in /app/assets/tailwind/global.css.

Customize DaisyUI utilities in /app/assets/tailwind/utilities.css.

Set fluid typography and spacing variables in /app/assets/tailwind/utopia.css.


Watch this page to see live results.

Color palette

Theme colors can be used either as Tailwind utilities like .bg-midtone or literal CSS custom properties like var(--color-midtone). Brand and status colors are shown below using the --color-xxx-content class for text.

--color-<color> .xx-<color>
--color-primary
Content

Lorem ipsum dolor sit amet consectetur adipisicing elit.

--color-secondary
Content

Lorem ipsum dolor sit amet consectetur adipisicing elit.

--color-accent
Content

Lorem ipsum dolor sit amet consectetur adipisicing elit.

--color-info
Content

Lorem ipsum dolor sit amet consectetur adipisicing elit.

--color-success
Content

Lorem ipsum dolor sit amet consectetur adipisicing elit.

--color-warning
Content

Lorem ipsum dolor sit amet consectetur adipisicing elit.

--color-error
Content

Lorem ipsum dolor sit amet consectetur adipisicing elit.

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

Fluid space

Fluid spaces are set using Utopia (see app/assets/tailwind/utopia.css). These spacing sizes can be used throughout your project to keep spacing consistent and responsive.

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

Fluid typography

Fluid typography sizes are set using Utopia (see app/assets/tailwind/utopia.css). 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

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
  1. Wake up
  2. Brush coffee
  3. Fry the cat
  4. Vacuum the lawn

Tables

To get this styling, please wrap your table in a <table-wrapper> element. This is necessary because of CSS limitations on table styling (specifically with regard to border-radius). Table tags are styled directly with no additional classes required.

.ui > 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

Use form.ui class along with Custom UI form elements which are styled with DaisyUI. Use standard Rails form helpers but prefixed with ui_ like ui_text_field to generate the form element with a floating label, optional note and error message all with a single helper. The fluid-wrap element or class can be used to wrap multiple form-fields into a flex container so that they display horizontally when there's enough space.

form.ui .fluid-wrap <%= 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
JPG/PNG only
Interests
Subscription Plan

Buttons

Buttons use DaisyUI's button styles.

button .btn
button.btn-soft .btn.btn-soft
button.btn-outline .btn.btn-outline