.pure-img
class name for make images scale with the viewport in
fluid layouts.[!] Removed .pure-g-r
from core, in favor of a mobile-first responsive
grid system. (#24, #267)
To use the mobile-first grid system, you need to pull in pure.css
, along
with grids-responsive.css
. We also have grids-responsive-old-ie.css
that
you can serve to IE < 9 users so that they can view a desktop-version of your
website:
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0-rc-1/pure-min.css">
<!--[if lt IE 9]>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0-rc-1/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0-rc-1/grids-responsive-min.css">
<!--<![endif]-->
Find out more about the new grid system at http://purecss.io/grids/.
px
to em
units, and also increased
the amount of padding to padding: 0.5em 1em
.main
to Pure's bower.json
file to allow easier integration with
build processes and tooling. (#286 @stevenvachon)Improved how <input type="color">
elements look in Chrome by fixing
paddings. (#283 @jpetto)
Removed font-size
rules from <input>
, <legend>
, and <fieldset>
elements within .pure-form
. Font sizes are now inherited from the
application's CSS file. (#265)
Invalid <input>
elements within a Pure Form no longer explicitly set a
border-width
. (#295 @kwando)
Elements that have Pure classnames which set a display
declaration and use
the hidden
HTML attribute will now properly be hidden. With these changes,
the following button will be hidden from view:
<button class="pure-button" hidden>No showy</button>
A new rule for the [hidden]
selector has been added with the declaration:
display: none !important;
. This is a time where it's appropriate for a
project like Pure to use !important
. (#177)
Removed all the occurrences of -ms-linear-gradient()
from Buttons since it
has never been in the final version of IE 10. (#200: @AurelioDeRosa)
<input>
Buttons now have the same height as non-input buttons.
font-family: inherit;
has been added to the .pure-button
selector to
normalize the difference in height. (#221 @narcis-radu)
Buttons now have visually uniform default padding
on all four sides. The
left/right padding is 2x the top/bottom padding. (#191 @achalv)
Added vertical-align: top;
to <textarea>
s within .pure-form-aligned
Forms to fix an alignment issue where its label was aligned to the middle.
(#174 @rictorres, @ItsAsbreuk)
Added styling for <input>
elements that don't have a type
attribute.
(#261 @dougdavies)
Added all non-reduced fractions to Grids default 5ths- and 24ths-based units.
There are now styles specified for .pure-u-1-24
– .pure-u-24-24
. All 5ths-
based units and reduced factions still remain; e.g., both .pure-u-12-24
and
.pure-u-1-2
exist. (#144 @mike-engel)
Removed grids-units.css
from src/
, this file is now generated via a Grunt
task. The units generation is done via the new
rework-pure-grids
Rework plugin, and it can be used
to create any custom nth-based units for Pure's Grids system.
0.4.1
.[!] Pure now requires the Base module (which is Normalize.css) to be on
the page. Pure has essentially always required the styles provided by
Normalize.css via the Base module, and this now makes it a firm requirement.
The pure-min.css
and pure-nr-min.css
rollup files already include the Base
module.
Note: When using a custom subset of Pure, be sure to include the Base module.
Added non-minified rollup files: pure.css
and pure-nr.css
. These files are
created in addition to the minified rollups: pure-min.css
and
pure-nr-min.css
. The minified rollups should be used in production.
(#171 @omeid)
src/
. Bower is now used to
programmatically import Normalize.css into bower_components/
if it's not
already installed. Normalize.css is still bundled with Pure, this change is a
development-time change only. (#160)-webkit-font-smoothing: antialiased
rule from Buttons. Pure should
not dictate sub-pixel font rendering, that should be left to the person's
browser settings and/or the developer. (#170 @dchest)[!] Removed forms-core.css
. This was a copy of Normalize.css' form
related styles. Now that Pure requires the Base module (Normalize.css) to be
on the page, the Forms Core submodule is no longer needed. (#160)
Added :focus
styles to [readonly]
<input>
elements. (#143)
Removed -webkit-font-smoothing: antialiased
rule from Forms input styles.
Pure should not dictate sub-pixel font rendering, that should be left to the
person's browser settings and/or the developer. (#185 @dchest)
[!] Improved support for Grids across OS/browser combinations, and its ability to withstand the use of non-default fonts when set by either the person in their browser settings or by the developer using custom fonts.
Grids now uses CSS3 Flexbox when possible to avoid the side-effects of setting
a negative letter-spacing
— the fallback for older browsers. Grids also now
uses a specific font stack on .pure-g
and .pure-g-r
classes to ensure the
greatest OS/browser compatibility when non-default fonts are being used. By
default grid units will now have font-family: sans-serif;
applied — this is
the default font stack Pure's Base module (Normalize.css) applies to the
<body>
.
This is a breaking change if you are using any non-default fonts in your
web project. Fortunately, it's quite easy to make sure your custom font stacks
apply to content within Pure Girds. Instead of applying your custom font to
only the <body>
element, apply it to the grid units as well:
body,
.pure-g [class *= "pure-u"],
.pure-g-r [class *= "pure-u"] {
/* Set you're content font stack here: */
font-family: Georgia, Times, "Times New Roman", serif;
}
Refer to the Grids Documentation for more details on using non-default fonts with Pure Grids. (#41, #162, #166, #189: @adapterik @dannyfritz, @pandeiro)
Fixed grid units from falling to a new line on IE 6 and IE 7. Grid units now
have a separate *width
value for these older versions of IE. This value is
0.005%
less than the standard width
value. This fix does not affect modern
browsers because it uses the star hack. (#154)
Added a height: auto
rule to images within a .pure-g-r
so that their
aspect ratios are maintained when the page is resized. (#172: @dchest)
[!] Made [readonly]
<input>
s look visually different to [disabled]
and regular <input>
s. (#102: @jaseg)
Fixed copy/paste bug that mapped text inputs to .pure-form
instead of
.pure-group
. The .pure-form-group input
styles are now applied to all
text-ish <input>
elements. (#96)
Fixed .pure-input-rounded
styles to now apply correctly. The change to use
more specific selectors for text-ish inputs in v0.2.0 caused the
.pure-input-rounded
selector to not apply because it was less specific. This
selector now has right specificity. (#109: @AurelioDeRosa)
Added display: block
to <textarea>
s in .pure-form-stacked
<form>
s to
fix an alignment issue for subsequent elements. (#90: @AurelioDeRosa)
Removed the gray color
from .pure-form label
. This allows <label>
s to
inherit their foreground color. (#89: @AurelioDeRosa)
[!] Changed .pure-u-1
grid unit to now use width: 100%
instead of
display: block
to achieve taking up the full width of its container. This
makes it easier to override and align since it's using display: inline-block
like the other grid units. (#94)
Fixed width
value typo in .pure-u-1-6
, changed it from 16.656%
to
16.666%
. (#115: @chilts)
white-space: nowrap
from .pure-table thead
. This fixes issues
where tables inside of grids would break the grid. (#95: @AurelioDeRosa)[!] Fixed accessibility mistake by removing a:focus {outline: none;}
rule from buttons-core.css
.
[!] Improved :focus
styles by applying the same rules that are used by
:hover
styles. When overriding Pure's :hover
styles, be sure to include
:focus
selectors as well.
Added improvements to developer workflow:
Added basic Tests using CSSLint via grunt test
(#25)
Integrated Travis CI which runs grunt test
on pushes to master
and for
pull requests.
Added grunt watch
task which runs tests and build.
Added support to pure-site
for serving pure
locally during
development. (#46, yahoo/pure-site#111)
Removed vendor prefixes for box-shadow
, text-shadow
, border-radius
. All
modern browsers support the non-prefixed versions of these properties.
(#23)
[!] Replaced .pure-help-inline
with .pure-form-message-inline
. We
still support the older classname but it is deprecated and will be going away
in a future release. (#32: @dannytatom)
Added a new class called .pure-form-message
. It works the same way as
.pure-form-message-inline
but is meant for block elements.
(#32: @dannytatom)
Added focus styles for file, radio, and checkbox <input>
s to improve
accessibility. (#42: @codepb)
<textarea>
s now have the same styling as <input>
s. (#49: @rcbdev)
.pure-form input
rules are now more specific by targetting only "texty"
<inputs>
. This prevents these styles from affecting "buttony" <input>
s.
(#54)
^=
("starts with")
selector, which meant that if another classname preceded the unit classname,
then the rule would not apply. (#44)Added .pure-menu-separator
classname that can be used to visually
separate horizontal menu items. (#53: @codepb, @mseri)
Focused menus have an outline: none
by default. Instead, menu-items that
have been opened to display children (in a drop-down menu) get a slight
background (#dedede
) for accessibility. (#22)
[!] Initial public release.
Upgraded Normalize.css to 1.1.2.
Integrated Bower into grunt import
process.
Cleaned up manual test files, removing unnecessary CSS files and cruft.
border-radius: 2px
to enhance the appearance the they are click-able.Removed border-radius
from vertical menus.
Replaced blue hover for menus with light grey (#eee
)
Removed font-weight: bold
from selected menu items.
[!] Renamed to Pure.
[!] Renamed CSS classname prefix to pure
.
Preview release (2).