Input elements have fluid width sizes in a syntax that is similar to Pure Grids. You can apply a pure-input-* class to these elements.
You can control input sizing even further by wrapping them in grid containers. In the example below, the <input> elements have a pure-input-1 class, but are wrapped in a <div> with a specific grid class.
To mark a form control as required, add the required attribute.
To disable a form control, add the disabled attribute.
To make a form input read-only, add the readonly attribute. The difference between disabled and readonly is read-only inputs are still focusable. This allows people to interact with the input and select its text, whereas disabled controls are not interactive.
To display a form control with rounded corners, add the pure-input-rounded classname.
To normalize and align checkboxes and radio inputs, add the pure-checkbox or pure-radio classname.
Pure Grids are easy to work with, and very powerful. There are a few simple concepts to keep in mind:
pure-g) and unit classes (pure-u or pure-u-*)
pure-u-1-2 has a width of 50%, whereas pure-u-1-5 would have a width of 20%.
pure-g classname must be a grid unit with a pure-u or pure-u-* classname.
Let's start with a simple example. Here's a grid with three columns:
Thirds
Thirds
Thirds
Pure ships with both a 5ths and 24ths based grid. Depicted below are the available units that can be appended to the pure-u-* classname where * is one of the unit fractions listed below. For example the unit classname for 50% width is: pure-u-1-2.
We are working on building tools to allow people to customize Pure Grids. The first low-level tools, the Pure Grids Rework Plugin, is available to use today—we use this tool to generate Pure's built-in unit sizes.
Pure has a mobile-first responsive grid system that can be used declaratively through CSS class names. It's a robust and flexible grid that builds on top of the default grid.
Since media queries cannot be over-written, we do not include the grid system as part of pure.css. You'll have to pull it in as a separate CSS file. You can do this by adding the following <link> tag to your page.
The best way to understand the difference between Pure's regular grid and a responsive grid is through an example.The snippet below shows how regular Pure Grids are written. These grids are unresponsive. They'll always be width: 33.33%, irrespective of the width of the screen.
Next, let's look at a responsive grid. Elements within this grid will be width: 100% on small screens, but will shrink to become width: 33.33% on medium-sized screens and above.
When using Responsive Grids, you can control how the grid behaves at specific breakpoints by adding class names. Pure's default responsive grids comes with the following class names and media query breakpoints.
| Key | CSS Media Query | Applies | Classname |
|---|---|---|---|
| None | None | Always | .pure-u-* |
sm |
@media screen and (min-width: 35.5em) |
≥ 568px | .pure-u-sm-* |
md |
@media screen and (min-width: 48em) |
≥ 768px | .pure-u-md-* |
lg |
@media screen and (min-width: 64em) |
≥ 1024px | .pure-u-lg-* |
xl |
@media screen and (min-width: 80em) |
≥ 1280px | .pure-u-xl-* |
xxl |
@media screen and (min-width: 120em) |
≥ 1920px | .pure-u-xxl-* |
xxxl |
@media screen and (min-width: 160em) |
≥ 2560px | .pure-u-xxxl-* |
x4k |
@media screen and (min-width: 240em) |
≥ 3840px | .pure-u-x4k-* |
You may have noticed that we use em for our default CSS Media Query widths instead of px. This was a conscious decision since it allows the Media Queries to respond appropriately when people zoom the webpage. Check out this article by Brad Frost for some background information on using relative units within Media Queries.
If you do want to use units other than em, you can always modify the default Media Queries on the Get Started page. Converting from em to px is pretty simple:
* The em to px conversion is based on the browser's default font size, which is generally 16px, but can be overridden by a user in their browser settings.
The example below leverages Pure's Responsive Grid to create a row with four columns. The columns stack on small screens, take up width: 50% on medium-sized screens, and width: 25% on large screens.
This is done by adding the .pure-u-1 class for small screens, .pure-u-md-1-2 for medium-sized screens, and .pure-u-lg-1-4 for large screens. Resize the page to see the grid respond to the screen size.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.
In culpa qui officia deserunt mollit anim id est laborum. incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
Integer vitae lectus accumsan, egestas dui eget, ullamcorper urn. In feugiat tortor at turpis rhoncus tincidunt. Duis sed porttitor ante, eget venenatis lectus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fermentum dui turpis.
Quisque ac magna eget est porta varius ut eget quam. Curabitur tincidunt gravida nisl.
Fusce accumsan, sem vitae tempus tempor, nulla lectus interdum felis, eget molestie urna mauris vel elit. Curabitur vel ipsum nulla.
Pure's default grid system is mobile-first. If you want to have a grid on small screens, just use the pure-u-* classnames on your elements.
This cell will be 1/3 width all the time.
This cell will be 1/3 width all the time.
This cell will be 1/3 width all the time.
When using Responsive Grids, you'll want your images to be fluid as well so they grow and shrink with the content, while maintaining the correct ratio. To do this, just add the .pure-img class on them. Check out the example below.
To add borders and padding to Pure Grids, you have two options. The first option is to nest a <div> inside each Grid unit and style the child container:
The second option is to add borders and padding directly to a grid unit. This would ordinarily risk breaking the layout, but you can easily avoid this problem by augmenting the behavior of the grid itself with a box-sizing: border-box rule:
Using box-sizing: border-box keeps your markup cleaner, but has one minor drawback. Setting this property on all grid units makes it harder to override or unset the value later on. As an unopinionated library, Pure lets box-sizing remain at the default value of content-box and leaves the choice up to you.
Grids is part of the Pure CSS file. However, if you just want Grids and not the other modules, you can pull it down separately. Just include these <link> elements in your <head>.
}){kind=logo}
Get Started View on GitHub
Pure is ridiculously tiny. The entire set of modules clocks in at {fileSize({ module: 'pure', filesizes: moduleSizes })}* minified and gzipped. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you'll save even more bytes.
* We can add correctly :) the numbers above are individual module sizes; when grouped together they compress (gzip) even more.
Pure builds on Normalize.css and provides layout and styling for native HTML elements, plus the most common UI components. It's what you need, without the cruft.
Pure is responsive out of the box, so elements look great on all screen sizes.
Pure has minimal styles and encourages you to write your application styles on top of it. It's designed to get out of your way and makes it easy to override styles.
}){kind=icon}
Unlike other frameworks, Pure's design is unopinionated, minimal and flat. We believe that it's much easier to add new CSS rules than to overwrite existing rules. By adding a few lines of CSS, you can customize Pure's appearance to work with your web project.
Extend Pure
Pure was crafted with the goal that it can be used in every web project. To showcase this, we've made some common layouts that leverage Pure. These layouts are responsive and don't require JavaScript (except for certain menu interactions).
{layoutMarkup}Menus are vertical by default. Minimal default styling and low-specificity selectors make them easy to customize. By default, menu items take up 100% of the width of their container, so you may want to limit the menu width or set the menu to display:inline-block.
To create a horizontal menu, add the pure-menu-horizontal class name.
Mark a selected list element by adding the pure-menu-selected class to the list element. To mark a link as disabled, add the class name pure-menu-disabled to the list element. Disabled items appear faded and do not inherit hover styles.
We recommend enabling submenus via JavaScript to enable accessibility. To help get you started, an example script written in vanilla JS provides ARIA support, limited submenu arrow-key navigation, and the ability to dismiss menus with an outside event or the ESC key. But you may wish to go further by adding edge detection, comprehensive arrow-key navigation, and polyfills for compatibility with old browsers.
Even with JavaScript in place, you still might want to display submenus on hover. Just add pure-menu-allow-hover to the pure-menu-has-children list item. This can be nice for desktop users and provides a fallback for users with no JavaScript.
The same construct used to create dropdowns works in vertical menus as well. You may nest submenus, but keep in mind that complex menus can present usability challenges on small screens.
To create a scrollable horizontal menu, add the pure-menu-scrollable class name. When there isn't enough room, the menu items can be scrolled or flicked. Dropdown menus are not supported. If you would like momentum-based scrolling we recommend using a JS library like scrollbooster to add such effects.
To create a scrollable vertical menu, limit the height of your menu, and then add the pure-menu-scrollable class name. The menu items can be scrolled or flicked. Submenus are not supported.
Check out our Layout Examples to see how you can use Pure as a foundation for more complex menus, such as:
You can add Pure to your page via the free jsDelivr CDN. Just add the following <link> element into your page's <head>, before your project's stylesheets.
The viewport meta element lets you control the the width and scale of the viewport on mobile browsers. Since you're building a responsive website, you want the width to be equal to the device's native width. Add this into your page's <head>.
Pure's grid system is very simple. You create a row by using the .pure-g class, and create columns within that row by using the pure-u-* classes.
Here's a grid with three columns:
Thirds
Thirds
Thirds
Thirds
Thirds
Thirds
Pure's grid system is also mobile-first and responsive, and you're able to customize the grid by specifying CSS Media Query breakpoints and grid classnames. {/*If needed, you can customize Pure Grids below, but let's start off with an example.*/}
You'll need to also include Pure's grids-responsive.css onto your page:
Here's the default responsive breakpoints included in grids-responsive.css:
| Key | CSS Media Query | Applies | Classname |
|---|---|---|---|
| None | None | Always | .pure-u-* |
sm |
@media screen and (min-width: 35.5em) |
≥ 568px | .pure-u-sm-* |
md |
@media screen and (min-width: 48em) |
≥ 768px | .pure-u-md-* |
lg |
@media screen and (min-width: 64em) |
≥ 1024px | .pure-u-lg-* |
xl |
@media screen and (min-width: 80em) |
≥ 1280px | .pure-u-xl-* |
xxl |
@media screen and (min-width: 120em) |
≥ 1920px | .pure-u-xxl-* |
xxxl |
@media screen and (min-width: 160em) |
≥ 2560px | .pure-u-xxxl-* |
x4k |
@media screen and (min-width: 240em) |
≥ 3840px | .pure-u-x4k-* |
Here's an example of what you'd be able to do. Try resizing your screen to see how the grid responds.
To style an HTML table, add the pure-table classname. This class adds padding and borders to table elements, and emphasizes the header.
| # | Make | Model | Year |
|---|---|---|---|
| 1 | Honda | Accord | 2009 |
| 2 | Toyota | Camry | 2012 |
| 3 | Hyundai | Elantra | 2010 |
To add horizontal and vertical borders to all cells, add the pure-table-bordered classname to the <table> element.
| # | Make | Model | Year |
|---|---|---|---|
| 1 | Honda | Accord | 2009 |
| 2 | Toyota | Camry | 2012 |
| 3 | Hyundai | Elantra | 2010 |
If you prefer horizontal lines only, add the pure-table-horizontal classname to the <table> element.
| # | Make | Model | Year |
|---|---|---|---|
| 1 | Honda | Accord | 2009 |
| 2 | Toyota | Camry | 2012 |
| 3 | Hyundai | Elantra | 2010 |
Large tables are easier to parse visually if rows are easily distinguishable. Adding the pure-table-odd class name to every other <tr> element changes the background of the row and creates a zebra-styled effect.
Note: In browsers which support the CSS3 nth-child pseudo selector a simpler approach can be used. The pure-table-striped classname can be added to the <table> element and the zebra-styled striping will happen automatically.
| # | Make | Model | Year |
|---|---|---|---|
| 1 | Honda | Accord | 2009 |
| 2 | Toyota | Camry | 2012 |
| 3 | Hyundai | Elantra | 2010 |
| 4 | Ford | Focus | 2008 |
| 5 | Nissan | Sentra | 2011 |
| 6 | BMW | M3 | 2009 |
| 7 | Honda | Civic | 2010 |
| 8 | Kia | Soul | 2010 |
You can add Pure to your project through npm. This is our recommended way to to integrate Pure into your project's build process and tool chain.
require('purecss') will load an object with the following methods:
})
getFile(name)getFilePath(name)You can also install Pure with Composer.
We've written several tools that help you extend Pure and integrate it with your project's CSS. These tools are available as Grunt plugins that can easily be integrated into your existing Gruntfile.js.
We've taken a layered approach to developing Pure's tooling. Most of the tools are first built as Rework plugins. This allows you to compose Pure's Rework plugins together with other Rework plugins. It also allows the Grunt plugins to be written as very thin wrappers.
Pure was created to help developer's build mobile-first responsive web projects. However, since CSS Media Queries cannot be over-written via CSS, you can use Pure's tooling to customize Pure's Responsive Grids for your project.
Install the Pure Grids Grunt Plugin through npm.
Next, add it to your Gruntfile.js.
Finally, add the necessary configuration through the pure_grids task. To see a full list of all configurable properties, check out the README documentation.
If you're not using Grunt, you can also generate your custom responsive grids through using the Pure Grids Rework Plugin. It has the same configuration options as the Grunt plugin — in fact, this is what powers the Grunt plugin.
You can install the Rework plugin through npm.
And it can be used on it's own like this, or along side other Rework plugins you might be using.
All selectors defined in Pure's source code begin with the .pure- prefix. However, you may want to change this. To accomplish this task, you can use Pure's tooling to mutate CSS selectors.
Install the CSS Selectors Grunt Plugin through npm.
Once it's installed, add the task to your Gruntfile.js
Finally, add the necessary configuration through the css_selectors task. Check out the README documentation for more details.
If you're not using Grunt, you can also mutate CSS selectors using the Mutate Selectors Rework Plugin. It has a similar interface to the Grunt plugin — in fact, this is what powers the Grunt plugin.
You can install the Rework plugin through npm.
And it can be used on it's own like this, or along side other Rework plugins you might be using.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Hey, I just wanted to check in with you from Toronto. I got here earlier today.
Hey, I had some feedback for pull request #51. We should center the menu so it looks better on mobile.
Excepteur sint occaecat cupidatat non proident, sunt in culpa.
Mauris tempor mi vitae sem aliquet pharetra. Fusce in dui purus, nec malesuada mauris.
We found 10 news articles that you may like.
From Tilo Mitra at 3:56pm, April 3, 2021
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Aliquam ac feugiat dolor. Proin mattis massa sit amet enim iaculis tincidunt. Mauris tempor mi vitae sem aliquet pharetra. Fusce in dui purus, nec malesuada mauris. Curabitur ornare arcu quis mi blandit laoreet. Vivamus imperdiet fermentum mauris, ac posuere urna tempor at. Duis pellentesque justo ac sapien aliquet egestas. Morbi enim mi, porta eget ullamcorper at, pharetra id lorem.
Donec sagittis dolor ut quam pharetra pretium varius in nibh. Suspendisse potenti. Donec imperdiet, velit vel adipiscing bibendum, leo eros tristique augue, eu rutrum lacus sapien vel quam. Nam orci arcu, luctus quis vestibulum ut, ullamcorper ut enim. Morbi semper erat quis orci aliquet condimentum. Nam interdum mauris sed massa dignissim rhoncus.
Regards,
Tilo
A collection of beautiful photos gathered from Unsplash.com.
This page shows how to make a photo gallery using Pure Grids. Using Pure, we can create interesting layouts such as this photo gallery. This layout is fully responsive. We've added a bit of custom media queries on top of the responsive grid provided by Pure.
We've also taken advantage of Pure Forms and
Pure Menus. This example uses a form with
the pure-form class name to create an inline form. We
use Pure Buttons for the button styling.
Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.
Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.
Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.
Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.
Cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
To use this layout, you can just copy paste the HTML, along with the CSS in side-menu.css, and the JavaScript in ui.js. The JS file uses vanilla JavaScript to simply toggle an active class that makes the menu responsive.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
This example shows how you can build upon Pure menu classes such as pure-menu-horizontal and pure-menu-scrollable. At wide window-widths we display a horizontal menu. At smaller window-widths, we switch to a scrollable horizontal menu with a toggle control. Remember that the JavaScript provided is plain vanilla JS so it won't work in some browsers; you'll need to polyfill or adapt the code to your library of choice.
Code reproduced below:
<style>
.custom-menu-wrapper {
background-color: #808080;
margin-bottom: 2.5em;
white-space: nowrap;
position: relative;
}
.custom-menu {
display: inline-block;
width: auto;
vertical-align: middle;
-webkit-font-smoothing: antialiased;
}
.custom-menu .pure-menu-link,
.custom-menu .pure-menu-heading {
color: white;
}
.custom-menu .pure-menu-link:hover,
.custom-menu .pure-menu-heading:hover {
background-color: transparent;
}
.custom-menu-top {
position: relative;
padding-top: .5em;
padding-bottom: .5em;
}
.custom-menu-brand {
display: block;
text-align: center;
position: relative;
}
.custom-menu-toggle {
width: 44px;
height: 44px;
display: block;
position: absolute;
top: 3px;
right: 0;
display: none;
}
.custom-menu-toggle .bar {
background-color: white;
display: block;
width: 20px;
height: 2px;
border-radius: 100px;
position: absolute;
top: 22px;
right: 12px;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
transition: all 0.5s;
}
.custom-menu-toggle .bar:first-child {
-webkit-transform: translateY(-6px);
-moz-transform: translateY(-6px);
-ms-transform: translateY(-6px);
transform: translateY(-6px);
}
.custom-menu-toggle.x .bar {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.custom-menu-toggle.x .bar:first-child {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.custom-menu-screen {
background-color: rgba(0, 0, 0, 0.5);
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
transition: all 0.5s;
height: 3em;
width: 70em;
position: absolute;
top: 0;
z-index: -1;
}
.custom-menu-tucked .custom-menu-screen {
-webkit-transform: translateY(-44px);
-moz-transform: translateY(-44px);
-ms-transform: translateY(-44px);
transform: translateY(-44px);
}
@media (max-width: 62em) {
.custom-menu {
display: block;
}
.custom-menu-toggle {
display: block;
display: none\9;
}
.custom-menu-bottom {
position: absolute;
width: 100%;
border-top: 1px solid #eee;
background-color: #808080\9;
z-index: 100;
}
.custom-menu-bottom .pure-menu-link {
opacity: 1;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
transition: all 0.5s;
}
.custom-menu-bottom.custom-menu-tucked .pure-menu-link {
-webkit-transform: translateX(-140px);
-moz-transform: translateX(-140px);
-ms-transform: translateX(-140px);
transform: translateX(-140px);
opacity: 0;
opacity: 1\9;
}
.pure-menu-horizontal.custom-menu-tucked {
z-index: -1;
top: 45px;
position: absolute;
overflow: hidden;
}
}
</style>
<div class="custom-menu-wrapper">
<div class="pure-menu custom-menu custom-menu-top">
<a href="#" class="pure-menu-heading custom-menu-brand">Brand</a>
<a href="#" class="custom-menu-toggle" id="toggle"><s class="bar"></s><s class="bar"></s></a>
</div>
<div class="pure-menu pure-menu-horizontal pure-menu-scrollable custom-menu custom-menu-bottom custom-menu-tucked" id="tuckedMenu">
<div class="custom-menu-screen"></div>
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Blog</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">GitHub</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Twitter</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Apple</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Google</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Wang</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Yahoo</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">W3C</a></li>
</ul>
</div>
</div>
<script>
(function (window, document) {
document.getElementById('toggle').addEventListener('click', function (e) {
document.getElementById('tuckedMenu').classList.toggle('custom-menu-tucked');
document.getElementById('toggle').classList.toggle('x');
});
})(this, this.document);
</script>This example shows how you can build upon Pure Menu and Grid classes. At wide window-widths we display a horizontal menu. At smaller window-widths, we switch to a vertical menu with a toggle control. Grids are used to arrange the menus. Code reproduced below:
<link rel="stylesheet" href="/css/pure/grids-responsive-min.css">
<style>
.custom-wrapper {
background-color: #ffd390;
margin-bottom: 1em;
-webkit-font-smoothing: antialiased;
height: 2.1em;
overflow: hidden;
-webkit-transition: height 0.5s;
-moz-transition: height 0.5s;
-ms-transition: height 0.5s;
transition: height 0.5s;
}
.custom-wrapper.open {
height: 14em;
}
.custom-menu-3 {
text-align: right;
}
.custom-toggle {
width: 34px;
height: 34px;
position: absolute;
top: 0;
right: 0;
display: none;
}
.custom-toggle .bar {
background-color: #777;
display: block;
width: 20px;
height: 2px;
border-radius: 100px;
position: absolute;
top: 18px;
right: 7px;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
transition: all 0.5s;
}
.custom-toggle .bar:first-child {
-webkit-transform: translateY(-6px);
-moz-transform: translateY(-6px);
-ms-transform: translateY(-6px);
transform: translateY(-6px);
}
.custom-toggle.x .bar {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.custom-toggle.x .bar:first-child {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
@media (max-width: 47.999em) {
.custom-menu-3 {
text-align: left;
}
.custom-toggle {
display: block;
}
}
</style>
<div class="custom-wrapper pure-g" id="menu">
<div class="pure-u-1 pure-u-md-1-3">
<div class="pure-menu">
<a href="#" class="pure-menu-heading custom-brand">Brand</a>
<a href="#" class="custom-toggle" id="toggle"><s class="bar"></s><s class="bar"></s></a>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-3">
<div class="pure-menu pure-menu-horizontal custom-can-transform">
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
</ul>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-3">
<div class="pure-menu pure-menu-horizontal custom-menu-3 custom-can-transform">
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Yahoo</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">W3C</a></li>
</ul>
</div>
</div>
</div>
<script>
(function (window, document) {
var menu = document.getElementById('menu'),
rollBack,
WINDOW_CHANGE_EVENT = ('onorientationchange' in window) ? 'orientationchange':'resize';
function toggleHorizontal() {
menu.classList.remove('closing');
[].forEach.call(
document.getElementById('menu').querySelectorAll('.custom-can-transform'),
function(el){
el.classList.toggle('pure-menu-horizontal');
}
);
};
function toggleMenu() {
// set timeout so that the panel has a chance to roll up
// before the menu switches states
if (menu.classList.contains('open')) {
menu.classList.add('closing');
rollBack = setTimeout(toggleHorizontal, 500);
}
else {
if (menu.classList.contains('closing')) {
clearTimeout(rollBack);
} else {
toggleHorizontal();
}
}
menu.classList.toggle('open');
document.getElementById('toggle').classList.toggle('x');
};
function closeMenu() {
if (menu.classList.contains('open')) {
toggleMenu();
}
}
document.getElementById('toggle').addEventListener('click', function (e) {
toggleMenu();
e.preventDefault();
});
window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu);
})(this, this.document);
</script>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
================================================ FILE: src/forms/css/forms-r.css ================================================ @media only screen and (max-width : 480px) { .pure-form button[type="submit"] { margin: 0.7em 0 0; } .pure-form input:not([type]), .pure-form input[type="text"], .pure-form input[type="password"], .pure-form input[type="email"], .pure-form input[type="url"], .pure-form input[type="date"], .pure-form input[type="month"], .pure-form input[type="time"], .pure-form input[type="datetime"], .pure-form input[type="datetime-local"], .pure-form input[type="week"], .pure-form input[type="number"], .pure-form input[type="search"], .pure-form input[type="tel"], .pure-form input[type="color"], .pure-form label { margin-bottom: 0.3em; display: block; } .pure-group input:not([type]), .pure-group input[type="text"], .pure-group input[type="password"], .pure-group input[type="email"], .pure-group input[type="url"], .pure-group input[type="date"], .pure-group input[type="month"], .pure-group input[type="time"], .pure-group input[type="datetime"], .pure-group input[type="datetime-local"], .pure-group input[type="week"], .pure-group input[type="number"], .pure-group input[type="search"], .pure-group input[type="tel"], .pure-group input[type="color"] { margin-bottom: 0; } .pure-form-aligned .pure-control-group label { margin-bottom: 0.3em; text-align: left; display: block; width: 100%; } .pure-form-aligned .pure-controls { margin: 1.5em 0 0 0; } .pure-form-message-inline, .pure-form-message { display: block; font-size: 0.75em; /* Increased bottom padding to make it group with its related input element. */ padding: 0.2em 0 0.8em; } } ================================================ FILE: src/forms/css/forms.css ================================================ /*csslint box-model:false*/ /* Box-model set to false because we're setting a height on select elements, which also have border and padding. This is done because some browsers don't render the padding. We explicitly set the box-model for select elements to border-box, so we can ignore the csslint warning. */ .pure-form input[type="text"], .pure-form input[type="password"], .pure-form input[type="email"], .pure-form input[type="url"], .pure-form input[type="date"], .pure-form input[type="month"], .pure-form input[type="time"], .pure-form input[type="datetime"], .pure-form input[type="datetime-local"], .pure-form input[type="week"], .pure-form input[type="number"], .pure-form input[type="search"], .pure-form input[type="tel"], .pure-form input[type="color"], .pure-form select, .pure-form textarea { padding: 0.5em 0.6em; display: inline-block; border: 1px solid #ccc; box-shadow: inset 0 1px 3px #ddd; border-radius: 4px; vertical-align: middle; box-sizing: border-box; } /* Need to separate out the :not() selector from the rest of the CSS 2.1 selectors since IE8 won't execute CSS that contains a CSS3 selector. */ .pure-form input:not([type]) { padding: 0.5em 0.6em; display: inline-block; border: 1px solid #ccc; box-shadow: inset 0 1px 3px #ddd; border-radius: 4px; box-sizing: border-box; } /* Chrome (as of v.32/34 on OS X) needs additional room for color to display. */ /* May be able to remove this tweak as color inputs become more standardized across browsers. */ .pure-form input[type="color"] { padding: 0.2em 0.5em; } .pure-form input[type="text"]:focus, .pure-form input[type="password"]:focus, .pure-form input[type="email"]:focus, .pure-form input[type="url"]:focus, .pure-form input[type="date"]:focus, .pure-form input[type="month"]:focus, .pure-form input[type="time"]:focus, .pure-form input[type="datetime"]:focus, .pure-form input[type="datetime-local"]:focus, .pure-form input[type="week"]:focus, .pure-form input[type="number"]:focus, .pure-form input[type="search"]:focus, .pure-form input[type="tel"]:focus, .pure-form input[type="color"]:focus, .pure-form select:focus, .pure-form textarea:focus { outline: 0; border-color: #129FEA; } /* Need to separate out the :not() selector from the rest of the CSS 2.1 selectors since IE8 won't execute CSS that contains a CSS3 selector. */ .pure-form input:not([type]):focus { outline: 0; border-color: #129FEA; } .pure-form input[type="file"]:focus, .pure-form input[type="radio"]:focus, .pure-form input[type="checkbox"]:focus { outline: thin solid #129FEA; outline: 1px auto #129FEA; } .pure-form .pure-checkbox, .pure-form .pure-radio { margin: 0.5em 0; display: block; } .pure-form input[type="text"][disabled], .pure-form input[type="password"][disabled], .pure-form input[type="email"][disabled], .pure-form input[type="url"][disabled], .pure-form input[type="date"][disabled], .pure-form input[type="month"][disabled], .pure-form input[type="time"][disabled], .pure-form input[type="datetime"][disabled], .pure-form input[type="datetime-local"][disabled], .pure-form input[type="week"][disabled], .pure-form input[type="number"][disabled], .pure-form input[type="search"][disabled], .pure-form input[type="tel"][disabled], .pure-form input[type="color"][disabled], .pure-form select[disabled], .pure-form textarea[disabled] { cursor: not-allowed; background-color: #eaeded; color: #cad2d3; } /* Need to separate out the :not() selector from the rest of the CSS 2.1 selectors since IE8 won't execute CSS that contains a CSS3 selector. */ .pure-form input:not([type])[disabled] { cursor: not-allowed; background-color: #eaeded; color: #cad2d3; } .pure-form input[readonly], .pure-form select[readonly], .pure-form textarea[readonly] { background-color: #eee; /* menu hover bg color */ color: #777; /* menu text color */ border-color: #ccc; } .pure-form input:focus:invalid, .pure-form textarea:focus:invalid, .pure-form select:focus:invalid { color: #b94a48; border-color: #e9322d; } .pure-form input[type="file"]:focus:invalid:focus, .pure-form input[type="radio"]:focus:invalid:focus, .pure-form input[type="checkbox"]:focus:invalid:focus { outline-color: #e9322d; } .pure-form select { /* Normalizes the height; padding is not sufficient. */ height: 2.25em; border: 1px solid #ccc; background-color: white; } .pure-form select[multiple] { height: auto; } .pure-form label { margin: 0.5em 0 0.2em; } .pure-form fieldset { margin: 0; padding: 0.35em 0 0.75em; border: 0; } .pure-form legend { display: block; width: 100%; padding: 0.3em 0; margin-bottom: 0.3em; color: #333; border-bottom: 1px solid #e5e5e5; } .pure-form-stacked input[type="text"], .pure-form-stacked input[type="password"], .pure-form-stacked input[type="email"], .pure-form-stacked input[type="url"], .pure-form-stacked input[type="date"], .pure-form-stacked input[type="month"], .pure-form-stacked input[type="time"], .pure-form-stacked input[type="datetime"], .pure-form-stacked input[type="datetime-local"], .pure-form-stacked input[type="week"], .pure-form-stacked input[type="number"], .pure-form-stacked input[type="search"], .pure-form-stacked input[type="tel"], .pure-form-stacked input[type="color"], .pure-form-stacked input[type="file"], .pure-form-stacked select, .pure-form-stacked label, .pure-form-stacked textarea { display: block; margin: 0.25em 0; } /* Need to separate out the :not() selector from the rest of the CSS 2.1 selectors since IE8 won't execute CSS that contains a CSS3 selector. */ .pure-form-stacked input:not([type]) { display: block; margin: 0.25em 0; } .pure-form-aligned input, .pure-form-aligned textarea, .pure-form-aligned select, .pure-form-message-inline { display: inline-block; vertical-align: middle; } .pure-form-aligned textarea { vertical-align: top; } /* Aligned Forms */ .pure-form-aligned .pure-control-group { margin-bottom: 0.5em; } .pure-form-aligned .pure-control-group label { text-align: right; display: inline-block; vertical-align: middle; width: 10em; margin: 0 1em 0 0; } .pure-form-aligned .pure-controls { margin: 1.5em 0 0 11em; } /* Rounded Inputs */ .pure-form input.pure-input-rounded, .pure-form .pure-input-rounded { border-radius: 2em; padding: 0.5em 1em; } /* Grouped Inputs */ .pure-form .pure-group fieldset { margin-bottom: 10px; } .pure-form .pure-group input, .pure-form .pure-group textarea { display: block; padding: 10px; margin: 0 0 -1px; border-radius: 0; position: relative; top: -1px; } .pure-form .pure-group input:focus, .pure-form .pure-group textarea:focus { z-index: 3; } .pure-form .pure-group input:first-child, .pure-form .pure-group textarea:first-child { top: 1px; border-radius: 4px 4px 0 0; margin: 0; } .pure-form .pure-group input:first-child:last-child, .pure-form .pure-group textarea:first-child:last-child { top: 1px; border-radius: 4px; margin: 0; } .pure-form .pure-group input:last-child, .pure-form .pure-group textarea:last-child { top: -2px; border-radius: 0 0 4px 4px; margin: 0; } .pure-form .pure-group button { margin: 0.35em 0; } .pure-form .pure-input-1 { width: 100%; } .pure-form .pure-input-3-4 { width: 75%; } .pure-form .pure-input-2-3 { width: 66%; } .pure-form .pure-input-1-2 { width: 50%; } .pure-form .pure-input-1-3 { width: 33%; } .pure-form .pure-input-1-4 { width: 25%; } /* Inline help for forms */ .pure-form-message-inline { display: inline-block; padding-left: 0.3em; color: #666; vertical-align: middle; font-size: 0.875em; } /* Block help for forms */ .pure-form-message { display: block; color: #666; font-size: 0.875em; } ================================================ FILE: src/forms/tests/manual/forms.html ================================================Grids with a serif font stack.
Grids with a monospace font stack.
.pure-img Images|
1/2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pharetra eros et mattis venenatis.
1/2 Nam neque sapien, lacinia non lectus non, accumsan suscipit ipsum.
|
| # | Make | Model | Year |
|---|---|---|---|
| 1 | Honda | Accord | 2009 |
| 2 | Toyota | Camry | 2012 |
| 3 | Hyundai | Elantra | 2010 |
| # | Make | Model | Year |
|---|---|---|---|
| # | Make | Model | Year |
|---|---|---|---|
| 1 | Honda | Accord | 2009 |
| 2 | Toyota | Camry | 2012 |
| 3 | Hyundai | Elantra | 2010 |
| # | Make | Model | Year |
|---|---|---|---|
| 1 | Honda | Accord | 2009 |
| Toyota | Camry | 2012 | |
| Hyundai | Elantra | 2010 |
| # | Make | Model | Year |
|---|---|---|---|
| 1 | Toyota | Camry | 2012 |
| 2 | [ redacted ] | ||
| 3 | Hyundai | Elantra | 2010 |
| # | Make | Model | Year |
|---|---|---|---|
| 1 | Honda | Accord | 2009 |
| 2 | Toyota | Camry | 2012 |
| 3 | Hyundai | Elantra | 2010 |
| # | Make | Model | Year |
|---|---|---|---|
| 1 | Honda | Accord | 2009 |
| 2 | Toyota | Camry | 2012 |
| 3 | Hyundai | Elantra | 2010 |
| 4 | Ford | Focus | 2008 |
| 5 | Nissan | Sentra | 2011 |
| 6 | BMW | M3 | 2009 |
| 7 | Honda | Civic | 2010 |
| 8 | Kia | Soul | 2010 |
| # | Make | Model | Year |
|---|---|---|---|
| 1 | Honda | Accord | 2009 |
| 2 | Toyota | Camry | 2012 |
| 3 | Hyundai | Elantra | 2010 |
| 4 | Ford | Focus | 2008 |
| 5 | Nissan | Sentra | 2011 |
| 6 | BMW | M3 | 2009 |
| 7 | Honda | Civic | 2010 |
| 8 | Kia | Soul | 2010 |
| # | Make | Model | Type | ||||||
|---|---|---|---|---|---|---|---|---|---|
| 1 | Honda | Accord |
|
||||||
| 2 | Toyota | Camry |
|
||||||
| 3 | Hyundai | Elantra |
|