Skip to content

Instantly share code, notes, and snippets.

@adarsh-gupta101

adarsh-gupta101/PureCSS.html

Created May 13, 2025 14:50
Show Gist options
  • Save adarsh-gupta101/f4e5e4017c65ea89fb8c2ad6ebbcf511 to your computer and use it in GitHub Desktop.
Save adarsh-gupta101/f4e5e4017c65ea89fb8c2ad6ebbcf511 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
PureCSS.html
<html>
<head>
<title>The PURE.CSS Containers</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://unpkg.com/[email protected]/build/pure-min.css"
integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
crossorigin="anonymous"
/>
<style>
.grids-example {
background: rgb(250, 250, 250);
margin: 2em auto;
font-family: Consolas, "Liberation Mono", Courier, monospace;
text-align: center;
}
.graybox {
background: rgb(240, 240, 240);
border: 1px solid red;
}
</style>
</head>
<body>
<div class="grids-example">
<div class="pure-g">
<div class="pure-u-1-1">
<div class="graybox">
<p>
These four columns should stack on small screens, should take up
width: 50% on medium-sized screens, and should take up width: 25%
on large screens.
</p>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div class="graybox">
<p>Java</p>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div class="graybox">
<p>Python</p>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div class="graybox">
<p>JavaScript</p>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div class="graybox">
<p>C++</p>
</div>
</div>
</div>
</div>
<div class="grids-example">
<div class="pure-g">
<div class="pure-u-1">
<div class="graybox">
<p>This column is to occupy the complete space of a row.</p>
</div>
</div>
</div>
</div>
<div class="grids-example">
<div class="pure-g">
<div class="pure-u-2-5">
<div class="graybox">
<p>This column is to occupy the two-fifth of the space of a row.</p>
</div>
</div>
<div class="pure-u-3-5">
<div class="graybox">
<p>
This column is to occupy the three-fifth of the space of a row.
</p>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment