CSS Framework for Dummies

by yegor256a • 11 years ago

77 27 11 years ago

DigitalSea• 11 years ago

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.

yegor256a• 11 years ago

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.

rimantas• 11 years ago

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.

talmand4• 11 years ago

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.

hamhamed• 11 years ago

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.

foreigner• 11 years ago

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.

callum85• 11 years ago

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.

Demiurge• 11 years ago

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

normloman3• 11 years ago

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.

t3ra• 11 years ago

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 ?

untothebreach• 11 years ago

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 :)

rolfvandekrol2• 11 years ago

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

rado2• 11 years ago

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

talmand4• 11 years ago

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.

Liblor• 11 years ago

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/

greenjellybean• 11 years ago

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.

normloman3• 11 years ago

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.

teh_klev• 11 years ago

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

normloman3• 11 years ago

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!

klum2• 11 years ago

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).

talmand4• 11 years ago

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.

klum2• 11 years ago

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 :)

CSS Framework for Dummies

Related Stories