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 . 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":
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:
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:
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: