Pure
A set of small, responsive CSS modules that you can use in every web project. https://purecss.io/
This project is looking for maintainers to support and enhance Pure.css. If you are interested please leave a comment in the Github issue.
Features
Pure is meant to be a starting point for every website or web app. We take care of all the CSS work that every site needs, without making it look cookie-cutter:
-
A responsive grid that can be customized to your needs.
-
A solid base built on Normalize.css to fix cross-browser compatibility issues.
-
Consistently styled buttons that work with
<a>
and<button>
elements. -
Styles for vertical and horizontal menus, including support for dropdown menus.
-
Useful form alignments that look great on all screen sizes.
-
Various common table styles.
-
An extremely minimalist look that is super-easy to customize.
-
Responsive by default, with a non-responsive option.
-
Extremely small file size: 3.7KB minified + gzip.
Get Started
Check out the Get Started page for more information.
Build From Source
Optionally, you can build Pure from its source on Github. To do this, you'll need to have Node.js and npm installed. We use Grunt to build Pure.
$ git clone [email protected]:pure-css/pure.git
$ cd pure
$ npm install
$ grunt
Build Files
Now, all Pure CSS files should be built into the pure/build/
directory. All files that are in this build directory are also available on the CDN. The naming conventions of the files in the build/
directory follow these rules:
-
[module]-core.css
: The minimal set of styles, usually structural, that provide the base on which the rest of the module's styles build. -
[module]-nr.css
: Rollup of[module]-core.css
+[module].css
+[module]-[feature].css
from thesrc/[module]/
dir. This is the non-responsive version of a module. -
[module].css
: Rollup of[module]-nr.css
+[module]-r.css
from thebuild/
dir. This is the responsive version of a module. -
*-min.css
: A minified file version of the files of the same name. -
pure.css
: A rollup of all[module].css
files in thebuild/
dir. This is a responsive roll-up of everything, non-minified. Note: does not contain responsive grids with @media queries. -
pure-min.css
: Minified version ofpure.css
that should be used in production. -
pure-nr.css
: A Rollup of all modules without @media queries. This is a non-responsive roll-up of everything, non-minified. -
pure-nr-min.css
: Minified version ofpure-nr.css
that should be used in production. -
grids-responsive.css
: Unminified version of Pure's grid stylesheet which includes @media queries. -
grids-responsive-min.css
: Minified version ofgrids-responsive.css
that should be used in production.
Browser Support and Testing
Pure is tested and works in:
- IE 10+
- Latest Stable: Firefox, Chrome, Safari
- iOS 12+
- Android 6+
Docs and Website
Pure's website is located in the site
directory. Please feel free to open issues or questions in the Issue tab.
Contributing
See the CONTRIBUTING file for information on how to contribute to Pure.
License
This software is free to use under the Yahoo! Inc. BSD-3-Clause license. See the LICENSE file for license text and copyright information.
grids spacing wrong without Arial on pure-g, pure-g-r
This was reported on yui3 grids and still exists (http://yuilibrary.com/projects/yui3/ticket/2533215.) The summary is that the letter spacing = -0.31em hack placed on the pure-g[-r] class to make the grid units work well only works (well) if the font family is Arial. It may appear to work for other font families (pure sets the font family for the html tag to sans-serif), but the spacing is not perfect, and it breaks down in certain browsers (atm it fails on FF/Linux for me.) The general solution is ensure that the pure-g and pure-g-r divs get Arial, and that your own content within the pure-u-x-x divs get whatever font you want (so I guess that means resetting back to sans-serif for pure compatibility.) My interrim solution is to add css like this
in my own css file loaded after pure, and also either resetting the font for all the pure-u-x-x
or using a container (which I always do anyway) inside the pure-u-x-x which sets the font (and does other as well.)
I think the best solution is to handle the pure-g, and pure-u stuff inside of pure.
Progress / Roadmap
I'm just curious about the current state and the maintenance of this project as the oldest issue is from 3rd of july 2013 with actually 85 open issues and 20 open pull requests - where the oldest ist from 23rd july 2013. is this project still relevant or did you guys give up against bootstrap?
Add a preprocessor to enable reuse and customization
It seems clear that the project could benefit from using a CSS preprocessor in order to minimize redundant code and sync issues, and to give developers a clean way to customize and extend.
The big question is which to choose?
Short list of candidates:
Any others we should consider?
Revamp Pure Menu
This commit makes Pure Menu smaller, more responsive, and easier to customize. This change does break back-compatibility, as I have removed some classnames and some functionality.
What's in this PR
Y.Menu
. This helps to get rid of a lot of CSS which wasn't needed 80% of the time..pure-menu-open
: This also helps to get rid of adjoining class selectors, which makes it easier to customize menus..pure-menu-responsive
and.pure-menu-responsive-toggle
to make responsive horizontal menus: Yay!Responsive Horizontal Menu
This is something that I've been wanting for a while. You can now make responsive menus that can show and hide their links on small screens. Doing this is really easy, and the site will have JS snippets that you can copy/paste in to achieve the necessary behavior.
This is done by adding two new classnames,
.pure-menu-responsive
and.pure-menu-responsive-toggle
. Since you may not want every horizontal menu to be responsive, you have to add the.pure-menu-responsive
class name. Responsive menus also need an<a>
element with the.pure-menu-responsive-toggle
class name so that it can show/hide menu items on small screens.HTML
Here's the HTML for a responsive menu:
That'll give you something that looks like this on small screens:
Open State:
Dropdown Menu
Here's the HTML for a dropdown menu:
Here's what it looks like:
Customizing the menu
The menu now has various child classes that you can hook into. Here they are:
.pure-menu
: Hook into this to style the menu's bounding box..pure-menu-list
: All<ul>
tags within a menu should have this class..pure-menu-item
: All<li>
tags within a menu should have this class..pure-menu-link
: All<a>
tags within a menu should have this class..pure-menu-has-children
: A<li.pure-menu-item>
tag that has a nested menu should have this class..pure-menu-children
: A<ul.pure-menu-list>
tag that is a child of an <li.pure-menu-item> tag (nested menu) has this class..pure-menu-heading
: A<a>
tag that is outside the<ul.pure-menu-list>
and is the heading for the menu has this class..pure-menu-responsive-toggle
: A<a>
tag in a responsive menu that sits outside the<ul.pure-menu-list>
and is responsible for showing/hiding the toggle button has this class..pure-menu-is-active
: In a responsive menu, this class signifies when a menu is "open" (ie: showing its submenus).Menus were probably the hardest part of the library to customize. You would have to write a ton of messy CSS to do it. Not anymore! This is how you customize a menu now:
HTML
Here's the HTML for a responsive horizontal menu. I've added some classes with the
-custom
suffix to base my styles off of. I recommend doing the same when customizing any Pure component.CSS
Here's what the CSS would look like. Notice how I've added my own class to the menu above to make it easier to style. However, I don't have to use any descendent selectors anymore.
Looks like this:
Responsive Behavior and overriding Media Queries
To add the responsive behavior to menus, we obviously need to have a media query. I recommend doing the same thing that we did with Grids. Have
pure-menu-responsive.min.css
available on the CDN, with a sane media query default (I recommend48em
), but allow people to override this by not getting that file from the CDN, and instead adding the following CSS inside theirapp.css
:Responsive Behavior and JavaScript
You need to have some JS on the page to toggle the responsive menu. This would be something that users can copy/paste from the Pure site.
Example using YUI:
Tests
I've tested this on Latest Chrome/FF/Safari, and iOS 7. Haven't tested this on Android or IE yet, so I'll do that and report back here (help would be appreciated :smile: ). The manual test page has been updated with the new menu.
Next Steps
pure-hidden-* removed but not documented
Looks like the helper classes pure-hidden-phone, pure-hidden-tablet and pure-hidden-dekstop appear to be removed - which should be mentioned in the release notes ... I guess :) Or is it a bug in the RC1?
Pure Roadmap 2015
James Alley – Welcome to Pure!
Pure Roadmap 2015
During the latter part of 2014, Pure has cruised along. Pull requests have come in, people have filed issues, and in some cases we've taken the time to integrate the changes or comment. Meanwhile, we have focused on some exciting new efforts, quite separate from Pure, which will bear fruit in the coming year. But it's time to dive back into Pure, and to share with everyone our roadmap for Pure in 2015.
The Scope and Vision for Pure
We still intend to keep Pure small, focused, and useful to any web project. We intend to refine and maintain Pure, rather than radically expand its scope. Pointedly, Pure will not expand to become a library of drop-in UI components. Rather, it will remain a foundation with a "ridiculously tiny" footprint that developers use as a starting point for writing their own CSS.
There has been some discussion on whether Pure should expand to become a component library, replete with segmented controls, drop-downs, tab-views, etc. We perhaps contributed to this perception by including a paginator component. Why do so, if Pure is more about smoothing the foundation than creating components?
For inclusion in Pure, a construct must meet the following criteria:
In other words, we're looking for stuff that everyone needs and yet finds difficult to implement with the proper semantics, accessibility (including keyboard access), and browser support. In fact, for these reasons, in the upcoming 0.6 release, we're removing the Paginator component. Pagination is not common enough, many sites use infinite scrolling, and it's trivial to implement yourself using inlined button-styled anchors. But this can be a gray area. We don't scientifically evaluate the 80% rule; difficulty and triviality are obviously subjective. So we welcome suggestions and the discussions they will spark.
About Those Pull Requests...
Incidentally, we cannot merge some very good PRs due to a lack of a CLA (license) on file for the contributor. Please don't let this discourage you! To take care of the CLA, simply follow the link to sign electronically. (https://yahoocla.herokuapp.com)
The Road to 1.0
The community has battle-tested Pure and provided feedback. In addition to incorporating bug fixes into Pure, we wish to focus on five areas of refinement before we declare Pure ready for a 1.0 stamp, whereby we begin to guarantee backwards compatibility through all subsequent 1.x releases.
Of course, our backlog of issues and PRs may also surface important changes we'll want to incorporate into Pure as well. As the outline below illustrates, even without an ambitious expansion of Pure, plenty of tasks lay ahead 2015. Without further ado, then, here's our plan, organized into three-month quarters.
Q1. Pure 0.6
Q2. Servicing feature requests
Q3. Pure 1.0 Release, and Components
Q4. Post 1.0
Per semantic versioning, 1.0 will be our signal to the world that backwards compatibility will be assured in future 1.x versions. Should the need arise to break backwards compatibility with 1.0, we will increment to 2.x releases.
And that's it! We hope you have found Pure to be useful and unobtrusive, and that you look forward to Pure's continued improvement. To provide feedback, please comment on this GitHub issue, or file a new issue to have it tracked as a separate thread.
– James Alley and the Yahoo Presentation Technologies team
Revamp Pure Grids
This PR introduces is a pretty big change to how Grids work in Pure.
Features
pure-g
=>pure-grid
,pure-u
=>unit
, no need for.pure-g-r
)font-size: 0
hack.The rules
The rules for using the new grid is similar to the old one, with some minor differences:
pure-grid
(used to be either apure-g
or apure-g-r
)pure-grid
need to atleast have the classname ofunit
(Same as the oldpure-u
).default-*
which is the default width of an element,tablet-*
which is the width when viewed on 480px and higher, anddesktop-*
which is the width when viewed at 768px and higher. See below for more info on how these work.How it works
The new grid syntax is more simplified and less verbose. Here's how you define the simplest grid. The grid below is a non-responsive grid with two 50% units.
Responsive Behavior
One of the problems with the current grid system is that it's not really smart when it comes to responsive design. On phones, everything just collapses to 100% width, or stays the same as the desktop version. This new grid helps with that. Suppose you want something that is 25% on desktops, 50% on tablets, and 100% on phones:
The cool thing here is that you don't have to specify all 3 classnames. You only have to specify a classname when you want something to change. Suppose you have an element that you want to be 50% on phones and tablets, and only 20% on desktops:
Unlike the old grids, you don't need a
pure-g
for non-responsive elements and apure-g-r
for responsive ones. Just use apure-grid
for everything.Offsets
I also took this time to introduce offsets to grids. You can add offsets through the
offset-*
classname:Tested
This has been tested on IE7+, Latest Chrome, Safari, FF, iOS6, Android 4.0.x. The new grids has separate
*widths
and*margin-left
defined so that it works on old IEs. I had to fool around with a lot of values to get to ones that worked well.pull right for horizontal menus
Creating a flexible space using inline-blocks seems impossible and the justify trick seems not to work.
I played around with the following code but it increases slightly the height of my fixed horizontal menu bar:
Is there a way to add a pull-right for the menus, I think it could be a useful addition to the standard base?
Roadmap
Description
This is a catch all ticket for potential infrastructure changes to improve Pure.
Items
Add responsive grid classnames for new grid system
This pull request is primarily for discussion purposes around the new responsive units. The entire pull request for the new grid system that I'm proposing is here: https://github.com/yui/pure/pull/146
YUI is going away - what does this mean for Pure?
Given the announcement that development of YUI is ending, I was wondering what this means for Pure.
Is this a good thing, meaning that focus will be spent on Pure? Or is this bad, meaning that Pure is also going away?
chore(deps): bump json5
Bumps json5 and json5. These dependencies needed to be updated together. Updates
json5
from 2.2.1 to 2.2.3Release notes
Sourced from json5's releases.
Changelog
Sourced from json5's changelog.
Commits
c3a7524
2.2.394fd06d
docs: update CHANGELOG for v2.2.33b8cebf
docs(security): use GitHub security advisoriesf0fd9e1
docs: publish a security policy6a91a05
docs(template): bug -> bug report14f8cb1
2.2.210cc7ca
docs: update CHANGELOG for v2.2.27774c10
fix: add proto to objects and arraysedde30a
Readme: slight tweak to intro97286f8
Improve example in readmeUpdates
json5
from 2.2.0 to 2.2.3Release notes
Sourced from json5's releases.
Changelog
Sourced from json5's changelog.
Commits
c3a7524
2.2.394fd06d
docs: update CHANGELOG for v2.2.33b8cebf
docs(security): use GitHub security advisoriesf0fd9e1
docs: publish a security policy6a91a05
docs(template): bug -> bug report14f8cb1
2.2.210cc7ca
docs: update CHANGELOG for v2.2.27774c10
fix: add proto to objects and arraysedde30a
Readme: slight tweak to intro97286f8
Improve example in readmeDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself) You can disable automated security fix PRs for this repo from the Security Alerts page.chore(deps): bump json5 from 2.2.1 to 2.2.3 in /site
Bumps json5 from 2.2.1 to 2.2.3.
Release notes
Sourced from json5's releases.
Changelog
Sourced from json5's changelog.
Commits
c3a7524
2.2.394fd06d
docs: update CHANGELOG for v2.2.33b8cebf
docs(security): use GitHub security advisoriesf0fd9e1
docs: publish a security policy6a91a05
docs(template): bug -> bug report14f8cb1
2.2.210cc7ca
docs: update CHANGELOG for v2.2.27774c10
fix: add proto to objects and arraysedde30a
Readme: slight tweak to intro97286f8
Improve example in readmeDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself) You can disable automated security fix PRs for this repo from the Security Alerts page.chore(deps): bump qs from 6.9.3 to 6.11.0
Bumps qs from 6.9.3 to 6.11.0.
Changelog
Sourced from qs's changelog.
... (truncated)
Commits
56763c1
v6.11.0ddd3e29
[readme] fix version badgec313472
[New] [Fix]stringify
: revert 0e903c0; addcommaRoundTrip
option95bc018
v6.10.50e903c0
[Fix]stringify
: witharrayFormat: comma
, properly include an explicit `[...ba9703c
v6.10.44e44019
[Fix]stringify
: witharrayFormat: comma
, include an explicit[]
on a s...113b990
[Dev Deps] updateobject-inspect
c77f38f
[Dev Deps] updateeslint
,@ljharb/eslint-config
,aud
,has-symbol
,tape
2cf45b2
[meta] usenpmignore
to autogenerate an npmignore fileDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself) You can disable automated security fix PRs for this repo from the Security Alerts page.Documentation improvement
Is your feature request related to a problem? Please describe. No problem here, just missing info from documentation.
The docs give CDN links to the base and grid css, but I can't find the forms one, and the releases also don't include the built files, so if I want to download the minified files I have to find the CDN link and download from there.
Describe the solution you'd like I suggest putting all available CDN links in one place, so it's easier for people that just want to include and start using them. Also include the minified files in the releases in case someone wants to download and serve the files them selves.
Describe alternatives you've considered N/A
Additional context N/A
Way to fit column to content?
Bulma has
is-narrow
CSS class to fit a column to its content, and then the other columns autosize.It would be great if Pure could have this too. Because Bulma breaks too many other things sadly.