What is Reddit's opinion of Purecss?

From 3.5 billion Reddit comments

I wonder what this means for purecss - it's the framework I've built the majority of my web applications in (personal and professional). It would be a shame if that project called it quits too =\

I'm not a fan of bootstrap :(

It's a bit sad that the Yahoo! name gives off the weird vibes and sorta scummy itch it does. Yahoo! has a history of producing some widely used and useful tools for web developers (and the greater developer community at large) including YUI and Pure. And then Yahoo! corporate turns around and ruins all that goodwill with things like the hostile Flickr takeover.

It's usually Bootstrap.

Though Skeleton and Pure are very neat and lightweight alternatives. Less styling, fewer elements, more for you to do, and less restrictions, without having to re-write half the framework.

If you just want a grid, Flexbox Grid is rather nice. I like Flexbox.

If you are just learning, it would be much more beneficial to not use a boilerplate. Starting from scratch will give you a better overall understanding of web development, which is what you should be shooting for as you learn. Besides normalize.css, you should write all your own stylesheets and gain a solid understanding of CSS, so when you do use a framework like boilerplate or foundation, you will be able to identify styles that are effecting your design. If you really want to use a CSS template to start, I would take a look at pure since it is the most minimalistic boilerplate.

If you just want a nice looking website, I'd suggest you use a simple css only library instead of using an elm specific library. (this looks good to me, but there are countless other choices)
The reason for this is that I don't think the elm community has figured out a good answer to styling yet. There are various ideas, but each comes with a drawback.

Skeleton was really, really outdated. Then it got one huge update 11 months ago, and it went dormant again. If it fits your needs, it's fine-ish, but don't expect to see shiny new things on the level of Foundation or Bootstrap.

If you're looking for something berebones, also check out http://purecss.io/.

I'm not a fan of bootstrap anymore, I have a repo of all my own components I've created in react that compliment the sites I build. I use http://purecss.io/ for some basic responsive grids but that's it.

I don't like Foundation or Bootstrap (the winners in that article).

I like the grid of PureCSS (or YUI) the most. It uses Flexbox if possible, inline-blocks as fallback.

Wow this is basically the nightmare scenario for why I don't use Bootstrap. Foundation is much easier to override and keeps the base theming to an absolute minimum precisely because of situations like this one.

Short of switching entirely away from Bootstrap, have you tried something like Yahoo's PureCSS? I've never had to integrate it with Bootstrap, but the framework is exceptionally lightweight and it's supposedly easy to drop in Bootstrap modules as needed. Might help you and your UX people find some common ground. (see the bottom of http://purecss.io/extend/)

Care to articulate?

It seems like you're looking for a silver bullet, and you're not interested in spending much time learning it. Perhaps I'm mistaken.

If you're looking for an alternative to Bootstrap, check out pure: http://purecss.io/

Use HTML service to create a form that's styled however you want.

https://developers.google.com/apps-script/guides/html/

Using that you can connect your front end (form) with some kind of backend (dumping data into spreadsheet, etc.) using this:

https://developers.google.com/apps-script/guides/html/communication

If you want a nice-ish looking form, use something like PureCSS to get started:

http://purecss.io

It's a front-end framework, helps you easily and quickly style your page without going through the hassle of writing much CSS and reinventing the wheel. You should use it if you want some basic styling and you don't care about customizing much. If you want to customize it, you can, but it takes a little bit of reading through the codebase.

There are also simpler/smaller/more basic alternatives, like Pure or mini that might fit your needs better, especially if you don't want too many styles and/or components.

Full disclosure: mini.css is my personal take on the whole pure CSS framework idea.

It's the code for the "pricing table layout" on this page: http://purecss.io/layouts/ I can send you the actual code I'm looking at if you don't want to download it from there.

I think the other answers are probably in the right direction, though.

We fucking wish. However if the client needs support for older browsers than we're SoL. That's why I use Pure.css to help with layout. It's extremely handy for responsive layouts too!

I build mobile first and then use html5shiv in conjunction with Respond as you've mentioned. Helps me get down as far as IE7 without any major problems.

I also use the grid component of PureCSS which has a fallback for older browsers and works really well.

It sounds like you are looking for CSS to make your tables look better? I agree with /u/unseenspecter. If you are more specific with your question, you may be able to answer it yourself.

If I were to ask this question, I would say something along the lines of, "What CSS should/could I use to make my tables look better?". If I google "CSS tables," I come across this.

Good luck. Hope it helps!

Im a fan of foundation, as I found it more logical and easier to use than bootstrap, however both rely just as heavily on classes (or close to) so you will most likely have trouble with foundation. You could try simply hand coding everything, such that you can easily navigate through your own code, or try another (more slimmed down) framework such as pure framework, which is far more light on classes, and weight overall.

