MyBB Community Forums

Full Version: Responsive CSS framework?
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2 3
Here are some examples of some Responsive CSS frameworks:
http://foundation.zurb.com/
http://www.getskeleton.com/
http://dfcb.github.com/Responsivator/ (used by Time Magazine)

is MyBB 2.0 already going to have a responsive CSS framework for the Default theme?

If not it should be considered, there's open source frameworks that may allow a partnership of sorts...
With the massive amount of internet devices today and with that list continuing to grow... it's important to compensate for all those different displays with isolating ideal CSS properties for each major screen size. Which is what this semi new keyword "responsive" is all about.
Simple enough to code, not like PHP or JS... (not to say it's super easy).. but again, It really should be the standard for MyBB themes for MyBB 2.0.

Ideas?

Edit:
just realized this thread is similar:
http://community.mybb.com/thread-110944.html
but seems many of the posts on that thread seem to surround the term "responsive" with mysticism...
it's really simple in form/workflow. Just takes time to decide what looks best for each screen size.

Anyone want to work with me to actually get this going? If it's not already Smile
We could use http://styletil.es/ Style Tiles for development ideas.

Edit 2:
To clarify... my term of "responsive framework" I mean STRICTLY CSS....
javascript like Modernizr is a great TOOL to detect devices but the main responsive framework should always rely on CSS only.
If (solely relying on Modernizer for moving around divs) for any reason a device doesn't use JS or a user disables it then your whole "responsive" framework is kaput.
Use Modernizr as a compliment to your CSS structure.

Some notable js tools as useful as Modernizer:
http://masonry.desandro.com/demos/fluid.html (amazing organization of divs)
http://bonsaijs.org/ (great effects library)
http://johnpolacek.github.com/stacktable.js/ (make tables look good on small screens)
http://www.no-margin-for-errors.com/proj...box-clone/ (one of the nicer photo jquery tools)

My favorite Javascript compressor:
http://jscompress.com/

My favorite HTML minifier:
http://www.willpeavy.com/minifier/

Great tool to clean up your HTML:
http://infohound.net/tidy/

My Favorite CSS format tool:
http://www.lonniebest.com/FormatCSS/

Of course the best HTML markup validator I know of:
http://validator.w3.org/

an OK .htaccess generator:
http://htaccessredirect.net/index.php

An UN-MINIFY HTML tool!:
http://www.textfixer.com/html/uncompress-html-code.php (by far one of the most useful little tools for me ever lol, I always go back to redo my work... which is usually minified lol)
I have been playing about with responsive themes in a small way for a while. My biggest "problems" are actually the scaling up of the forum - I can get a fair looking 1024 layout that scales down well to 320, but getting any bigger starts to look sparse.

The other issue is I am really not 100% sure that all this responsiveness is not slowing the board down - that could be because I haven't implemented it correctly.

I have a very basic set up going here with my help docs, memberlist and index.

http://blackcanvas.net

Forumdisplay and postbit are killing me at the moment Sad
(2013-01-29, 06:22 AM)Leefish Wrote: [ -> ]I have been playing about with responsive themes in a small way for a while. My biggest "problems" are actually the scaling up of the forum - I can get a fair looking 1024 layout that scales down well to 320, but getting any bigger starts to look sparse.

The other issue is I am really not 100% sure that all this responsiveness is not slowing the board down - that could be because I haven't implemented it correctly.

I have a very basic set up going here with my help docs, memberlist and index.

http://blackcanvas.net

Forumdisplay and postbit are killing me at the moment Sad

well that's somewhat of a drastic difference between style sections.. going from 1024 down to 320 in the same rule set imo...
I think Zurb (http://foundation.zurb.com/) has done one of the best jobs I've seen so far.
Besides nice Global CSS rules he breaks the framework down into:
@media print
@media only screen and (max-width: 767px)
@media only screen and (min-width: 1441px)
@media only screen and (max-width: 1279px) and (min-width: 768px)
@media only screen and (max-device-width: 1280px)
@media screen and (orientation: landscape)
@media screen and (orientation: portrait)
@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px)
@media only screen and (max-width: 940px)

See how many breakdowns he uses?

The problem (I think) is he uses WAAAY too much javascripts... but... it can still work without js I think. I'm no expert but I'm trying.

Edit:
The thing to note is... responsive is NOT about scaling...
it's about RESTRUCTURING your website to look good on any major display screen type.
So to do that.. it means not thinking in terms of scaling all the elements per window size...
but rather moving divs around and completely removing or adding divs/content depending on the
screen space you have to work with.
Well yea, I am in fact working on that - to be honest - I think that the whole template structure needs to change. EVERYTHING. Then you can move things about.

At the moment, I just am doing some very simple stuff, but that particular template set is really beyond saving.

I would just use MyBB mobile, but I THINK (I dont have a mobile device at all) that it would also pick up tablets and as a 768 wide layout is really doable with MINIMAL change I don't want to deliver the mobile solution to a device that can handle it. It is the tiny screens that create havoc.

If someone confirmed that a tablet would not pick up the mobile theme as default then I would go straight to mybb mobile for the phones.


EDIT: 320 and up ... http://stuffandnonsense.co.uk/projects/320andup/
(2013-01-29, 06:56 AM)Leefish Wrote: [ -> ]EDIT: 320 and up ... http://stuffandnonsense.co.uk/projects/320andup/

I like how they move their moped guy over each menu button, and the jquery (?) effect on the banner image. Did you look at the CSS selectors he uses? ".ihatetimvandamme" ROFL wtf?

I use tapatalk for mobile because of the easy login and access with it BUT using modernizr with some additional libraries could do near the same thing. I'd much rather though use a fluid design for each screen type without the use of any additional app so that way throughput is maximized and.. well... I feel a lot of the time that less is more... ;D

Always love chatting with you Fish!

Edit:
is there a preview of the MyBB 2.0 theme avail that we can take a look at and start messing with it?
Yea, my point on the link was that you CAN use one style sheet for all, but it is going to look very, very minimal. Like REALLY minimal Big Grin A forum is a bit more complicated than a four page website. I am not sure that I can "sell" to my users with a 1920 screen that the reason their forum looks like a desert with a lot of really big font filling stuff up is because we must think of the phone users.....

I think the key thing is that he worked up to it, and the MyBB templates are pretty much designed for a PC screen. Lets not go into the whole sorry table story...

MyBB 2.0? I have no idea - I don't look at the code of 1.8 even - far too complicated.
(2013-01-29, 07:28 AM)WebDevandPhoto Wrote: [ -> ]is there a preview of the MyBB 2.0 theme avail that we can take a look at and start messing with it?

2.0 is still in the early development/planning stages. As for the theme there are prototypes but nothing which would be useful to theme developers at this point.
lol I feel html tables are like the anti-@#*&^. Much prefer working in divs ofc and there's the new html5 box method emerging too which I haven't experimented with yet but am excited to try.

Yea, I think a perfect example of what I'm saying (visually) is what time magazine did:
[Image: full_tl_redesign_1021.jpg]

See how on each screen available content is soley based on the best use of screen space?
Since it's announced that MyBB 2.0 template system is being based on the Twig Template engine (which I have no real idea how it works yet) I guess we (whoever wants to dive into a responsive MyBB 2.0 theme idea with me) could take a look at it and start getting familiar with it. Smile Well that'll be on my agenda!

Edit:
oh cool Nathan! well I'm eager to take a look as soon as it's avail for public beta? Big Grin Big Grin
Its just floats - and resizing the images. That is actually easier to do than a fluid width forum layout Big Grin
Forums have a lot of information and content. How are you going to 320px MyBB?

I think attempts to display the same content on a desktop onto a cell phone are going to fail. Your only hope is to have different content sent to tablets and smart phones.
Pages: 1 2 3