pure-css / pure Goto Github PK

I just wanted to share a few CSS extras that I found work well together with the pure grids module to make layout easier, I hope someone else finds them helpful!:


Set box-sizing to border-box:

* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

This makes layout easier by using old IE's box-sizing
method of including padding in the width of an element,
so setting width: 100%; won't make an element overflow.


Set width: 100%; on .pure-u-1 elements:

.pure-u-1 { width: 100% }

By default Pure just sets display: block; on .pure-u-1 elements -nothing more.
Setting display:block; on an <input> element will not make it take up 100% of its width. width: 100%; fixes this safely, because we have our box-sizing set to border-box.


Super simple gutters minus the wrapper <div>:

.gutter { padding-right: 1em }

Use it by adding the gutter class to any .pure-u-# element.
This too can be done safely because we have set box-sizing: border-box.

On http://purecss.io/grids/ you made the example 'See it in action below!'.
There is an imageexample (centered) with src='http://vanity-press.com/wp-content/uploads/2011/09/New-York.jpg'

The only thing is: this image a an 1x1px image, so we don't see anything.

Regards,
Marco

hi guys sorry for my english... i have a little problem , i'm writing a little avatar creator with ruby/shoes
My problem is: when i change the haircut by a list_box , the images ( .png) being overlap how can i solve this problem?

http://purecss.io/buttons/

None of the a class=pure-button buttons are focusable (keyboard accessible) because the href attribute is left out, screen readers skip right over these elements, add href=# to make them focusable.

The disabled button is visually disabled looking but not actually disabled, apply the disabled attribute to make them disabled for screen readers.

Of the colored buttons, only the red one has sufficient contrast to meet WCAG 2.0 AA.

The heavy use of gray on gray text throughout the framework also fails contrast.

There are two JavaScript errors being thrown on Menu's test page.

Why are we including "notice" class in the buttons on the Forms part of the site when it's not in button.css?

Sign in

Pure is awesome but incorporating CSS charts would be more awesome so people can quickly build javascript free websites that rely heavily on charts.

We should look at moving to box-sizing: border-box by default for all containers.

Hi,

Clicking on a dropdown menu item creates an outline on the latest Chrome stable.

http://purecss.io/menus/

I believe just adding a outline: none on the ul should fix this.

Great work guys.

I realize this has nothing to do with the code itself, but it would be great if yahoo offered this library behind SSL in addition to plaintext. I see that in the past you have not supported SSL.

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

Is supporting SSL in the cards?

when debug in Firefox,something wrong in grid model.
the Firefox's userAgent is is "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:21.0) Gecko/20100101 Firefox/21.0"

for example:

.pure-u-1-3 {
    width: 33.3333%;
}

shold be change like this:

.pure-u-1-3 {
    width: 33.33%;
}

Otherwise it will show to the next line.

Label element cannot be replaced by placeholder attribute.

I've done this: yui/yui3#798 (comment)
Yet, I do not know how to open/use handlebar files. Do I transfer them to HTML?

I think the rendering of

<input class="pure-button pure-button-primary" type="submit" value="..." />

should be the same as

<button class="pure-button pure-button-primary">...</button>

I didn't see an official statement about browser support. Which browsers do you consider fully supported by this library/framework?

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:

