What are the important features of Pure.CSS ?
Last Updated :
15 May, 2023
Pure.css is just another framework of CSS what separates it apart is its tiny size. It’s a mere 3.7kb, hence making it a good contender to compete against Bootstrap.
Features:
- First and foremost, It’s FREE.
- It has several important prebuilt common elements as follows
- Base: Elements like <p>, <h1…h6>, topography etc.
- Grids: Responsive grids.
- Forms: Multi-columns, stacked forms, aligned forms, grouped inputs, etc.
- Tables: Base tables with borders, stripping, etc.
- Buttons: Button effects like focus, hover, active, etc.
- Menus: Dropdowns, scrollable menus, vertical menus, responsive menus, etc.
- It is ridiculously tiny as said above. Modules clocked at less than 4kb!
- Perfect for beginners. easy, and intuitive. Just copy the stylesheet link from their website purecss.io and add it to your HTML doc.
- The pure.css is designed with keeping responsive design in mind. So we get prebuilt responsive styles that stay the same on all platforms.
- No dependency on JavaScript and its library.
- It also supports shadows and colors.
- A great alternative to Bootstrap.
- At its core, it’s just a collection of different CSS modules that are responsive, tiny, and easy to use.
Implementation of Pure.CSS: There are mainly two ways to use this framework. You can either download it from purecss.io or you can use CDN. Let’s understand both by using the stacked form.
Stacked Form: Add the class “pure-form-stacked” to any <form> element to create a stacked form.
Note: Create a default form by adding “pure-form” to <form> class then you can create any particular type of form like stacked, align, etc.
Manually adding the link: Now that you have downloaded the pure.css zip file on your machine. Extract it and place it in your website directory. You can attach it to your main HTML document using the <link> tag.
Syntax:
<link rel = "stylesheet" href: "downloaded_pure_css_file"/>
Example 1: In this example, we are using the above-explained method.
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="pure-min.css" />
<style>
form {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
</style>
</head>
<body>
<form class="pure-form pure-form-stacked">
<fieldset>
<legend>A Stacked Form</legend>
<label for="stacked-email">Email</label>
<input type="email"
id="stacked-email"
placeholder="Email" />
<span class="pure-form-message">
This is a required field.
</span>
<label for="stacked-password">Password</label>
<input type="password"
id="stacked-password"
placeholder="Password" />
<label for="stacked-state">State</label>
<select id="stacked-state">
<option>AL</option>
<option>CA</option>
<option>IL</option>
</select>
<label for="stacked-remember"
class="pure-checkbox">
<input type="checkbox"
id="stacked-remember" />
Remember me
</label>
<button type="submit"
class="pure-button pure-button-primary">
Sign in
</button>
</fieldset>
</form>
</body>
</html>
|
Output:
Stacked Form using Pure.CSS (linking the downloaded css file)
If we remove pure.css file i.e. if we remove the <link> tag, we get the following output.
Without Pure.CSS
Using CDN (Content Delivery Network): Even though both steps do the same thing, still most people prefer CDN over manually linking the pure.css file because when you use CDN, you always get the latest file. So you don’t have to worry about updating your pure.css file every time.
Syntax:
<link rel = “stylesheet” href: “https://unpkg.com/purecss@2.0.6/build/pure-min.css”/>
/* Copy the url form pure.css website to get latest version */
Example: In this example, we are using the above-explained method.
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1" />
<link rel="stylesheet"
href=
<style>
form {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
</style>
</head>
<body>
<form class="pure-form pure-form-stacked">
<fieldset>
<legend>A Stacked Form</legend>
<label for="stacked-email">Email</label>
<input type="email"
id="stacked-email"
placeholder="Email" />
<span class="pure-form-message">
This is a required field.
</span>
<label for="stacked-password">Password</label>
<input type="password"
id="stacked-password"
placeholder="Password" />
<label for="stacked-state">State</label>
<select id="stacked-state">
<option>AL</option>
<option>CA</option>
<option>IL</option>
</select>
<label for="stacked-remember"
class="pure-checkbox">
<input type="checkbox"
id="stacked-remember" />
Remember me
</label>
<button type="submit"
class="pure-button pure-button-primary">
Sign in
</button>
</fieldset>
</form>
</body>
</html>
|
Output:
Stacked Form using Pure.CSS (CDN – Adding the url of the pure css file)
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...