18 ms·
Pure: a set of small, responsive CSS modules
- niix 13y agoPretty clean. I can't help but think that Yahoo! is just trying to roll their own Twitter Bootstrap.
- BJanecke 13y agoHow is that a bad thing?
- aioprisan 13y agoit doesn't add anything new
- BJanecke 13y agoFoundation is not much different from bootstrap on the surface; yet there are use cases where foundation works alot better than bootstrap and vice versa. Diversity is good bootstrap is fast headed to becoming a mono-culture in html/css prototyping. Pure is still a very young framework and might yet end up targeting a different use case than bootstrap does.
- hobonumber1 13y agoI tried to do something different with Pure. The main motivation for me was to have a small CSS framework that isn't cookie-cutter. Most sites that use Bootstrap pull in 100kb+ of CSS (minified). Pure is less than 5kb. I love Bootstrap but it's a pain to build on top of it, because it's so opinionated in its design.
- niix 13y agoI agree that there is this sort of "cookie-cutter" style website being created all over the Internet because of Bootstrap. While I do love Bootstrap, I'll give this a go due to it's appearance to be an unobtrusive take on an HTML framework.
- twistedpair 13y agoNot sure that 100k vs 5k is that important. Look at any major site out there. You'll find 10-17 bolt on JS widgets being loaded (i.e. Fb or G+ buttons) and tons of other JS dependencies. yahoo.com: 58 requests, 336k. wsj.com: 123 requests, 1410k I'm a fan of making things smaller and use GWT to compile and compress versions of sites for each browser and format to achieve the bare minimum, but starting out at the CSS lib might be premature optimization give that it's not where most of the fat is. Plus, next to no site is going to use just that lib and their CSS will surely grow well in excess of that 5k.
- mihok 13y agoLooks nice, although as someone who has a dark desktop (inverted colors), people need to remember to set input backgrounds to white if they are styling the border, box-shadow, etc for a white input box. The form input elements look hideous for me.
- hobonumber1 13y agoThanks for that. I hadn't considered that.
- jvzr 13y agoThin font weights, dark gray text on dark background, light gray text on white background... Are they trying to make it unreadable to sight-impaired readers/developers? I cannot be the single one out there having had a bad sight...
- hobonumber1 13y agoI'll fix this in the next release. Thanks for the feedback.
- jvzr 13y agoThank you very much! FYI, the font size is already quite legible.
- taskstrike 13y agoThe only impressive example is the email one, which didn't have a lot of default components, all other examples are things easily done with other frameworks.
- Kiro 13y agoWhat other frameworks?
- locofacetwice 13y agona thanks, ima just wait for bootstrap v3
- flyosity 13y agoJust a small accessibility thing: having inputs with placeholder text is great, but screenreaders have not caught up with the times and you should still use a corresponding <label> tag.
- rjzzleep 13y agoi never even thought of that angle. thanks!
- alternize 13y agoalso, for internet explorers, placeholder support is pretty bad - IE10 only: http://caniuse.com/input-placeholder http://caniuse.com/input-placeholder
- brokenparser 13y agoSo MSIE supports placeholders. How is that "bad"?
- ceejayoz 13y agoIE 7-9 are still far more prevalent than IE 10. Most IE users will be in a variant without support.
- projct 13y agoIE10 is being rolled out via auto update to IE[89] users on windows 7 if they are on automatic updates, so that'll help some, FYI. http://technet.microsoft.com/en-us/ie/jj898508.aspx http://technet.microsoft.com/en-us/ie/jj898508.aspx
- ceejayoz 13y agoIt's not about them having "not caught up with the times", it's using placeholder to replace label being a violation of the intent of the attribute. http://www.w3.org/TR/html5/forms.html#the-placeholder-attribute http://www.w3.org/TR/html5/forms.html#the-placeholder-attrib... "The placeholder attribute should not be used as an alternative to a label."
- hobonumber1 13y agoHey guys - I'm one of the core developers of Pure. Happy to answer your questions. We officially haven't launched yet, but glad that you guys are checking it out.
- toddmorey 13y agoOne thing a lot of these projects miss: have a page or section explaining your unique benefits. Make direct comparisons to Bootstrap, Foundation, or other known frameworks and mention how your philosophy, approach, or feature set is different. I was having a hard time figuring out where to put Pure in the universe of CSS frameworks.
- hobonumber1 13y agoI didn't feel like using Pure prevents you from using other Frameworks, but you're right - maybe it's unclear where Pure fits into everything. I'll think about how to expose this more. Right now, it's buried within Customize and Extend.
- saltcod 13y agoAgreed. I've been back here several times today wondering why I'd use Pure over an alternative. A nice explanation of why would be great.
- jcutrell 13y agoI think this sits in a unique place, as earlier alluded to, similar to Skeleton. Bootstrap is a large framework for application development, but perhaps you want to hand-roll most of the visual components. Bootstrap isn't very well suited to this, as it is so extensive that building from the ground up (instead of "extending") is a bit difficult to do. Sure, you can modify some of its parts and pieces fairly easily using the variables, etc, but in general, Bootstrap is Bootstrap. Pure, as it mentions on the page, builds on Normalize and gives you some much more basic pieces to work with. I would imagine this would be used by a lot of people who are doing less "app"-like experiences, and are instead leaning more towards layout-driven, brand-heavy "website"-like experiences.
- envex 13y agoLooks great, one thing that irks me is the grid classes. Not a huge fan of "pure-u-1-3"
- hobonumber1 13y agoWhat irks you about it?
- envex 13y agoIt just seems a tad unnecessary. Why not use something like "2-cols/2-columns/pure-2"?
- saltcod 13y agoI'd prefer something more explicit, personally. pure-row, pure-col-1-2.....
- juandopazo 13y agoThe idea is that you can combine columns of different sizes. If you want a column of 1/3 of the width and another of 2/3, then you just need to add pure-u-1-3 and pure-u-2-3. Maybe you're right and the "u" is unnecessary.
- devmach 13y agoThere is too much options [0] and it's more flexible than it should be. I know , it sounds weird but with bootstrap all you have is 12 columns and when you have less options it's easy to plan. Maybe the other problem is : Units are not in multiplies of 5 and that forces you unnecessarily to think. If it would be in fixed units like bootstrap or in multiplies of 5 ( pure-u-3-25 etc.) i would be less thinking while deciding the length of some div. [0] : http://yuilibrary.com/yui/docs/cssgrids/#unit-sizes http://yuilibrary.com/yui/docs/cssgrids/#unit-sizes
- notjustanymike 13y agoAgreed. Too many hyphens, too much thinking. Compare "span4" vs "pure-u-1-3"
- MattBearman 13y agoWhy do all CSS frameworks feel like they need to mimic Foundation/bootstrap so much? Things like colour scheme, form elements and typography are all so similar. Personally if I'm looking for an alternative to Bootstrap, these are the things I'll be looking at.
- juandopazo 13y agoIt may need a bit of adjustment, but the homepage looks clear enough. It's a lightweight framework on top of which to build your own style. Bootstrap is for quick prototyping with an opinionated design. Pure is a lot more like Foundation, but much much lighter. And as someone else mentioned, it's a very young framework (literally a couple of days old) that can still take any direction.
- JoeKM 13y agoPlease expand, how would you see fit a framework that isn't like the rest? I'd love to know. Personally I don't see a lot of room for innovation in design. The early 2000s had its table-based designs, and micro designs with small bitmap fonts.. that only appealed to a niche audience. Websites then were much less accessible and had horrible UX. In today's modern design, you're either flat (Foundation, etc.) or you're Bootstrap. If Yahoo didn't mimic the aesthetics of the most popular frameworks, people would complain about it being too different, and it would not gain wide-spread adoption.
- daveis 13y agoBecause the 'skin' of the base components is not the problem most of these frameworks are trying to solve. This framework seems to have very little to do with the look and feel you are after. Hence it's light filesize, and it's advocacy for a less opinionated style. "...provides layout and styling for native HTML elements, plus the most common UI components. It's what you need, without the cruft." "...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." Bootstrap on the other hand, has a fairly opinionated design. That is to say, it does a lot of the 'look and feel' for you, and overriding those styles to create your own skin takes a fair amount of work. Pure seems to aim at making a uniform base of elements, without designing a lot of the skin... encouraging you to extend base classes more than trying to override them. And I applaud these types of frameworks. Lastly, IMHO the solution for grid systems is different in many of these frameworks, and a lot of it comes down to personal preference and your project's requirements. This is a pretty big differentiation point for some people. Many frameworks have opinionated grid systems -- box-sizing: border-box, fluid vs. adaptive, first/last class names required on columns within a row, etc.
- xSwag 13y agoJust a quick heads up: Ghostery blocks Typekit which messes up your entire layout as the backup fonts aren't the same size. As of 1500 GMT 28/05/13 it has 686,260 users on Chrome.
- hobonumber1 13y agoThanks! I'll add an issue for that. Btw, the site is open-source too: http://github.com/yui/pure-site/ http://github.com/yui/pure-site/
- cthor 13y agoLooks really nice, and the HTML appears well formed at a glance. I might consider using it in an upcoming project. A few reservations, though: - JavaScript dropdown menus. Is it not possible to get a pure CSS (get it?) solution? Without JavaScript the menu collapses into a bullet list. I understand that CSS dropdowns are slightly less responsive, but a graceful fallback would be nice. - Buttons have no :active styling (really minor, I know). This sort of stood out to me as odd, since most default button styles have one.
- hobonumber1 13y agoWe didn't want to have a pure CSS menu just because Pure supports IE7+ and I wanted to keep it that way. Buttons styling will be fixed in the next release. :) Thanks!
- leeoniya 13y agomight be confusing, also called "pure" http://beebole.com/pure/ http://beebole.com/pure/
- pessimizer 13y agoConfused me - that was the only reason I clicked on this.
- skore 13y agoIMHO, those grouped inputs are a very bad idea. You can only use them on a handful of items at the same time or it looks completely unusable and if you have only a handful of items, grouping them makes no sense in the first place. So - nice technical solution, not really useful in the real world.
- hobonumber1 13y agoI figured that it's useful on mobile.
- JangoSteve 13y agoI opened this link on my phone and was greeted with this (menu items overflowing content): http://i.imgur.com/Gaejb1K.png http://i.imgur.com/Gaejb1K.png Didn't get a good first impression considering it's meant to be responsive. Otherwise, it looks awesome. It's like a more feature-complete version of Skeleton: http://www.getskeleton.com/ http://www.getskeleton.com/
- juandopazo 13y agoI'll open an issue. Can you tell me which browser and Android version is that?
- dkuntz2 13y agoIt's an old embedded one inside of an hn app.
- JangoSteve 13y agoIt's Android's WebView [1], which is used in all apps that render web pages and also in the Android Browser, still in use on the vast majority of Android phones (see my other comment in this thread). [1] http://developer.android.com/reference/android/webkit/WebView.html http://developer.android.com/reference/android/webkit/WebVie...
- brokenparser 13y agoProbably 4.0, it looks just fine here: https://www.manymo.com/emulators/82/connect https://www.manymo.com/emulators/82/connect
- pavs 13y agoWorks fine with chrome/Android, the problem is with your HN reader. I had seen it bork few sites rendering in the past.
- JangoSteve 13y agoI'm pretty sure the HN reader uses the Android webview [1] to render all webpages, which is the same thing that is used in the Android Browser. Chrome Mobile is not available for download on devices before Android 4.0, and didn't become the default browser on Android until 4.2. According to these stats [2], Android Browser has about 55x the usage of Chrome Mobile as of April 2013. This means ~97% of Android devices will likely show up as they do in my screenshot. In short, the problem is not with my HN reader, the problem is with this CSS library on the most common Android browser. [1] http://developer.android.com/reference/android/webkit/WebView.html http://developer.android.com/reference/android/webkit/WebVie... [2] http://caniuse.com/usage_table.php http://caniuse.com/usage_table.php
- ereckers 13y agoLooks great. More competition and options are always a good thing. It'll be fun to see how long pure can keep it's thin figure. Frameworks as with people inevitably seem to fatten up with age.
- websitescenes 13y agoLove the idea of display modularization. Bootstrap and Foundation are two alternatives but I definitely don't think that they are an end all solution. There is a distinct advantage to developing your own core set of modules that are portable across your selected platforms and projects. I am glad to see more developers going this approach and am sure this will be a great addition to the growing list of responsive solutions. Thanks for sharing.
- itry 13y ago"made with mobile in mind" but as soon as i zoom in on my ipad to make the text bigger, the layout breaks apart.
- matteodepalo 13y agoVery good job, I love the minimal flat design. Unfortunately, since it doesn't use any css preprocessor, it is impossible to create a semantic stylesheet. Now-days I would not consider any css framework that doesn't let me separate the presentation layer from the markup. I realize this is meant to be a very lightweight framework, but in order to be usable it has to have the possibility to be extended easily without spawning classes everywhere.
- websitescenes 13y agoOh snap. Good point... but it really isn't that hard to just create a .less sheet, copy the styles into it and then compile that with your overrides and new classes. I have built a responsive template boilerplate with LESS on top of the html5 boilerplate using this method. Really not an issue to just add the CSS compiler or pre-processor of your choice. I do think it could be would be a viable core option for the Pure solution to offer a CSS interpreter option.
- nobodysfool 13y agoGoogle Chrome - "compact inline form" the fields for email and password are not aligned. Password is about 5 pixels higher than email. Also, when doing demonstration websites, it's not a good idea to put a 'password' box there.
- hobonumber1 13y agoI'll look into this. I don't want to add 'px' rules and don't really want to hack on the core, so let me see what I can do. thanks for bringing it up. Could you file an issue? github.com/yui/pure/
- _jmar777 13y agoLooks really nice. Would be nice to see browser support formally stated somewhere, though.
- nottombrown 13y agoGreat work! I've been looking for something like this to replace my overly complex bootstrap setup. One thing that I'd like to see is a gutter-based grid system. In your grid examples the inner elements take care of the padding so we end up with weird padding on the left and right.
- hobonumber1 13y agoYou're right - this is something that I've been meaning to look in to as well, just to remove the need for more DOM elements. I also want to add offsets in.
- deleted 13y ago[deleted]
- Fauntleroy 13y agoForgive me if I'm missing something here... but it seems that the typeface used on all the buttons and headings is "Omnes Pro," which is $229 here: https://www.dardenstudio.com/typefaces/omnes_pro?view=buy https://www.dardenstudio.com/typefaces/omnes_pro?view=buy I feel it's a little disingenuous to use a commercial typeface in an open source project. Why not switch to something people can use without a Typekit account?
- orangethirty 13y agoThe naming conventions are a bit strange. I'm used to bootstrap and others that have similar namig conventions. Still a nice framework. Will try it out.
- jtreminio 13y agoI would pay money to have an email client with this design: http://purecss.io/layouts/email/ http://purecss.io/layouts/email/ I would pay a bit more if I could have gmail.com look like that.
- tn13 13y agoYUI definitely needed a better CSS framework and looks like they are finally working on one.
- ccleve 13y agoCould someone compare / contrast Pure with Bootstrap? Why is it better? Or how is it different?
- anotherbadlogin 13y ago"Responsive": the latest tells-you-nothing buzzword that people throw around to pretend that they're "cutting-edge."
- josscrowcroft 13y agoThis is beautiful - I strongly recommend increasing the text contrast. I'm on a Macbook Air and I can hardly see the form labels and subheaders, so I despair for anyone on a shitty old screen etc. Will be using this in next project tho!
- nish1500 13y agoGrouped inputs should not have shadows in-between elements. Overall, the design looks very incongruous. The elements look like step-brothers.
- HNSucksAss 13y ago"Responsive": the latest meaningless buzzword that people regurgitate to show that they're "cutting-edge." Responsive TO WHAT? User interaction? Underlying data changes? Humidity? LAME.
- jonhmchan 13y agoIs there a reason that <textarea> isn't supported in the forms?