Been using Bootstrap since 1. Originally it was a godsend. There wasn't great responsive frameworks out yet, and very few had good browser support. Then Twitter released Bootstrap and it has a decent, if inflexible, grid system, a solid framework for media queries, and some basic components to get you started. It was literally for bootstrapped projects. 2.0 made it more robust and you had some awesome utilities like -push and -pull. While yes you can write your own grid rather quickly, why when it's already been done before and likely more robust than what you can hobble together.

Then 3.0 came out. More modules, more JS, more components. It started to get heavier and filled with more stuff I didn't need. By this point I would have already overwritten most of the visual stuff anyway. Between 2.0 and 3.0 you also had to convert your scaffolding to the new syntax. It was a pain and didn't bring much more utility. 4.0 is coming out soon and I won't be upgrading our app. It's just not worth it.

I used Foundation about 3 years ago and hated it. Even then it was bloated and their selectors were way too specific. Bootstrap was (and still it) very friendly to overwrite. That's why it "won" in my opinion. Now many, many sites are built on Bootstrap, that's why companies want experience in it. For my next project though I won't be using it. I've been looking at Pure as well but haven't used it personally.

That's great, here some suggestions: please, divide your row in more than 12 columns (like Pure: http://purecss.io/grids/). Don't copy too much other CSS framework (I don't think it's a problem for now) and don't use underscore in class names. Also when I shrink my window, all the columns have the same width. Continue your great work!

I'd personally avoid Bourbon/Neat altogether. grunt-postcss makes Sass mixins almost obsolete, and if you get a nice, simple class-based grid framework like purecss.io you can avoid the additional bloat in your CSS.

It's a great starting point I'll give you that. But, I find most people use it more as a template than a framework and it saddens me.

I would recommend Layers or Pure over bootstrap for this reason. As pure says it's easier to add than it is to figure what's not acting the way you expect.

This ^

You'll need to plan out all the content that's going to go on your site before you write out one piece of code. A cool site with no content is still a site with no content.

Also watch a video on why responsive grids are so awesome and get familiar with a css framework. Bootstrap, Foundation, whatever. I use http://purecss.io/ just because I like the small size and I can code up my own css for anything complicated I want anyway.

Unfortunately, you are stuck with @media queries. There are several frame works out there that can help you get started. Take a look at http://getbootstrap.com/, http://purecss.io/, https://html5boilerplate.com/ to name some popular options.

Also if you're looking to make something that looks good and consistent quickly, check out pure or bootstrap . Just don't overly rely on them or your site wil look kind of cookie-cutter.

You can customize bootstrap and remove all un-needed plugins from their download page. And as others pointed out, Skeleton is a good choice.

Also check out Pure, it offers separate files for the grids and UI elements, so you can include whichever you want in your project.

This has very little js in it and can be adapted to do what you want: http://www.responsivegridsystem.com

This is the lightest js/css framework and it could be used: http://purecss.io/

This is pure CSS and could be adapted to 'fake' a responsive design: http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm

Why no js?

Kinda late, but:

Bootstrap is fantastic for some websites, but I'm really not a fan of it for anything game related. Reason being that tons of business, marketing, etc sites use the default template and it looks very unoriginal. I recommend trying something like html5boilerplate and Pure

If you're looking for something minimal out of it you could consider http://purecss.io/ -- used it a few times, most major complaints boil down to it's not a 1.x+ release so they've made some significant changes between versions.

I think the biggest pain is coding the UI, the frameworks that exist seem to be meant to hide away web technologies from the developer, but in the end it's basically impossible to escape them. It's just hard and resource consuming to make a modern web UI in Java, be it in JSF, GWT or the Play Framework, etc.

Setting up different environments is OK using spring configuration, coding the DAO layer made is much simpler now with Spring Data JPA. About commercial web templates, it's not a template but I really like Yahoo Pure CSS, it's just plain CSS (< 4k) for responsive layouts, tables, forms, etc, it's derives a whole theme just from one primary color.

Performance wise I find that if the problem can be reproduced locally in the developer's PCS then VisualVM that comes with the JVM plus it's multiple plugins can quickly give us the answer for the vast majority of performance problems, with this tool we are not flying blind in terms of finding the bottleneck anymore.

You mention Wordpress, do you do public marketing websites in Java, if so what tools do you use? I thought it was mainly used for enterprise in-house apps.

Since Spring 3 and even more with 4 the XML configuration can be entirely replaced by Java Config that feels more natural and easier to debug.

I find that the testing tools available are sufficient. For me the biggest pain point of Java is really the UI. I often wonder it a polyglot approach where the frontend is built in Javascript (for example in Angular) and the backend in Java would not be a better way of doing things, even though it means learning an extra language. While doing UI you seems to end up needing it sooner or later anyway.

