> For the complete documentation index, see [llms.txt](https://bitesite.gitbook.io/groundworkui-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bitesite.gitbook.io/groundworkui-docs/basics/using-your-ui-kit.md). # 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](#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 ``` Google ``` 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": ``` Google ``` 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 `class`attribute. So if you want to change the above link into a button, you would add the `class`attribute like this: ``` Google ``` 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 `btn`class to a link or button and then add the flavour. Example: ``` View Pricing ``` Here is an example of all the flavours you can use: ``` My Primary Button My Success Button My Info Button My Warning Button My Danger Button ``` ### Forms For forms, we have a couple of elements in your UI Kit. #### Label To use your label, add the `label`class: ``` ``` #### Input To use your input, add the `input`class: ``` ``` #### Textarea For textareas, add the `textarea`class: ``` ``` #### Select For drop-downs/selects, add the `select`class: ``` ``` #### 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 `field`it'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 `actions`class 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 `link`class: ``` My Link ``` ### Notices To create notices, add the `notice` class to a `div`, and the appropriate flavour: ```
My primary notice
My Success notice
My Info notice
My Warning notice
My Danger notice
``` ### Cards To create a card, add the `card`class to a `div:` ```
My card
``` ### Tables To use your table, add the `table`, `table-head`, `table-body`, `table-row`, `table-cell` classes to their respective tags: ```
Header 1 Header 2 Header 3
Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3
Row 2 Cell 1 Row 2 Cell 2 Row 2 Cell 3
Row 3 Cell 1 Row 3 Cell 2 Row 3 Cell 3
``` (More Coming soon)