Massassi Forums Logo

This is the static archive of the Massassi Forums. The forums are closed indefinitely. Thanks for all the memories!

You can also download Super Old Archived Message Boards from when Massassi first started.

"View" counts are as of the day the forums were archived, and will no longer increase.

ForumsDiscussion Forum → simple/small css framework?
simple/small css framework?
2016-11-09, 6:24 PM #1
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?
2016-11-09, 7:37 PM #2
Seems like a former -ian write a decent grid system a few years ago. Anyone remember the name of it?
And when the moment is right, I'm gonna fly a kite.
2016-11-09, 7:50 PM #3
The only one I've used is Bootstrap. Which was great, as long as you're okay with your website looking like Bootstrap.
2016-11-09, 9:09 PM #4
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.
2016-11-09, 9:24 PM #5
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.
2016-11-10, 6:05 PM #6
What are you planning on using this app on? Mobiles only?
Nothing to see here, move along.
2016-11-11, 8:19 AM #7
No, mobile/desktop.
2016-11-11, 9:04 AM #8
I haven't used it, but you might wanna try Skeleton:

http://getskeleton.com/
Nothing to see here, move along.
2016-11-11, 10:04 AM #9
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.
2016-11-12, 4:53 PM #10
Originally posted by Brian:
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:

Originally posted by Skeleton:
The max width can be changed with one line of CSS and all columns will resize accordingly. The syntax is simple and it makes coding responsive much easier.
Nothing to see here, move along.
2016-11-13, 9:45 AM #11
I still don't get that. Isn't responsive that the framework takes care of the max width for you?
2016-11-14, 7:02 AM #12
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.
TheJkWhoSaysNiTheJkWhoSaysNiTheJkWhoSaysNiTheJkWho
SaysNiTheJkWhoSaysNiTheJkWhoSaysNiTheJkWhoSaysNiTh
eJkWhoSaysNiTheJkWhoSaysNiTheJkWhoSaysNiTheJkWhoSa
ysNiTheJkWhoSaysNiTheJkWhoSaysNiTheJkWhoSaysNiTheJ
k
WhoSaysNiTheJkWhoSaysNiTheJkWhoSaysNiTheJkWhoSays
N
iTheJkWhoSaysNiTheJkWhoSaysNiTheJkWhoSaysNiTheJkW
2016-11-15, 11:09 PM #13
Originally posted by Brian:
I still don't get that. Isn't responsive that the framework takes care of the max width for you?


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

Originally posted by Ni:
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.


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.
Nothing to see here, move along.
2016-11-16, 7:46 AM #14
I thought modern web design standards was illegible fonts and a 4 MB script to display a single page of static text.
2016-11-16, 9:38 AM #15
Originally posted by SF_GoldG_01:
There still needs to be a max width from which everything adjusts accordingly.


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.
2016-11-16, 10:12 AM #16
Originally posted by Jon`C:
I thought modern web design standards was illegible fonts and a 4 MB script to display a single page of static text.


Sounds about right.
TAKES HINTS JUST FINE, STILL DOESN'T CARE
2016-11-16, 4:44 PM #17
Originally posted by Jon`C:
I thought modern web design standards was illegible fonts and a 4 MB script to display a single page of static text.


[http://i.imgur.com/T11ilB3.jpg]
And when the moment is right, I'm gonna fly a kite.
2016-11-16, 5:07 PM #18
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)
2016-11-16, 5:08 PM #19

^^^
2016-11-17, 6:29 AM #20
[https://i.imgur.com/kCyWMDj.gif]
And when the moment is right, I'm gonna fly a kite.
2016-11-17, 9:54 PM #21
Originally posted by Brian:
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.


It's probably easier to code. But if you do want something that can adapt to any screen size, use bootstrap with container-fluid.
Nothing to see here, move along.
2016-11-22, 8:19 AM #22
Originally posted by Brian:
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.
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?
TheJkWhoSaysNiTheJkWhoSaysNiTheJkWhoSaysNiTheJkWho
SaysNiTheJkWhoSaysNiTheJkWhoSaysNiTheJkWhoSaysNiTh
eJkWhoSaysNiTheJkWhoSaysNiTheJkWhoSaysNiTheJkWhoSa
ysNiTheJkWhoSaysNiTheJkWhoSaysNiTheJkWhoSaysNiTheJ
k
WhoSaysNiTheJkWhoSaysNiTheJkWhoSaysNiTheJkWhoSays
N
iTheJkWhoSaysNiTheJkWhoSaysNiTheJkWhoSaysNiTheJkW
2016-11-22, 10:37 AM #23
I don't think there's any way to have this vbulletin support markdown.
2016-11-22, 2:19 PM #24
Originally posted by Ni:
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?


This is what I wanted to say. Thanks Ni!
Nothing to see here, move along.
2016-11-28, 12:15 PM #25
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.

↑ Up to the top!