Since you know a little python, you can use that to run a web backed to skip the overhead of learning a new language. Python has several web frameworks that are worth checking out.

The amount of code you have to write and what flexibility you get is a trade off that varies per framework. They each should have their individual tutorials helping you get started.

Bootstrap can be confusing, since it's so large. Mostly you just import the main css (possibly js file depending on what features you want) and write some HTML. Something like pure might be easier to start with.

With PHP, Laravel is getting popular, but I haven't personally tried it.

I been looking at this for a few days as well, but there is obvious inconsistencies in the documentation.

1. The getting started page mentions " Upload all Bootflat files and paste one line of code at the bottom of your head tag. That’s it!" but never mentions what line of code I need to put in my head tag. I assume a link href to the css.
2. And on their documentation page they're using the following CSS: <link rel="stylesheet" href="css/site.min.css">
3. But back on the getting started page, in the What's Included section the content of the zip-file doesn't match the list. The zip file is essentially a copy of the git repository. There's a bootflat directory, but no sass directory. Instead I have a scss directory? Also the file names doesn't match. Furthermore I have a css directory with a bootflat.css and bootflat.min.css, but the source code of documentation page isn't using this.
4. What's the difference between bootflat.css and bootflat.min.css? I've seen this convention before, but I can't for the life of me figure out what's going on..
5. What's with the swatches? Can I easily use them, or do I need to actually set my colors to the ones mentioned?

Not very intuitive if you're just starting out indeed.. I'm currently just copy/pasting from the documentation source code and using bootflat/css/bootflat.css and see what happens.

I really like the look of it, but the lack of documentation is annoying and I'm not sure I want to keep using it. I might just go over to Pure CSS or regular bootstrap.

There was a question a day or so ago about styling forms using GAS. My answer might help you:

Use HTML service to create a form that's styled however you want.

https://developers.google.com/apps-script/guides/html/

Populate that front-end using data pulled from your sheet fields using this:

https://developers.google.com/apps-script/guides/html/communication

You can also use that to feed the results back into your form.

If you want a nice-ish looking form, use something like PureCSS to get started:

http://purecss.io

I used it. If you follow the examples exactly it works well. It is well documented and covers most basic needs.

If, however, you plan to make a more complex site or customize it, run in the opposite direction. It's difficult to change, the grid system is not the best, its JS is strange and never does what you want. I would never use it in a new project.

If you want a basic CSS framework to work on, look for PureCSS (and we used it here). If you want something that has tons of templates, bootstrap used to be a good choice (but it seems dead now).

I was more thinking of not using bootstrap as a base. It's heavy. Such a thing you have here is obviously trying to minimalise all of the things. I've had problems with it in the past.

Thought: http://purecss.io

I quite like Pure for building quick grids. Bootstrap is probably the most popular css framework, but armed with @media queries you can create your own with minimal overhead.

I actually do a lot of wire-frames in HTML/CSS especially if I need to show how responsive and fluid elements act, plus check break points and number of columns I want to show in a row.

How I went about it, I created responsive grid with purecss and just added some basic styles I needed at the moment to CSS. Later I added more styles for different looks, so now my CSS has about 2000 lines of code. I have a HTML file with sections (cover, different number of columns, different layouts inside columns...) organized in a way that I can just copy/paste what I need.

And of course there is a small JS file, to regulate the way navigation acts on scroll and small screens.

For me this is much easier than using Bootstrap, cause I created all the styles, plus I organized HTML in a layout that was logical to me.

If you ask me, try to make your own framework, if you're ok with HTML/CSS it will take few hours to lay a good foundation, and through time you can just add more to that.

Check out Pure CSS, it's perfect for somehing like this. Here's an example how to create 3 columns:

<div class="pure-u-1-3"> #content </div>

<div class="pure-u-1-3"> #content </div>

<div class="pure-u-1-3"> #content </div>

And the best part is how easy it is to make it responsive, simply like this:

<div class="pure-u-md-1-3 pure-u-1"> </div>

Here's the link to it: http://purecss.io/

Well, those are just CSS attributes that can be applied on the divs you want to have side-by-side (or on their parent element, the element 1 level above the divs, in the case of flex).

But the thing is, it's not as simple to make it work. You will need "clearance" for floated elements, as they are "taken out of the normal flow". You will need to fight the automatic ~4px space between inlined elements. Flexes are not supported very well, just on the newest browsers. Then you still have to tell the elements how wide they shall be. Percentages are best for this task. You will also probably want to have changed behavior if the screen size gets smaller etc.

So start with the MDN tutorials for CSS: https://developer.mozilla.org/en-US/docs/Web/CSS

