DEV Community

Cover image for Pure CSS , Font Awesome Basic
theankurkaushik
theankurkaushik

Posted on

Pure CSS , Font Awesome Basic

#css #webdev

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">
Enter fullscreen mode Exit fullscreen mode

Put this in <head>-

<meta name="viewport" content="width=device-width, initial-scale=1">
Enter fullscreen mode Exit fullscreen mode

Image-

pure-img
Usually class name are written as "."pure-img

<img class="pure-img" src="...">
Enter fullscreen mode Exit fullscreen mode

Button-

pure-button

<button class="pure-button">Button</button>
Enter fullscreen mode Exit fullscreen mode

pure-button-active

<button class="pure-button pure-button-active">An Active Button</button>
Enter fullscreen mode Exit fullscreen mode

pure-button-disabled

<button class="pure-button pure-button-disabled">Disabled Button</button>
Enter fullscreen mode Exit fullscreen mode

Or just add attribute disabled to button

<button class="pure-button" disabled="">Disabled Button</button>
Enter fullscreen mode Exit fullscreen mode

button-primary

<button class="pure-button pure-button-primary">Primary Button</button>
Enter fullscreen mode Exit fullscreen mode

*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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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
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>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

fas (solid) and fab (brands) is available for free
fa and fa-solid etc.. are depreciated in Font Awesome v5.

Top comments (0)

Read next

ani_dev profile image

Capturing the essence of Mumbai, one Vada Pav at a time.

anii -

ricardogesteves profile image

Webhooks and WebSockets

Ricardo Esteves -

epakconsultant profile image

Creating Your First Web App with FlutterFlow: A Comprehensive Guide

sajjad hussain -

antonmartyniuk profile image

Building Responsive Design Using Viewport CSS Units

Anton Martyniuk -