Pure CSS Installation and Uses
Last Updated :
14 Sep, 2021
Pure CSS is a framework of CSS. It is a free and open-source tool collection for creating responsive websites and web applications. Pure CSS is developed by Yahoo and is used for creating faster, beautiful, and responsive websites. It can be used as an alternative to Bootstrap.
Installation of Pure CSS: We can add Pure CSS to our webpage in two ways.
- Using NPM Install
- Using CDN Link
Using NPM Install: You can add Pure CSS to your project through npm. This is our recommended way to integrate Pure CSS into your project’s build process and toolchain.
npm install purecss --save
Using CDN Link: You can add Pure CSS to your page via the free unpkg CDN link. Just add the following <link> element into your page’s <head>, before your project’s style sheets.
<link rel=”stylesheet” href=”https://unpkg.com/purecss@2.0.5/build/pure-min.css” integrity=”sha384-LTIDeidl25h2dPxrB2Ekgc9c7sEC3CWGM6HeFmuDNUjX76Ert4Z4IY714dhZHPLd” crossorigin=”anonymous”>
Below example will show the use of Pure CSS:
Example 1: In this example, we will use the Pure CSS CDN link to design a basic form.
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet" href =
integrity =
"sha384-LTIDeidl25h2dPxrB2Ekgc9c7sEC3CWGM6HeFmuDNUjX76Ert4Z4IY714dhZHPLd"
crossorigin = "anonymous" >
< meta name = "viewport" content =
"width=device-width, initial-scale=1.0" />
</ head >
< body >
< h2 color = "" >GeeksforGeeks</ h2 >
< strong >Pure CSS Example Code</ strong >
< form class = "pure-form" >
< fieldset >
< legend >Login to use GeeksforGeeks IDE</ legend >
< input type = "email" placeholder = "Email" />
< input type = "password" placeholder = "Password" />
< br >< br >
< label for = "default-remember" >
< input type = "checkbox" id = "default-remember" />
Remember me
</ label >
< button type = "submit" class = "pure-button pure-button-primary" >
Log in
</ button >
</ fieldset >
</ form >
</ body >
</ html >
|
Output:
Example 2: In this example, we will show the CSS Grid by using Pure CSS.
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet" href =
integrity =
"sha384-LTIDeidl25h2dPxrB2Ekgc9c7sEC3CWGM6HeFmuDNUjX76Ert4Z4IY714dhZHPLd"
crossorigin = "anonymous" >
< meta name = "viewport" content =
"width=device-width, initial-scale=1.0" />
</ head >
< body >
< h2 color = "" >GeeksforGeeks</ h2 >
< strong >Pure CSS Example Code</ strong >
< div class = "pure-g" >
< div class = "pure-u-1-3" >
< img src =
</ div >
< div class = "pure-u-1-3" >
< img src =
</ div >
< div class = "pure-u-1-3" >
< img src =
</ div >
</ div >
</ body >
</ html >
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...