I started working on a forum system a few years ago and chose this "framework" called blueprint. It's woefully inadequate now because it limits width to 950px which is really annoying on a 1080p screen. I want to switch to something else but really I just want something with a css reset and a simple grid system. Maybe the grid doesn't have to be specified in px? I don't know what the alternatives look like; I'm no web designer (as anyone can tell). Any suggestions?

Seems like a former -ian write a decent grid system a few years ago. Anyone remember the name of it?

The only one I've used is Bootstrap. Which was great, as long as you're okay with your website looking like Bootstrap.

Yeah I've used bootstrap before; it was really heavy. Takimoto wrote a grid system; it was also width-limited (hard coded). I can't remember the name of it, but the max width in pixels was in the name.

Upon reflection I really don't think I need a grid system at all for this project, I think I'm just going to rip it out and go it alone. Thanks though.

What are you planning on using this app on? Mobiles only?

No, mobile/desktop.

I haven't used it, but you might wanna try Skeleton:

http://getskeleton.com/

Yeah I've seen it before; my problem with it is the same as blueprint: "a max width of 960px" -- I don't get why they limit the width like this.

Probably because it's a default value, here is what Skeleton says about it:

I still don't get that. Isn't responsive that the framework takes care of the max width for you?

I never saw the point of them to be honest. Given how easy it is to create any given layout using `display: table` and `float` with a few lines of code, CSS frameworks always seem like overkill to me.

There still needs to be a max width from which everything adjusts accordingly.



I don't think you can make something responsive and decent looking that quickly. The whole purpose of a CSS framework is to have an out of the box look that meets modern web design standards.

I thought modern web design standards was illegible fonts and a 4 MB script to display a single page of static text.

Yeah, but what is the point of hard-coding this max width to a certain number of pixels? It should be 100% of the viewport or something. I shouldn't have to pick a width and hard code it into a css file. That's just nuts.

Sounds about right.

HEY GEE BEE KAY! If you use "HTTPS" instead of "HTTP" when linking images you won't make the little secure bar go pissy. So link to this URL instead:

https://i.imgur.com/T11ilB3.jpg

(yeah it would be nice if there was a setting in vbulletin to only allow embedding of secure external resources, but we've already established that vbulletin sucks)

^^^

It's probably easier to code. But if you do want something that can adapt to any screen size, use bootstrap with container-fluid.

You can do that but you want to use `max-width` as pixels as it will allow you to target different devices. You can essentially say "for devices with a screen with of less than 1000px, display this stylesheet, otherwise use this one" the applied CSS can use `%`, `vw` and `vh` units to make things proportional but you still want to apply the stylesheets based on device pixel width.edit: Is there anyway to have vbullitin support markdown?

I don't think there's any way to have this vbulletin support markdown.

This is what I wanted to say. Thanks Ni!

Brian: just use Bootstrap. It's easily the most well supported, and you CAN just use the parts you actually want, without the theming. If you just want the grid system, for instance, you can get a custom build with just the grid system. Also, the "looks like bootstrap" thing is overblown, sites only have the bootstrap feel because people are too lazy to make their own CSS. Bootstrap's theme is really good out of the box so most of the time folks just use it.

Also, you want a grid system with cutoff points because it makes your layouts way easier on the eyes. Sure, you can make a 100% fit page, but it looks AWFUL on larger monitors. No one wants to read a paragraph that spans a single line. By using a grid system, you use breakpoints to determine how to fill the available space. So if it's a large monitor, you might put the username box next to the post, and limit the width of the page, so that text wraps naturally. On a smaller monitor, you might maintain the horizontal view, but fill the available space. On a phone screen, you might put it on the top of the post, and also use larger buttons for tapping. That's the kind of power Bootstrap gives you and it's stupid-easy to use. Bootstrap 3's breakpoints are a little old fashioned, but the upcoming Bootstrap 4 (which is either in late alpha or early beta now) has improved them even more.

Overall it gives you way more flexibility, as you can decide on a per-element basis where things should go at what sizes. Making a separate CSS doc for every type is obnoxious and you'll either end up with a worse result or just reproduce what Bootstrap already gives you.