Weekend Project: Fractionless Boilerplate (HTML/CSS) | Hacker News Reader

Weekend Project: Fractionless Boilerplate (HTML/CSS)

fractionless.info

What was your motivation to use fixed pixel widths for grid sections instead of percentages?

"Do we really need yet another boilerplate? Yes."

Not entirely convincing :P

Haha I know. Just take my word for it! Yes. Period! I'm kidding. I used fixed pixels because it was easy if you want the honest truth. I'm aware that the future is all about mobile-first but this started out as a teaching tool for myself and fixed widths is what I chose back then. I know fixed widths aren't cool but its a work in progress. I was compelled to finally share something instead of always using things others had made. Eventually it'll come with a variety of grids to choose from.

As much as I appreciate creating our own work for all of the fame and fortune it brings us developers, it seems like Bootstrap (v2.0) and even Zurb/Foundation is much further along than this project. I can't imagine why I'd use this over one of those two choices.

Did you consider contributing your time and expertise to an existing project instead?

They are further along. Very much so. I wouldn't dare think of competing at this point. I needed to finish something and get it out into the world though and this was it. I contribute to other projects from time to time but this was just something I needed to do. Why did I need to? Because I've never done it before. I expect one half-baked project to lead to more fully-baked, more useful ones in the future. Part of that is getting feedback like this. I appreciate it.

Grid is broken (chrome 16, mac): http://imgur.com/a/wefVt

The total width of the columns is larger than the page body.

Merry christmas :)

Awwwww damn it! I look like a fool now. Thanks for showing me. I'm using Chrome 16 too on a Mac and it's fine. If you leave the media queries in the stylesheet (like I obviously did) then what you see in the picture happens when your browser window width is less than 1140px. Fair warning, I never claimed this to be fluid. Small screen sizes/mobile devices are the developer's responsibility - the grid doesn't help you with that. I'll try to fix that right now though, thank you.

Update: The fix eludes me right now. I knew about it on mobile devices but never saw it on the desktop. I'll get it...

Can't say i find myself very impressed: http://dl.dropbox.com/u/10190786/fractionless.png

I don't see any compelling reason to use this over boostrap or foundation

There is none. No one is suggesting that. Bootstrap and Foundation aren't the be all end all either though. The reason there are so many frameworks out there is because of the myriad of ways people work. This is just one more. Most people won't want to use it but if just one person picks it up and makes it their own then it was worth it.

1024 resolution is completely broken.

It's made for large screens. 1140+. Is it fair? No. But that's what it is. Hit Control+- until it fits the screen haha.

No responsive design?

Well, looks like this is dying now so I'll say this: I'm glad I didn't get positive feedback here. I appreciate everyone being civil while still letting me know this isn't very good. In all honesty, I think I was lazy in putting it together. Getting this feedback really helped me to figure out what to focus on next, pushed me to iterate, and it has me motivated to not be so lazy about it next time around. Maybe this will come around in a few months in a much improved form. Thanks everyone.

A little background: I could never wrap my head around grid systems. My mind just didn't work that way, keeping track of columns and whatnot. I was much better able to work with fractions so I adapted my favorite grid system from CSS to LESS, added on my own generic HTML5BP customizations and thought maybe others would find it useful.

I'm a little shy/embarrassed to have posted it here where everyone is probably working on much cooler stuff but projects build momentum and that's what it's all about. It's probably not the best boilerplate/framework out there but it works. I was tempted to wait until it was perfect to show anyone but "real artists ship", you know?

I'm happy to hear constructive criticism and eager to make it better. Suggestions are welcome and feel free to fork it or issue a pill request on github.

Oh, and I was up till 6am Christmas morning to publish the site. Merry Christmas.

If this had fluid grid-resizing support (a la getskeleton.com) we would take a deeper look at this for new projects. Nice work otherwise. We love Less so great to see this integrated, hope you get some traction.

It's not really about traction. It's about finishing something, getting it out there, and iterating. I'll be totally honest, there are some really big obvious features that this lacks. Like you said, it needs to be responsive. That's on the list. I've been sitting on this thing for a while so I thought it'd be a good idea to get it out there. Honestly, we're 4 comments in and I already have a good idea of what to focus on next. I'm sure that eventually I'll get it to a point where people are more willing to use it. I will say that one area it excels is with total beginners. I've had a lot of success getting CSS newbies to understand layout concepts with this. Anyway, thanks for the feedback!

Reply on news.ycombinator.com