Theme

The boilerplate code includes extensive CSS and a few templates to get the ball rolling with a basic fixed header and sticky footer layout. It also includes beautiful form rendering with customized inputs, textareas, select menus, and other widgets for a much more modern feeling UI straight out of the box. Most values for everything from header background color to table border width is set with CSS Custom Properties (variables) which provides a powerful and simple means to dramatically alter the look and feel of the site by simply tweaking these values.

The /style directory

The main stylesheet is /style/global.css. This file imports the default SaneJS stylesheet and variables. Anything edited here will be compiled to /static/css/bundle.css. Note that variables.css controls the look and feel of the entire website. The top section is "Global Colors". These can referenced throughout the site with normal variable syntax like var(--brand-1). These colors are also referenced in tailwind.config.js so that colors set here can be referenced as Tailwind classes like class="text-brand-1".

Forms

The default styles for forms provides a very nice style out of the box which can be easily customized with CSS variables. The included CSS assumes that widgets will be wrapped in a <label> tag.

<form>
  <label>
    Email
    <input type="email" name="email" />
  </label>
</form>

By default, <label> elements will be the full width of the form and will stack up as a column. If you want multiple fields to appear inline on the same row, use the row class on the <fieldset> tag.

<fieldset class="row">... ...</fieldset>

Checkboxes and radios

For checkboxes or radios, use a <fieldset class="checkboxes"> or <fieldset class="radios"> with an optional <legend> to label to group.

<fieldset class="checkboxes">
  <legend>Pizza toppings</legend>
  <label>
    Pepperoni
    <input type="checkbox" name="toppings" value="pepperoni" />
  </label>

  <label>
    Mushrooms
    <input type="checkbox" name="toppings" value="mushrooms" />
  </label>

  <label>
    Onions
    <input type="checkbox" name="toppings" value="onions" />
  </label>
</fieldset>

Inline checkboxes and radios

Sometimes you want just two or three checkboxes to appear in a row rather than a column. This can be easily accomplished by adding the row class to your fieldset tag alongside checkboxes or radios.

<fieldset class="checkboxes row">... ... ...</fieldset>

Inline labels with other elements such as a text input

For checkboxes and radios, the label and element are inline by default. You can also achieve this by using the row class directly on a <label >.

<label class="row">
  Age
  <input type="number" name="age" style="width: 2rem" />
</label>

Showing extra info and errors

Use span.form-info and span.form-error to show messages.

<label>Zip code <span class="form-info">5 digit only</span></label>

<label>
  Email <input type="email" name="email" />
  <span class="form-error">Please enter a valid email address.</span>
</label>