Pure 0.6.2 - New Buttons Group & Bug Fixes

@redonkulus redonkulus released this Jan 6, 2017 · 3 commits to master since this release

  • Added proper module API for node users [#619]

Buttons

  • Added Button Groups to Pure [#621]

Menus

  • Reset style for horizontal dropdown separator [#620]

Downloads

Pure 0.6.1 - PostCSS & Misc Fixes

@redonkulus redonkulus released this Dec 12, 2016 · 13 commits to master since this release

  • Migrate to PostCSS for browser prefixes [#617]
  • Remove duplicate Firefox inner focus border [#457]
  • Fix grid inside table in IE 10/11 [#504]
  • Fix CSSLint issues [#609]
  • Upgraded grunt dependencies to 1.x [#609]

Downloads

Pure 0.6.0 – New Pure Menus

@jamesalley jamesalley released this Feb 23, 2015 · 54 commits to master since this release

Nothing of substance has changed between the release of 0.6.0-rc-1 and this release, 0.6.0 proper. Most of the changes made in response to the release candidate were small edits to the Pure website, not changes to the Pure CSS library itself. Feedback has been very positive.

Downloads

Pure 0.6.0-rc-1 – New Pure Menus

@jamesalley jamesalley released this Feb 6, 2015 · 55 commits to master since this release

Synopsis

This release incorporates numerous small bug fixes and PRs. Its big new feature is a rewrite of Menus. Menus are now less opinionated and easier to customize. We hope this makes the Menu construct more practical.

A caution regarding "upgrading"

This 0.x release of Pure is not guaranteed to be 100% backwards compatible with previous releases; Menus in particular have changed a great deal. So while it's great to start a new project with Pure 0.6.0, you should be cautious about upgrading Pure on a site that's already finely tuned and quality-checked.

Testing

You can consume this Release Candidate (v0.6.0-rc-1) the same way you usually consume Pure, whether you pull it off the CDN or install it via NPM or Bower. Just reference the new version in your urls with this rc version. For example:

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">

If you're interested in playing with the code, the pure-site repo has instructions for running the site locally in conjunction with a local copy of Pure. Or, you can visit the staging server to view the (revised website) [http://stage.purecss.io] working in concert with the new release.

About the Pure website

Pure has an accompanying website. While not bundled with Pure itself (it's in a separate repo), it is an important source of documentation and examples. You'll want to refer to it when checking out the new version of Pure, but since this is a pre-release, we're only publishing the website changes to our staging server, http://stage.purecss.io. There will be a slight delay between the time the Pure release hits GitHub and when the updating staging server goes live. Check the version number for Pure on the pure-site to be sure you're seeing the right version.

Changes to look out for

Base

Pure now uses Normalize 3.0.2. Note that support for IE7 and below has been dropped.

Grids

Grids have not changed.

Buttons

Buttons have not changed much, but watch out for sizing issues. .pure-button now uses box-sizing: border-box so that whether you use an anchor tag or a button tag, they render consistently.

Forms

Forms has no major changes to the classes or markup structure, but does have some changes that could affect forms built using Pure 0.5.0. You'll need to do a little QA to be sure everything's OK, as some padding and alignment properties have been tweaked.

Menus

There's an all-new Menu construct. The markup is different, the classnames are different, and a new example script to enable drop-downs will be included on the Pure website. There are also new examples illustrating how to achieve some common menu design patterns.

The pure-paginator construct has been removed from Menus, as it's trivial to create your own construct using inlined pure-button links.

Ye Olde IE

With the move to Normalize 3.0.x, we're dropping support for IE7 and below. Most of the IE6/7 specific rules have been removed from Pure. (There were not very many.)

IE8 is still supported.

Downloads

Pure 0.5.0 - Get Started with Grids

@tilomitra tilomitra released this May 27, 2014 · 135 commits to master since this release

We've collected some useful feedback from the Pure 0.5.0 Release Candidate and are pleased to be shipping Pure 0.5.0 today.

You can get it off the CDN with the following <link> tag:

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">

Be sure to try out our brand new Get Started Page.

What's Changed

If you had a chance to test out the Pure 0.5.0 Release Candidate, then you already know what to expect in this release! If you didn't get a chance to check that out, then read on!

Mobile-first Grid System

The primary focus of this release was to improve Pure Grids. Pure's grid system is now mobile-first, and lets you declaratively create highly responsive layouts. This is best demonstrated with an example.

You can create a layout that takes up a single column on small screens, 2 columns on med-sized screens, and 4 columns on large screens:

<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">...</div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">...</div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">...</div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">...</div>

Since these mobile-first grids prescribe certain CSS Media Queries, they aren't part of Pure's core. Instead, they can be pulled in by adding the following <link> tag on your page:

<!--[if lte IE 8]>
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-min.css">
<!--<![endif]-->

If you want to customize the mobile-first grid by adding your own Media Query breakpoints or class names, you can take a look at our brand new Get Started Page. It lets you customize and generate a set of Grids that is perfectly suited for your next project, all in the browser. More on that below!

The Grids documentation has more information about the new grid system. It received a lot of love prior to this release as well.

Removing .pure-g-r

With the addition of the new grid class names, .pure-g-r and its associated CSS Media Queries were no longer needed, so we removed it from the library. If you were using .pure-g-r, it's easy to migrate to the new grid system:

Before

<div class="pure-g-r">
  <div class="pure-u-1-2">...</div>
  <div class="pure-u-1-2">...</div>
</div>

Now

<div class="pure-g">
  <div class="pure-u-1 pure-u-md-1-2">...</div>
  <div class="pure-u-1 pure-u-md-1-2">...</div>
</div>

Fluid Images

Images that are used with a responsive grid system need to scale with the grid. Just add the new .pure-img class to your <img> elements to make them scale proportionally.

Site Updates

Our site also received a lot of love for this release, specifically the new Get Started Page.

Get Started Faster

Whether you're trying Pure for the first time, or you've used it before, we hope that the Get Started page will help you get started with your next web project quicker. The new Get Started page lets you:

  • Understand the basics of Pure Grids, which is a key building block for building responsive layouts.
  • Customize Pure Grids to fit your web project, by modifying Media Queries, columns and class names.
  • Make sure your responsive design works well in older browsers that don't support CSS Media Queries.
  • Download an HTML and CSS Starter Kit to get started faster.
  • Save your work and come back to it later, since all the changes that you make are reflected in the URL. It's also back-button friendly.

Share and Save

Here's an example of a 12-column responsive Pure Grid with custom classnames (.col-* instead of .pure-u-*) that we made, to show you how easy it is to customize and share Pure Grids.

The Get Started page works great on all modern browsers, including mobile browsers! We hope you like it, along with the rest of this Pure release. If you run into any issues, please file an issue on GitHub.


View 0.5.0 Changelog

Downloads

Pure 0.5.0-rc-1 - A Mobile-First Responsive Grid

@tilomitra tilomitra released this Mar 7, 2014 · 139 commits to master since this release

Today, we're releasing Pure 0.5.0-rc-1, our first release candidate leading up to the Pure 0.5.0 release. Pure 0.5.0 brings a mobile-first responsive grid system to the library, and we're very excited to share it with you.

You can get it off the CDN with the following <link> tag:

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0-rc-1/pure-min.css">

We encourage everyone to try out this release candidate, and to file any issues that they encounter, so we can fix them before releasing Pure 0.5.0.

Mobile-first Grid System

The primary focus of this release is to improve Pure Grids. Pure's grid system is now mobile-first, and lets you declaratively create highly responsive layouts. This is best demonstrated with an example.

You can create a layout that takes up a single column on small screens, 2 columns on med-sized screens, and 4 columns on large screens:

<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">...</div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">...</div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">...</div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">...</div>

Since these mobile-first grids prescribe certain media queries, they aren't part of Pure's core. Instead, they can be pulled in by adding the following <link> tag on your page:

<!--[if lte IE 8]>
    <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]-->

If you want to customize the mobile-first grid by adding your own media query breakpoints or class names, you can take a look at our brand new Get Started Page. Take a look at the Grids documentation for more information about the new grid system.

Removing .pure-g-r

With the addition of the new grid class names, .pure-g-r and its associated media query were no longer needed, so we removed it from the library. If you were using .pure-g-r, it's easy to migrate to the new grid system:

Before

<div class="pure-g-r">
  <div class="pure-u-1-2">...</div>
  <div class="pure-u-1-2">...</div>
</div>

Now

<div class="pure-g">
  <div class="pure-u-1 pure-u-md-1-2">...</div>
  <div class="pure-u-1 pure-u-md-1-2">...</div>
</div>

Fluid Images

Images that are used with a responsive grid system need to scale with the grid. Just add the new .pure-img class to your <img> elements to make them scale proportionally.

Site Updates

Our site also received a lot of love for this release, specifically the new Get Started Page.

It's the easiest way to get started with Pure. You can customize a grid for your next project and download a .zip file that contains all the HTML and CSS assets that you need. Check it out and let us know what you think!

Thanks for trying out the release candidate. If all goes well, we should have Pure 0.5.0 up very shortly!


View 0.5.0-rc-1 Changelog

Downloads

Pure 0.4.2 — Bug Fixes

@ericf ericf released this Feb 14, 2014 · 171 commits to master since this release

This is a patch release to fix some minor bugs that were reported and fixed by contributors.

As we move forward making it easier for developers to build on Pure we're trying to provide the minimal set of CSS declarations needed to provide a solid base foundation. The goal with Pure is to solve the common and hard CSS problems that most web projects face.

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.4.2/pure-min.css">

Bower Package Improvements

@stevenvachon added main to Pure's bower.json file to allow easier integration with build processes and tooling. (#286)

Forms Improvements

We've removed some of the font-size declarations in Forms to allow the defaults to apply and make it easier for developers to customize. This may affect your app, and you can easily handle this by setting the font-size you want for form <input>s.

@jpetto and @kwando contributed some fixes for some minor bugs in Forms. The changes improve the extensibility of the Forms' styles, making it easier for developers to customize. (#265, #283, #295)


View 0.4.2 Changelog

Downloads

Pure 0.4.1 — It's the little things

@tilomitra tilomitra released this Feb 6, 2014 · 189 commits to master since this release

Note: We released Pure 0.4.0, but the CSS selector order was corrupted. We encourage everyone to upgrade directly to Pure 0.4.1.


Today, we're excited to ship Pure 0.4.1. This release consists of enhancements and bug fixes that makes it easier to work with the library. We've also done a good deal of work on Pure's website to prepare for an upcoming enhancement to Pure's grid system.

You can grab this release of our CDN:

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.4.1/pure-min.css">

What's changed?

We've made enhancements to most of the Pure components for this release.

  • You can now use non-reduced fraction class names when laying out a grid. This means that we have rules for classes such as .pure-u-12-24 as well as .pure-u-1-2.
  • You can now add a hidden attribute to your element to hide it.
  • Buttons now have visually uniform default padding on all four sides, so they look a little nicer.
  • <input> buttons now have the same height as non-input buttons.
  • <textareas> within .pure-form-aligned look better, thanks to a vertical alignment fix.

You can check out the HISTORY.md for a full list of changes.

A special shout-out to everyone who contributed to this release: @achalv, @albertosantini, @andrewwakeling, @AurelioDeRosa, @dougdavies, @ItsAsbreuk, @mike-engel, @narcis-radu, @stevenvachon, and @rictorres.

Tooling and Pure's website

Over the last few months, we've been working on tools to solve some common CSS pain points:

  • Writing mobile-first responsive CSS, while supporting old IE browsers
  • Dealing with media queries
  • Prefixing and manipulating class names to suit your coding convention
  • Customizing Pure

While we haven't officially launched these tools yet, we've been using some of them in Pure's source code as well as its website.

For instance, this release of Pure removes grid-units.css and replaces it with a Grunt task that generates grid units on-the-fly. This is done through the rework-pure-grids plugin. We've also been using it on Pure's website, which now uses a mobile-first responsive grid system.

To celebrate this mobile-first relaunch of the website, we went through and gave all the layouts a face-lift. Make sure to check them out!

layouts

We're really embracing tooling in order to keep Pure's code-base small while offering developers ways to customize the library. We're really excited to show everyone what we've been working on, and you can expect to hear more about it soon!


View 0.4.1 Changelog

Downloads

Pure 0.3.0 — A Flexbox-based Grid

@tilomitra tilomitra released this Sep 9, 2013 · 254 commits to master since this release

Say hello to Pure 0.3.0, the latest and greatest version of Pure!

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.3.0/pure-min.css">

Improved Grids Support

The focus of this release was to improve 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. We've been working with the developers in Pure's community to address issues with Grids — notably:

  • In old IE, grid units sometimes flowed to a new line. (#154)
  • For people who have customized their browser fonts, or developers using custom fonts with Pure Grids, grid units sometimes flowed to a new line (#41)

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. More on this below.

Using Grids with Non-Default Fonts

A lot of folks have run into an issue with grids and custom fonts not working well together. We gave this issue a lot of thought, and while it was important to fix it, we didn't want a fix that makes Pure Grids harder to use for people who aren't using custom fonts.

Pure 0.3.0 contains a breaking API change to the way that grids work. If you are using any non-default font in your project (anything apart from sans-serif), you will need to modify your project's CSS and add the following in:

body,
.pure-g [class *= "pure-u"],
.pure-g-r [class *= "pure-u"] {
    /* Set you're content font stack here, for example: */
    font-family: Georgia, Times, "Times New Roman", serif;
}

We recommend you add the .pure-g [class *= "pure-u"] and .pure-g-r [class *= "pure-u"] selectors to wherever you've defined your custom content or body font stack.

The benefit of making this change is that Pure grids should now work everywhere. Apart from our usual supported environments, the community helped us by literally testing this on multiple browsers on Ubuntu, Arch Linux, and Chrome OS. We want to make sure that Grids doesn't break your web project's UI, regardless of what OS/browser people are using.

We have more information regarding using fonts with Pure Grids directly on the Pure website, so head on over and give it a quick read.

Other Changes

  • 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.
  • Removed forms-core.css. This was a copy of Normalize.css' form related styles. Now that Pure requires the Base module (which is Normalize.css) to be on the page, the Forms Core submodule is no longer needed.
  • We added back :focus styles to [readonly] input elements.
  • Added a height: auto rule to images within a .pure-g-r so that their aspect ratios are maintained when the page is resized.

View 0.3.0 Changelog

As always, if you have questions about this release, ask us on the Pure Blog. Keep submitting bugs and pull requests so we can build and improve Pure together!

Downloads