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 Formpure-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 cellspure-table-horizontal
Adds horizontal borderspure-table-stripped
If u consider devices will support nth-child CSS3 Selector use this. Check here- Link
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-
Icon Set- Vector Icons and Social Logos
Download Link- Link
We have extend to <i>
or <span>
with Icon class of required icon. And the classes can be found on the site Link
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.
Top comments (0)