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:
Here is an example of all the flavours you can use:
Forms
For forms, we have a couple of elements in your UI Kit.
Label
To use your label, add the labelclass:
Input
To use your input, add the inputclass:
Textarea
For textareas, add the textareaclass:
Select
For drop-downs/selects, add the selectclass:
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:
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:
So a finished form might look like this:
Links
To style your links, add the linkclass:
Notices
To create notices, add the notice class to a div, and the appropriate flavour:
Cards
To create a card, add the cardclass to a div:
Tables
To use your table, add the table, table-head, table-body, table-row, table-cell classes to their respective tags:
(More Coming soon)
Last updated