Pure CSS Extend Style
Last Updated :
07 May, 2023
Pure CSS is a lightweight and responsive CSS framework that provides a set of CSS modules and utilities for building fast and responsive web interfaces. It was designed with the goal of being highly extensible, allowing developers to easily customize the look and feel of their websites or applications. One of the benefits of using Pure is that it provides a solid foundation of CSS styles that have been tested across multiple browsers, so developers don’t have to worry about writing complex CSS rules to achieve cross-browser compatibility. This saves time and effort and ensures a consistent experience for users across different platforms.
- Based on SMACSS: SMACSS stands for Scalable and Modular Architecture for CSS which says how to give a perfect structure to CSS. It increases the flexibility and extensibility of a project. A front-end developer should always follow SMACSS while writing code.
- Conventions of Class Name: Pure CSS follows a naming convention where every module has a standard class name for common rules across the module, and then it has an additional name of the class which is used for presenting specific rules for specific sub-module. Generally, all classes start with the prefix pure- which is used to merge the class names and styles. Presentational class names are ignored to avoid tight coupling between the name of the class and style in place of pure-form-horizontal it’s better to write pure-from-aligned.
- Stacked Form using HTML: pure-form and pure-form-stacked are classes that can create a stacked form. The syntax of these two classes is shown below
Syntax:
<form class="pure-form pure-form-stacked"></form>
- Stacked Form using CSS: CSS contains two different classes for forms that have all common rules which are required for the form and stacked form. These inbuilt-specific rules for the form and stacked form will take less time to create a useful form.
Syntax:
/* Here we can add our own CSS for the particular
class to change the style of the form /
.pure-form { ... }
.pure-form-stacked { ... }
- Extending Pure: When we are extending the Pure CSS we have to follow the above convention to make a more extensible and flexible web page. To create a type of form we can use a new class which is form-custom that will create a different type of form using HTML and CSS.
Syntax: HTML
<form class="form-custom pure-form"></form>
Syntax: CSS
.form-custom { ... }
Example 1: In this example, a form is created where the First name, Last name, and City of a user need to be submitted, and in this form, HTML is extending the pure CSS to create a web page. This web page is created using different classes like pure-form, pure-form-stacked, and pure-button.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
integrity=
"sha384-X38yfunGUhNzHpBaEBsWLO+A0HDYOQi8ufWDkZ0k9e0eXz/tH3II7uKZ9msv++Ls"
crossorigin="anonymous">
<link href=
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<style>
.pure-form {
font-family: cursive;
}
.button-success {
background: rgb(28, 184, 65);
}
</style>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<div>
<form class="pure-form pure-form-stacked">
<legend>A Stacked Form</legend>
<label for="first name">
First Name:
</label>
<input id="first name" type="text"
placeholder="First Name">
<label for="last name">
Last Name:
</label>
<input id="last name" type="text"
placeholder="Last Name">
<label for="city">
City:
</label>
<input id="city" type="text"
placeholder="city">
<button type="button"
class="button-success pure-button">
Submit
</button>
</form>
</div>
</body>
</html>
|
Output:
Example 2: In this example, a table is created where the S. No, Name, Department, and Year of the Student are displayed and in this web page HTML has extended pure CSS to use different classes like pure-table.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href=
integrity=
"sha384-X38yfunGUhNzHpBaEBsWLO+A0HDYOQi8ufWDkZ0k9e0eXz/tH3II7uKZ9msv++Ls"
crossorigin="anonymous">
<link href=
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<style>
.table {
background: rgb(28, 184, 65);
}
</style>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<table class="pure-table">
<thead>
<tr class="table">
<th>S.no</th>
<th>Name</th>
<th>Department</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr class="pure-table-odd">
<td>1</td>
<td>Ayush</td>
<td>CSE</td>
<td>1st</td>
</tr>
<tr>
<td>2</td>
<td>Ravi</td>
<td>ECE</td>
<td>2nd</td>
</tr>
<tr class="pure-table-odd">
<td>3</td>
<td>Sayon</td>
<td>IT</td>
<td>3rd</td>
</tr>
<tr>
<td>4</td>
<td>Nitish</td>
<td>EE</td>
<td>4th</td>
</tr>
</tr>
</tbody>
</table>
</body>
</html>
|
Output:
Reference: https://purecss.io/extend/
Share your thoughts in the comments
Please Login to comment...