[A post from my drafts folder]
Enhance projects include a (totally optional) built-in CSS utility class system out of the box. By default, the generated stylesheet is very small, and developers can even configure their app’s design scale and color palette.
Let’s create a form layout with the available layout helpers and stylize the submit button with custom colors. For this approach, we’ll blend utility classes and a custom element’s local stylesheet.
Starting with a barebones pizza order form:
<main> <h1>Order a Pizza!</h1> <form action="/orders" method="POST"> <fieldset> <legend>Pie Size</legend> <input type="radio" name="size" id="size_1" value="small" required /> <label for="size_1">Small</label> <input type="radio" name="size" id="size_2" value="medium" /> <label for="size_2">Medium</label> <input type="radio" name="size" id="size_3" value="large" /> <label for="size_3">Large</label> </fieldset> <fieldset> <legend>Toppings!</legend> <label>Choose one or more <small>(cmd + click)</small>:</label> <select name="toppings" multiple size="12"> <optgroup label="Premium toppings"> <option value="pep">Pepperoni</option> <option value="jal">Jalapenos</option> <option value="oliv" disabled>Green olives</option> </optgroup> <optgroup label="Regular toppings"> <option value="pine">Pineapple</option> <option value="feta">Feta cheese</option> <option value="bell">Bell pepper</option> </optgroup> <optgroup label="Free toppings"> <option value="saus">Italian Sausage</option> <option value="ham" disabled>Ham</option> <option value="spin">Spinach</option> </optgroup> </select> </fieldset> <button type="submit">Place My Order</button> </form> </main> Well, that doesn’t look like much:
In order to give us a clean slate, Enhance Styles’ CSS reset is fairly aggressive. No problem, let’s start by building up a better layout.
<style> main { max-width: 50ch; } </style> <main class="mt4 m-auto font-sans"> <h1 class="text2 text-center mb1">Order a Pizza!</h1> Right away, I’ve added a <style> tag that scoped just to this page. I’ve set a max-width and then added our first utility classes to the <main> tag to get a bit of margin and use a sans-serif font stack. Similarly, I’ve set a text size and centering on the main <h1> header.
Let’s continue by adjusting each <fieldset>’s padding and a border:
<fieldset class="p1 border2"> All elements have a border-color of transparent by default, so the next step is to set the fieldset’s border-color in our <style> tag to a provided color swatch from Enhance Styles:
fieldset { border-color: var(--secondary-200) } Taking a look now, and we’re in much better shape.
Alright, time for some grid layout! First up, the form:
<form action="/orders" method="POST" class="grid flow-row gap-2"> And with our web inspector’s help, we can see the grid is coming together:
We’ll use the flex class to do something similar with the “Pie Size” <fieldset>, notice the new <div> input/label wrappers:
<fieldset class="flex justify-around p1 border2"> <legend>Pie Size</legend> <div> <input type="radio" name="size" id="size_1" value="small" required /> <label for="size_1">Small</label> </div> <div> <input type="radio" name="size" id="size_2" value="medium" /> <label for="size_2">Medium</label> </div> <div> <input type="radio" name="size" id="size_3" value="large" /> <label for="size_3">Large</label> </div> </fieldset> And a similar treatment for the “Toppings!” section:
<fieldset class="grid flow-row gap-2 p1 border2"> We’re almost there
Now for that submit button, some added CSS in our style tag to set colors
button { color: var(--light); background-color: var(--primary-400); } And a wrapper div + some utility classes
<div class="mt-2 flex justify-around"> <button type="submit" class="pt-4 pb-4 pl-1 pr-1 font-bold text1 radius1"> Place My Order </button> </div> Finally, we’ve got a nice-to-use Pizza Order Form
The final markup, all in one Enhance page file:
<style> main { max-width: 50ch; } fieldset { border-color: var(--secondary-200) } button { color: var(--light); background-color: var(--primary-400); } </style> <main class="mt4 m-auto font-sans"> <h1 class="text2 text-center mb1">Order a Pizza!</h1> <form action="/orders" method="POST" class="grid flow-row gap-2"> <fieldset class="flex justify-around p1 border2"> <legend>Pie Size</legend> <div> <input type="radio" name="size" id="size_1" value="small" required /> <label for="size_1">Small</label> </div> <div> <input type="radio" name="size" id="size_2" value="medium" /> <label for="size_2">Medium</label> </div> <div> <input type="radio" name="size" id="size_3" value="large" /> <label for="size_3">Large</label> </div> </fieldset> <fieldset class="grid flow-row gap-2 p1 border2"> <legend>Toppings!</legend> <label>Choose one or more <small>(cmd + click)</small>:</label> <select name="toppings" multiple size="12"> <optgroup label="Premium toppings"> <option value="pep">Pepperoni</option> <option value="jal">Jalapenos</option> <option value="oliv" disabled>Green olives</option> </optgroup> <optgroup label="Regular toppings"> <option value="pine">Pineapple</option> <option value="feta">Feta cheese</option> <option value="bell">Bell pepper</option> </optgroup> <optgroup label="Free toppings"> <option value="saus">Italian Sausage</option> <option value="ham" disabled>Ham</option> <option value="spin">Spinach</option> </optgroup> </select> </fieldset> <div class="mt-2 flex justify-around"> <button type="submit" class="pt-4 pb-4 pl-1 pr-1 font-bold text1 radius1"> Place My Order </button> </div> </form> </main> 
Top comments (0)