MDN is really the best resource for anything frontend web related.

If you're finished, look at some CSS frameworks, such as Bootstrap or the much simpler and smaller PureCSS.

We use bootstrap to toss together quick sites on the LAN as quickly as possible.

I literally see that as its only value because of how heavy and obvious its influence is.

If you want to use something bootstrap for anything else, I'd suggest using http://purecss.io/ because its very similar in purpose and much lighter of an impact on the on the design.

Bootstrap sites always look like Bootstrap sites. Other CSS frameworks [e.g. Pure, Foundation] generally have a "path of least resistance" that doesn't end up looking like the 912349023432th site using that framework.

Ah, I think I see what you mean.

You might have more luck if you used inline-block-positioned elements (or floating elements) for your top menu. They're pretty handy for when you want stuff to be responsive.

(Alternatively, you can use a small CSS framework to give you a few building blocks for menus and other things. But it might be overkill for what you want to do.)

Good luck with it all!

Depend on your needs. If you just want a solid grid framework to build a mobile page on, both will do. The problem with both, as far as I see it, is that if you want to do anything different than these frameworks does it, you have to overwrite everything, which can be a pain in the ass.

I consider using Pure in my next project, which aims to solve this problem. http://purecss.io/

I have used Bootstrap in the past, because it seems to have the biggest community and the most plugins.

Mmm... http://i.imgur.com/Dx5bUPm.png

I see what you say about the button. I'm thinking about replacing it with CSS button like one of these.

As for release date, the service is fully functional and will be for a limited period (I believe they currently have only 100-150 BTC to sell).

They'll start actively promoting it after they'll finish API integration with the Exchanges so they'll be able to by dynamically. Probably will take a week or 2.

Just a heads up: For the first withdrawal you'll need to send them ID and proof of residence. I've put a big warning in the purchase process but i'm not sure it's clear enough.

> However, in pure page performance standards, is it generally faster to code it page by page with html or to have php bring it up?

Bootstrap is good, but huge, and there are excellent, far more lightweight alternatives available if you only need a few things (the grid, usually). In particular, if you want a grid, don't start on your own solution -- it's a solved problem. I've seen Pure recommended but have no personal experience with it.

> However, in pure page performance standards, is it generally faster to code it page by page with html or to have php bring it up?

Static files don't require special handling so they can be served up by the web server directly and so tend to be (much) faster. However, a PHP file, even one that contains absolutely no PHP logic, is, by definition, not a static file, so you can't get static-file performance for, say, a snippet of HTML you're including from another PHP file. If you're concerned about this level of performance, though, consider for a moment how many sites have dynamic content now -- it's not a problem.

Pure suggests two approaches: http://purecss.io/extend/#extending-pure

Basically they want you to use "scope" classes in your markup. Then override in a custom stylesheet.

Second option: http://purecss.io/buttons/#customizing-buttons

Use two classes and combine (which won't work in your situation).

Or you can just get more specific with your selectors?:

.pure-form input[type="text"].custom-input { border: 3px solid green; }

Glad you found it useful. I'll gladly swap JS/Angular tips for Design/Styling ones :) The site http://33hotels.com I am working on has advanced JS functionality but the design leaves room for improvement. I am using Bootstrap but eyeing Pure (http://purecss.io/start/) by Yahoo as it seems leave less footprint than Bootstrap. Never used Foundation, but it doesn't seem to help solving the bloat problem :(

Masonry isn't meant for creating a uniformly-spaced grid; it's a layout engine for dynamic positioning and sorting.

I'd recommend implementing a simple static css grid like the one in Yahoo's Pure framework.

The closest you'll get to a table-like uniform grid with Masonry is to use the Margin and Gutter options together. For example, make the gutter 20px and then write a function for Masonry to use at runtime that calculates the margin option (which dictates vertical spacing) to be the closest (you'll want to use ceiling) to whatever arbitrary multiple of 20 you want the 'cells' height to be.

function whatShouldTheMarginBe(elemHeight){ return Math.ceil(elemHeight/20.0) * 20; }

Bootstrap is nice for apps but I find it gets in the way when designing typical websites.. I much prefer http://purecss.io/ since it's mainly just a grid system and doesn't get in the way of what I want to do.

Actually, the project is using Pure CSS. But being honest with you - all the projects of this kind are kind of similar to github and after that it depends what type of styling and components you use (most of them are open sourced as well).

Lately I've been playing around with LESS + LESS Elements, also a CSS reset and base such as PureCSS or Bootstrap if I need something like dropdown buttons.

PureCSS. Straightforward. Lightweight.

Bootstrap can be useful, but it bloats easily, and takes work to boil down to only the essentials.

Zen grids if you need some custom sass/compass magic.