CSS Framework for Dummies | Hacker News Reader

CSS Framework for Dummies

github.com

77 pointsyegor256a27 comments

This has great potential to interfere with other css modules like nprogress or noUIslider to throw a few. The same reason why the <table> element requires a 'table' class for bootstrap as explained here: http://getbootstrap.com/css/#tables

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.

Maybe you could work around this by adding a single class: "explicit". If that class is present it resets all the tacit css back to default.

Third party components (date pickers etc.) wouldn't know about the 'explicit' class so it would be up to the user to add this class to all non-semantic tables to 'undo' the Tacit CSS, but they won't know which components output such tables... This is supposed to be a drop-in 'make the page look nice' thing.

If you're adding widgets to your page, you're probably not a dummy or the intended user of this css :)

Without classes, it certainly will break other styles. But I reckon the intended user won't use other styles. This is perfect for someone who wants to make a static page, and doesn't want to bother with CSS.

This looks great, I just forked it and will have a play around with it within the next week. The biggest gripe I have with CSS frameworks like Bootstrap and Foundation is the amount of effort you need to go to in regards to how you write your markup and what classes you use, they are far too opinionated until you reach the point you spend more time undoing default CSS styles than you do writing your own. Bootstrap is a great example of this, you define a container, then you define a row and then you add in your grid classes and if you want to nest a grid item within a grid, you have to introduce another row element to do so, it can get messy.

I had exactly the same frustration with Bootstrap and others. You need to spend a lot of time to learn them and in the end you end up with a lot of changes to their styles anyway. So, what's the point in having them in the first place? :) Anyway, I'd love to see your contribution, if interested.

The point is to use them for prototypes and then throw away, alas it is never done. My personal opinion is that without CSS frameworks the web would be a better place. Not is is common just throw a bunch of frameworks (js and css) into the heap and call it a day.

As much as the one size fits all of bootstrap frustrates me, were you around before bootstrap?

Before-bootstrap is like before-jquery, you really can't understand the colossal contribution of either unless you were there. And just how much of a mess it was.

The dev world is unquestionably better for bootstrap.

I disagree.

Most cases of dislike towards things like Bootstrap is due to not understanding how to use it. It's a case of blaming the tool for not working the way it wasn't designed. Like, as an extreme example, screwdrivers really suck because they can't drive in nails very well.

I believe your first sentence illustrates my point.

My biggest gripe concerning Bootstrap is that it's listed as a project requirement, for whatever reason, and the designers refuse to design according to Bootstrap standards. For me that's been the main reason of having to tweak the defaults beyond their original intent. It can eventually reach a point where it's better to dump Bootstrap and build from scratch.

As for Bootstrap's grid system and nesting grids: I would think all grid systems work this way. I'm not sure how it would work otherwise. It's the same as nesting tables, you'll run into problems if you aren't careful and plan ahead. I would imagine in many ways that nested grid may not actually need to be a grid based on the purpose of Bootstrap's grid system. I bet a series of inline-block elements would serve the same purpose in many cases.

Looks interesting especially for non-designers like me. I also recommend Skeleton[1] for a simple and clean look. It has some additional features and makes use of classes, but is still quite simple.

[1] http://getskeleton.com/

I love skeleton and use it almost exclusively. Most of the classes are simple and you can easily overwrite stuff to make the design unique.

This looks nice! Led me to think about default styles--I suppose one of the strengths of HTML is that it describes the meaning of the content rather than the presentation--it's up to the client to present the various elements as they see fit. On the other hand, why couldn't the default look in a normal browser be something like this or like http://bettermotherfuckingwebsite.com/ ? I'm not sure there's a reason an unstyled website should look like crap (well, I guess the reason is legacy baggage).

I don't believe there's such a thing as an "unstyled" website. At least if you're looking at it through a browser. Even if the page has no css at all, the browser is still using css defaults that it has hard coded. That hard coded css can differ from browser to browser. If one were to dig into it, you can often change much of these defaults to your preferences.

That's why there are css resets and projects like this or Normalize. They make base html look the same across browsers before you start creating design-based css.

Sure, what I meant was that the hardcoded CSS could perhaps be a bit more useful. Useful and consistent across browsers--that's wishful thinking, of course :)

The world needs something like this. No substitute for real design, but a great replacement for the default browser style.

One criticism: At that font weight, Helvetica Neue looks shitty on Windows machines. Take a look: http://i.imgur.com/peDYi53.png

I've had better luck with open sans at that weight.

With you on your sentiments.

With regard to your font weight problem, looks ok to me (Win7 x64 chrome/ff/IE latests):

http://imgur.com/NPSDsWg

hmm strange. I'm on win7, X64 with chrome, and it renders poorly to me. Maybe I have some font setting wrong.

Good luck with your project!

This looks cool! I see this helping a lot of people just get started and focus on what they do (until they include something else and it screws it all up :P)

The first thing that comes to my mind is making themes for this! Should fork and play around.

But how far can be push this ... What about grids ?

I am the farthest thing from a CSS expert, so if someone came up with a decent grid system that was class-less (like this "framework" currently is) I would be ecstatic. Till then, I will wait for `flexbox` to be fully supported in all the browsers I care about :)

Did you take a look at Neat? http://neat.bourbon.io/

My framework http://natuive.net has class-less grid, just put anything in a .row div.

How is a grid that requires a .row class exactly class-less?

It's probably because you don't need to explicitly flag a container as a grid with a class. I think that's what he's getting at.

Hi, the columns are class-less. Regards.

A grid system without classes would be an incredible feat as I view it as near impossible. Sure, you could do it via targeting elements with descending and sibling selectors but you would have to stick to a rigorous markup pattern and could never, ever change it. Plus there's the risk of eventually affecting elements not intended to be targeted.

I imagine the same problem would exist for flexbox as well, unless the browsers start having proper flex elements.

This isn't really a framework so to speak, it's a css reset. Much like Normalize and Skeleton. There's nothing wrong with it, as more options along those lines are always welcome.

Reply on news.ycombinator.com