• Sass (http://sass-lang.com/)
• LESS (http://lesscss.org/)
• Rework/Styli (https://github.com/visionmedia/rework)

Any others we should consider?

hi thanx for nice worked.
can you added RTL support to this css framework?

I just played around with the examples and noticed in this one the following behaviour in chrome: if I click on "Other" instead of just hovering, the whole ul.pure-menu-children is outlined. This is the computed style, copied from Chrome`s Developer tools:

outline-color: rgb(60, 59, 55);
outline-style: auto;
outline-width: 5px;

I'm using Chrome 26 under Linux 3.9.2.

The following fix worked for me at this point:

.pure-menu-open > ul {
  left: 0;
  top: 0;
  visibility: visible;
  outline: 0;
}

Menus don't need the dotted border because they already have a hover state.

Refer to https://github.com/yui/pure-site/issues/42 for details.

Would there be a possibility of adding a simple progress bar like bootstrap has ?

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

.pure-g, .pure-g-r {
    font-family: Arial;
}

in my own css file loaded after pure, and also either resetting the font for all the pure-u-x-x

.pure-u-1, .pure-u-1-2, ...
    font-family: sans-serif;
}

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.

References Trac #2533191.

The extras section is a little half-baked right now. We want the following features:

• List a curated collection of gallery modules that leverage YUI CSS in some shape or form.
• Pull in the module info through Github on process start

The current status of this ticket can be found here:
pure-css/pure-site#14

We should add at least some very basic tests to Pure. At a bare minimum we can use CSSLint and we might want to hook it up via the Grunt plugin.

@tilomitra I noticed that buttons does not have a README.md or HISTORY.md files. I also noticed that the other modules which do have those files don't have much or any content beyond a header. Can you come up with a consistent pattern for module metadata?

If we don't actually need these files, then I'm all for removing them. The src/base/README.md seems the most useful right now.

Currently, textarea doesn't look very nice near rounded input with smooth shadows.

Make grids collapse by default, and add in specific widths inside media queries for desktop browsers.

Currently, the responsive units are targeted using the ^= ("starts with") selector, which means that if another class precedes the unit class, then the rule will not apply.

One potential solution is to use the *= substring match. I've submitted #43 that applies this solution.

The two grid-gutter solutions from
http://purecss.io/grids/ ->Applying padding and borders to Grid units
is visually incorrect to me.
The content in the first pure-u-1-3 should be visually start aligned to the paragraphs content above or below. Same with the last pure-u-1-3. look at the red areas in the image to understand what I mean :-)

Of cause I can adjust the ".pure-g > div" left and right paddings for the first, last and in betweens, but it is very tricky to still have them 1/3 content width.

I hope that purecss can solves this for me and not asking to override the paddings and width styles for an visually and mathematically correct appearance.

thank you for purecss
daniel

We don't need to prefix these anymore. All modern browsers support it. The only ones that don't are Android 2.3, but it's ok if they don't get rounded corners.

Screenreaders won't (yet) read the input placeholder attributes. For accessibility it's better to include a tag.

Due to a quirk in the way label works, you may be able to get away with display: none (which would normally also hide the element from the screenreader)

http://juicystudio.com/article/screen-readers-display-none.php

http://www.w3.org/TR/html5/forms.html#attr-input-placeholder
The placeholder attribute should not be used as an alternative to a label. For a longer hint or other advisory text, the title attribute is more appropriate.

It would be nice to have a centralized place for users to submit their created skins, and have them viewed/shared with other users.

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:

.pure-menu-custom-pull-right {
  text-align: justify;
}

.pure-menu-custom-pull-right:after {
  content: '';
  display: inline-block;
  width: 100%;
  height: 0;
  font-size:0;
  line-height:0;
  margin: 0;
  padding: 0;
}

Is there a way to add a pull-right for the menus, I think it could be a useful addition to the standard base?

The US state select on line 320 of http://purecss.io/forms/ uses the pure-input-medium class, which doesn't exist in the CSS (used web dev toolbar as well as manually combed through source files). Just thought I'd give you all the heads up :)

<select id="multi-state" class="pure-input-medium">

👍 on this project. SUPER useful!

verdana and trebuchet affected at least.

please see http://jsfiddle.net/N3sCg/

We need basic info in this project's README.md.

We should move to box-sizing: border-box across the board.

The new buttons are flat (gradient-less) and square cornered. Have we gone too far in the pursuit of "flatness"? Do we need some affordance that these are buttons, before the user interacts with them? Round corners (small border-radius) on buttons seems like a helpful clue that they are buttons (clickable) and not colored banners, tags, or pills.

It would be nice to have a support for the new semantic and structural elements of HTML5 (in my mind I mainly have nav, header, article, aside, footer)

I'm working on implementing the responsive menu into wordpress. So far it's working great except when I go to test it on iOS. I'm using the iOS simulator because I'm building locally using MAMP. For some reason the hover states don't work on the dropdown menus. I go to open the menu's dropdown and the click doesn't recognize the hover state and goes straight to the top nav link. I'm using the basic horizontal-nav code. Will this be an issue on actual iOS, or is this just an issue with the iOS simulator? I know some things don't work properly on iOS simulator that work fine in live production. Just curious if this is one of those.

Great great great project!
This might be a great alternative to Bootstrap, I think I'm gonna try it for my next project!

Some ideas/remarks/issues :

• You should add a striped/active state for the button. It's very useful when the user submit the form and it's send through ajax, having the button animated (striped moving) is a great way to indicate the user that the actions is performing.
• UX prefers that the user clicks on the menu to show submenu (dropdowns) instead of hover. I know this requires a bit of Js (maybe not?) but I can guarantee you that most of the users will click on the menu to see the submenu (I did it ;))
• You should add a part about which icon you are using (either a menu in the left of the documentation or in a page), maybe also listing which icon you are using (I saw the spining wheel, great, what other animated icon are you using?)

This is awesome! Thanks a lot :)

In addition to bower please publish as component package.

Pure should have explicitly defined browser support so people know what to expect it will work on when using it.

Also, I think it things like when vendor prefixes should be used need to be defined. e.g. Do we need to use vendor prefixes on rules which modern browsers (that auto update) now support without prefixes, because people may be using older versions that need the prefix?

All form inputs, including checkboxes and radios need to have focus styles.

In http://purecss.io/base/ the code example for

<address>
    <strong>Yahoo</strong><br>
    701 First Ave.<br>
    Sunnyvale, CA<br>
    94089
</address>

Firstly, I would argue that, whilst this usage of

Secondly, the usage of here is questionable — without context it appears to be purely presentational use, not communicating that the text “Yahoo” is of particular importance.

It doesn't respond between different width with IE8.

With the change for the flat buttons, do we need the gradients in buttons.css, or should that be moved into a special prefixed feature?

Why not adding a vertical separator too? Something like:

.pure-menu-separator-vertical {
  background-color:#dfdfdf;
  display:block;
  width:1px;
  height: 20px;
  font-size:0;
  overflow:hidden
}