Using your UI Kit

Alright, so you've published your UI KIt, and you've embedded the proper scripts in your site. So how do you start using your UI Kit?

In the current version of GroundworkUI, you use your UI Kit by adding CSS classees to your elements.

New to web development?

If you're a seasoned web developer and know what CSS classes are, you can skip down to UI Kit Components. However, if you don't, here's a brief explanation.

If you've done basic HTML coding, you know you can add "attributes" to your elements or tags. For example, let's take an anchor tag like the one below

<a href="https://www.google.ca">Google</a>

Here, you have an anchor tag that has an attribute called "href". HTML elements or tags can have multiple attributes. For example, you can add an attribute to an anchor tag called "target":

<a href="https://www.google.ca" target="_blank">Google</a>

Adding attributes changes the behaviour of the element or tag. When it comes to using a GroundworkUI UI Kit, you're basically adding another attribute and specifically the classattribute. So if you want to change the above link into a button, you would add the classattribute like this:

<a href="https://www.google.ca" target="_blank" class="btn btn-primary">Google</a>

And that's it! Depending on what type of button you want to use, or depending on what component you're trying to use, you'll add different classes, which is explained in the next section.

UI Kit Components

Below is a list of your UI Kit components and how to use them.

Buttons

Want to make your buttons look nice? You start by adding btnclass to a link or button and then add the flavour. Example:

<a href='/pricing' class='btn btn-primary'>View Pricing</a>

Here is an example of all the flavours you can use:

<a href='#' class='btn btn-primary'>My Primary Button</a>
<a href='#' class='btn btn-success'>My Success Button</a>
<a href='#' class='btn btn-info'>My Info Button</a>
<a href='#' class='btn btn-warning'>My Warning Button</a>
<a href='#' class='btn btn-danger'>My Danger Button</a>

Forms

For forms, we have a couple of elements in your UI Kit.

Label

To use your label, add the labelclass:

<label class='label'>My Label</label>

Input

To use your input, add the inputclass:

<input type='text' class='input' />

Textarea

For textareas, add the textareaclass:

<textarea rows='5' class='textarea'></textarea>

Select

For drop-downs/selects, add the selectclass:

<select class='select'>
  <option value='1'>1</option>
</select>

Form Layout Helpers

Included with our form components, we have some layout helpers that help space out your fields and buttons.

If you surround a label and input/select/textarea with a fieldit'll create some vertical space around that grouping:

<div class='field'>
  <label class='label'>Email</label>
  <input class='input' type='text' />
</div>

If you want a set of buttons at the end of your form, you can use the actionsclass to create vertical space around your grouping, and some space between the buttons:

<div class='actions'>
  <button type='submit' class='btn btn-primary>Submit</button>
  <button class='btn btn-ghost>Cancel</button>
</div>

So a finished form might look like this:

<form>
  <div class='field'>
    <label class='label'>Name</label>
    <input class='input' type='text' name='name' />
  </div>
  <div class='field'>
    <label class='label'>Email</label>
    <input class='input' type='text' name='email' />
  </div>
  <div class='field'>
    <label class='label'>Message</label>
    <textarea class='textarea' type='text' name='message'></textarea>
  </div>
  <div class='actions'>
    <button type='submit' class='btn btn-primary'>Submit</button>
    <button class='btn btn-ghost'>Cancel</button>
  </div>
</form>

Links

To style your links, add the linkclass:

<a href='#' class='link'>My Link</a>

Notices

To create notices, add the notice class to a div, and the appropriate flavour:

<div class='notice notice-primary'>My primary notice</div>
<div class='notice notice-success'>My Success notice</div>
<div class='notice notice-info'>My Info notice</div>
<div class='notice notice-warning'>My Warning notice</div>
<div class='notice notice-danger'>My Danger notice</div>

Cards

To create a card, add the cardclass to a div:

<div class'card'>My card</div>

Tables

To use your table, add the table, table-head, table-body, table-row, table-cell classes to their respective tags:

<table class='table'>
  <thead class='table-head'>
    <tr class='table-row'>
      <th class='table-cell'>Header 1</th>
      <th class='table-cell'>Header 2</th>
      <th class='table-cell'>Header 3</th>
    </tr>
  </thead>
  <tbody class='table-body'>
    <tr class='table-row'>
      <td class='table-cell'>Row 1 Cell 1</td>
      <td class='table-cell'>Row 1 Cell 2</td>
      <td class='table-cell'>Row 1 Cell 3</td>
    </tr>
    <tr class='table-row'>
      <td class='table-cell'>Row 2 Cell 1</td>
      <td class='table-cell'>Row 2 Cell 2</td>
      <td class='table-cell'>Row 2 Cell 3</td>
    </tr>
    <tr class='table-row'>
      <td class='table-cell'>Row 3 Cell 1</td>
      <td class='table-cell'>Row 3 Cell 2</td>
      <td class='table-cell'>Row 3 Cell 3</td>
    </tr>
  </tbody>
</table>

(More Coming soon)