Pure CSS , Font Awesome Basic
Tags: css, webdev
Published: 2021-06-10 15:50:11

Pure CSS is responsive CSS module set just like Bootstrap but very small.
Link- https://unpkg.com/purecss@2.0.6/build/pure-min.css
```
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
```
Put this in `<head>`-

```
<meta name="viewport" content="width=device-width, initial-scale=1">
```
##Image- 
>pure-img
Usually class name are written as "."pure-img

```
<img class="pure-img" src="...">
```
##Button- 
>pure-button
```
<button class="pure-button">Button</button>
```
>pure-button-active
```
<button class="pure-button pure-button-active">An Active Button</button>
```

>pure-button-disabled
```
<button class="pure-button pure-button-disabled">Disabled Button</button>
```
Or just add attribute disabled to button
```
<button class="pure-button" disabled="">Disabled Button</button>
```

>button-primary
```
<button class="pure-button pure-button-primary">Primary Button</button>
```
*Pure doesn't offer Success, Warning, Error, Secondary button classes, but suggests to use CSS on pure-button
*Pure also doesn't offer different button sizes like Bootstrap
*Icons are used from Font Awesome.
`Version 5 changed fas instead fa-solid.`
 

##Form-

>pure-form
Creates an inline form
```
<form class="pure-form">
...
</form>
```
>pure-form pure-form-stacked
_.pure-form-stacked required alongside .pure-form_
Creates Stacked Form

>pure-form pure-form-aligned
Labels aligned against Input controls.

>pure-group
Puts input controls in a group.
```
<form class="pure-form">
    <fieldset class="pure-group">
        <input type="text" class="pure-input-1-2" placeholder="Username" />
        <input type="text" class="pure-input-1-2" placeholder="Password" />
        <input type="email" class="pure-input-1-2" placeholder="Email" />
    </fieldset>
```
>pure-input-*
Size of input box.
* as per Grid Syntax

>pure-input-rounded
Input box in rounded shape.

>pure-checkbox

>pure-radio

##Tables-
>pure-table
Adds padding and borders (vertical) to table elements, and emphasizes the header.
P.S.- Some CSS or working of some tags is fixed in HTML as meta. Some of them can be modified.

>pure-table-bordered
Adds borders to all cells

>pure-table-horizontal
Adds horizontal borders 

>pure-table-stripped
If u consider devices will support nth-child CSS3 Selector use this. Check here- [Link](https://caniuse.com/?search=nth-child)
Otherwise use
>pure-table-odd
Extend tr
```
<tbody>
        <tr class="pure-table-odd">
            <td>1</td>
            <td>Honda</td>
            <td>Accord</td>
            <td>2009</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Toyota</td>
            <td>Camry</td>
            <td>2012</td>
        </tr>
</tbody>
```

#Font Awesome-
<img src="https://fontawesome.com/images/open-graph.png">
Icon Set- Vector Icons and Social Logos
Download Link- [Link](https://use.fontawesome.com/releases/v5.15.3/fontawesome-free-5.15.3-web.zip)
We have extend to `<i>` or `<span>` with Icon class of required icon. And the classes can be found on the site [Link](https://fontawesome.com/v5.15/icons)
Syntax-
```
<i class="fas fa-camera"></i> 
Using an <i> element to reference the icon
<span class="fas fa-camera"></span> 
Using a <span> element to reference the icon
<i class="fas fa-camera"></i> 
This icon's 1) style prefix == fas and 2) icon name == camera
```
fas (solid) and fab (brands) is available for free
_fa and fa-solid etc.. are depreciated in Font Awesome v5._