Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

General Discussion

kyle rees
kyle rees
1,480 Points

looking for a decent grid framework

im looking for a decent grid framework to layout a project im working on with i tried to use the grid.css that tree house used in the smells like bakin project but it didn't seem to want to work and was falling apart at the seems needing lots of tweaking and modifying one flaw being if you were to set out for instance grid 8 and then a grid 4 beside it it would float the 4 to the next row same if you did 4 grid 3s as well as other issues but anyway im not interested in all the flashy features for instance all the ui stuff that's found within bootstrap and i want something that can be used for responsive design which i believe rules out 960 unless they've changed there game recently

i have considered bootstrap but without using the other stuff which would work and they even have there customize script to make a slimmed down system but i thought id put the question out there to see what the general option and suggestions of people who have a little more insight into grid frameworks than i do

also for those who are interested its for my portfolio a ai mock-up of which is below http://imgbin.org/index.php?page=image&id=13536 well a rough one at least S:

19 Answers

Dan Ridley
PLUS
Dan Ridley
Courses Plus Student 14,839 Points

Hey Kyle,

I am actually a huge fan of the Bootstrap grid and I definitely recommend it. I find it easy to use and put together. I love the responsiveness of it also. I am a fan.

Kevin Korte
Kevin Korte
28,135 Points

I agree, I'm a fan of, and use Bootstrap myself.

kyle rees
kyle rees
1,480 Points

bootstrap it is then :) btw how does the mockup for my portfolio look its a bit rough and some parts have been nixed like the pricing page but the layout is moderatlet the same

Dan Ridley
PLUS
Dan Ridley
Courses Plus Student 14,839 Points

Ya definitely go with bootstrap. Nice Mock up too. Should become a great site. Best of luck and have fun building!

Kevin Korte
Kevin Korte
28,135 Points

It's a good start! Bootstrap should work well for your site. My only suggestion is the cursive font used as paragraph text below your 4 headlines.

I'm good with cursive font for titles, menus, and headers, but when you use cursive font as a paragraph of body text, it kinda turns into this grey blob of squiggly lines, which mean I am not going to read it.

I might break that up with a little bit more legible font. A sans serif comes to mind, but a serif font might work well against the cursive. Just have to play with it a little to find the right combo.

There are some pretty good lessons on font choices here, I know some of the lesson are in the CSS section. I'd check it out.

Otherwise, keep pressing through!

kyle rees
kyle rees
1,480 Points

id actually considered the cursive problem after making a stupid mistake for some reason un beknown to me i deteled (or lost i cant remember which) or original ai file that i made the mockup on and could use it to find out which font i intended to use and the new font i substituted looks horrible in big text chunks i was just gonna roll with default font but i think i might look for a better font for bulk text as you sugested

actually.. after looking back at my layout i really missed the mark with selecting a replacement font this is probably one of the few downsides to being able to use custom fonts is that your spolit for choice rather than just picking from say 30 websafes your confronted with a sea of fonts can wate a long time browsing and playing with them

Kevin Korte
Kevin Korte
28,135 Points

Bootstrap has a pretty nice default sans-serif font that ships with it. You may just consider using that for your body text. I do on a lot of my projects.

Most people won't know you are using bootstrap or it's default font. I didn't, until I started using bootstrap myself and noticed how many other sites were using it too.

George Offley
PLUS
George Offley
Courses Plus Student 7,386 Points

960 grid system is really good too. Very easy to use, also a fan of twitter bootstrap too. Boiler Plate is really good to, you can accessorize and customize it as much as you want.

Good luck!

justinw
justinw
14,517 Points

I'm a fan of Zurbs Foundation, take a look at what they have.

kyle rees
kyle rees
1,480 Points

now you mention zurbs i saw that earlier today while trying to get there orbit gallery to work but skipped past it cause at the time i wasnt interested in getting a grid system

as for boiler plate ill have to check that out as well as some others when i have time

regarding 960 is that responsive cause there whole ethos seems to revolve around there magical infinatley dividable easily viewable number of 960

kyle rees
kyle rees
1,480 Points

speaking of boiler im taking a look now and its mentioning in the custom area a bootstrap version am i right in asuming that this is a hybrid of the 2 where you have boilers layout and features with bootstraps extra ui functionality

George Offley
PLUS
George Offley
Courses Plus Student 7,386 Points

The people that came out 960 came out with a responsive layout called unsemantic.com I haven't tried it but 960 grid is good so I would check it out.

kyle rees
kyle rees
1,480 Points

i think as soon as i get the portfolio sight done im gonna download a bunch of frameworks and make a few dummy sites in each one and use them as some padding for my portfolio

Try also Skeleton grid system.

You should also check out csswizardry grids.

Recently I used that and CSS-Tricks Don't over think it grids to roll my own mash up of a grid system. Then I didn't have to worry about undoing all the other decisions that a lot of other frameworks make out of the box.

Here's my mashup grid (scroll to bottom for codepen of it)

kyle rees
kyle rees
1,480 Points

Keith Wyland the framework you made looks good but the sizing solotions are a bit confusing by using fractional from what i see youd go bigger in this fasion

1/12 1/6 1/4 1/3 5/12 1/2 7/12 2/3 3/4 5/6 11/12 2/2

which is fine but its can be confusing converting up and down to fractional so id probably modify it into a single base fraction so 1/12 2/12 ect

but other than that its a good basis for making a framework

Definitely true! And that's why I like the idea of kind of rolling your own. You can pick and choose what works well for you as a developer as well as what works for the users you need to support without the fluff of these huge (well done and thought out,robust, I'll admit) frameworks.

Good luck!

You MUST try Zurb Foundation. I've worked with it in my last two projects and it's really aweome.

Regards buddy

kyle rees
kyle rees
1,480 Points

its on the todo list right now i dont want flashy flashy ive come to realize so i just made my own framework also zrub have practically HORRIBLE in house support for there framework they have no documentation and the only help they provide is there trainign courses in using it which is awefull in my opinion there is thrid party documentation available but if im going to adopt a framework i do not want to have to go trawling the web for tid bits of information scatered far and wide i want it centralised maintained by the people who created it so its facualy correct and more importantly up to date with the current release