MyBB Community Forums

Inuit CSS is nice too or if all we want is a grid system, Dan Eden's Toast is pretty nice too for a responsive grid.

The W3C recently made flexbox a candidate recommendation, meaning they are happy with it and are encouranging browser vendors to implement it. So I think it's very likely that we will see some new grid systems soon, which I'm sure we can make use of. Flexbox makes things a lot easier.

I don't think we need a fully-blown framework like Bootstrap or Zurb. Apart from its grid, inuit.css looks exactly like the kind of thing we should use. It doesn't provide you with actual design like Bootstrap does, just a flexible, scalable, object-oriented base to work off of. You still have to do your own styling, but you have a great base to work with (includes normalize.css). However semantic.gs still strikes me as the best way to do grids. Declaring a bunch of divs gets the job done, but it's not semantic and it makes markup ugly. If there was something like inuit.css that used semantic.gs as a grid, I would be all over it.

It's still too early to settle on any of these though, especially now that flexbox is getting more browser support. However ideally we should keep our minds open to an abstract object-oriented sort of thing. This is highly maintainable and very flexible, which is obviously something good.

(2013-01-04, 06:51 AM)r4dian Wrote: [ -> ]I highly recommend ZURB foundation: http://foundation.zurb.com/

Foundation is a nice framework

The other thread I made was closed for some reason (reason wasn't posted so no idea why), but to continue the conversation which I'm very much interested in continuing to discuss (if there's a different forum I should discuss this in please say so, the whole premise I intended for the original thread was relative to preparing responsive CSS for MyBB 2.0),
here's some CSS excerpts from Zurb's framework:

@media only screen and (max-width: 767px) { .orbit.orbit-stack-on-small img.fluid-placeholder { visibility: visible; }
  .orbit.orbit-stack-on-small .orbit-slide { position: static; margin-bottom: 10px; } }
/* CSS for jQuery Reveal Plugin Maintained for Foundation. foundation.zurb.com Free to use under the MIT license. http://www.opensource.org/licenses/mit-license.php */
/* Reveal Modals ---------------------- */
.reveal-modal-bg { position: fixed; height: 100%; width: 100%; background: #000; background: rgba(0, 0, 0, 0.45); z-index: 40; display: none; top: 0; left: 0; }

.reveal-modal { background: #fff; visibility: hidden; display: none; top: 100px; left: 50%; margin-left: -260px; width: 520px; position: absolute; z-index: 41; padding: 30px; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); }
.reveal-modal .close-reveal-modal:not(.button) { font-size: 22px; font-size: 2.2rem; line-height: .5; position: absolute; top: 8px; right: 11px; color: #aaa; text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6); font-weight: bold; cursor: pointer; }
.reveal-modal.small { width: 30%; margin-left: -15%; }
.reveal-modal.medium { width: 40%; margin-left: -20%; }
.reveal-modal.large { width: 60%; margin-left: -30%; }
.reveal-modal.xlarge { width: 70%; margin-left: -35%; }
.reveal-modal.expand { width: 90%; margin-left: -45%; }
.reveal-modal .row { min-width: 0; margin-bottom: 10px; }
.reveal-modal > :first-child { margin-top: 0; }
.reveal-modal > :last-child { margin-bottom: 0; }

/* Very large display targeting */
@media only screen and (min-width: 1441px) { .hide-for-small, .hide-for-medium, .hide-for-medium-down, .hide-for-large, .show-for-large-up, .show-for-xlarge { display: inherit !important; }
  .show-for-small, .show-for-medium, .show-for-medium-down, .show-for-large, .hide-for-large-up, .hide-for-xlarge { display: none !important; } }
/* Medium display targeting */
@media only screen and (max-width: 1279px) and (min-width: 768px) { .hide-for-small, .show-for-medium, .show-for-medium-down, .hide-for-large, .hide-for-large-up, .hide-for-xlarge { display: inherit !important; }
  .show-for-small, .hide-for-medium, .hide-for-medium-down, .show-for-large, .show-for-large-up, .show-for-xlarge { display: none !important; } }
/* Small display targeting */
@media only screen and (max-width: 767px) { .show-for-small, .hide-for-medium, .show-for-medium-down, .hide-for-large, .hide-for-large-up, .hide-for-xlarge { display: inherit !important; }
  .hide-for-small, .show-for-medium, .hide-for-medium-down, .show-for-large, .show-for-large-up, .show-for-xlarge { display: none !important; } }
/* Orientation targeting */
.show-for-landscape, .hide-for-portrait { display: inherit !important; }

.hide-for-landscape, .show-for-portrait { display: none !important; }

@media screen and (orientation: landscape) { .show-for-landscape, .hide-for-portrait { display: inherit !important; }
  .hide-for-landscape, .show-for-portrait { display: none !important; } }
@media screen and (orientation: portrait) { .show-for-portrait, .hide-for-landscape { display: inherit !important; }
  .hide-for-portrait, .show-for-landscape { display: none !important; } }
/* Touch-enabled device targeting */
.show-for-touch { display: none !important; }

.hide-for-touch { display: inherit !important; }

.touch .show-for-touch { display: inherit !important; }

.touch .hide-for-touch { display: none !important; }

/* Specific overrides for elements that require something other than display: block */
table.show-for-xlarge, table.show-for-large, table.hide-for-small, table.hide-for-medium { display: table !important; }

@media only screen and (max-width: 1279px) and (min-width: 768px) { .touch table.hide-for-xlarge, .touch table.hide-for-large, .touch table.hide-for-small, .touch table.show-for-medium { display: table !important; } }
@media only screen and (max-width: 767px) { table.hide-for-xlarge, table.hide-for-large, table.hide-for-medium, table.show-for-small { display: table !important; } }
/* 1280 tablet ------------ */
@media only screen and (max-device-width: 1280px) { /* NavBar --- */
  /*            */
  .touch .nav-bar li.has-flyout > a { padding-right: 36px !important; } }
/* Covering almost all ----- */
@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) { .flex-video { padding-top: 0; } }
/* Between Medium and Small */
@media only screen and (max-width: 1279px) and (min-width: 768px) { /* NavBar --- */
  /*            */
  .touch .nav-bar li a { font-size: 13px; }
  .touch .nav-bar li.has-flyout > a.flyout-toggle { padding: 20px !important; }
  .touch .nav-bar li.has-flyout > a { padding-right: 36px !important; }
  /* Clearing --- */
  /*              */
  .clearing-main-right, .clearing-main-left { height: 100%; width: 40px; top: 0; border: none; }
  .clearing-main-right:before, .clearing-main-left:before { position: absolute; top: 50%; }
  .clearing-main-left { left: 0; }
  .clearing-main-left:before { left: 5px; content: ""; display: block; width: 0; height: 0; border: solid 16px; border-color: transparent white transparent transparent; }
  .clearing-main-right { height: 100%; right: 0; }
  .clearing-main-right:before { content: ""; display: block; width: 0; height: 0; border: solid 16px; border-color: transparent transparent transparent white; } }

Zurb makes good use of the media queries (@media only screen,@media screen, etc), CSS visibility property and display properties.
I find it fascinating really how it's structured.
And am going to try to use it or something like it for a MyBB 1.6 theme. I'll try at least lol.

A separate php file for mobile devices or other non-desktop devices seems really interesting and at the same times seems like a whole lot of additional work, but the idea does sound novel and has merit.

How would you go about structuring a MyBB theme to be responsive, or rather more specifically what would you hide or show depending on the standard Media Queries sizes?

eg
Hide forum icons and last poster on mobile screens?
Maybe move them to their own line above the forum title and description?
Maybe make the UserCP options href buttons instead of list items?
Completely do away with tables and go div only or use a table resizing js like stackable?

Concepts? Ideas? please share

I think - that there are always going to be sacrifices to be made The first sacrifice is : Responsive or adaptive?

In which kinds of sites/projects is it better to use an adaptive layout (fixed break points)? In which kinds of sites is it better to use a responsive layout (fluid grids)? In my opinion - for an existing site - adaptive.

I went for adaptive.
The idea of course is that you start at the bottom - with the theme as it will display on a mobile screen - say 320 or so - and then increment at break points. I chose my break points as 480, 800, 1024 and 1280 with my site width fixed to a max of 1440.
A responsive layout is in theory better than an adaptive layout, but in some cases an adaptive layout is a more practical solution.

An adaptive layout will give you more control over the design because you only have a handful of screensizes to consider. In a responsive layout you easily have hundreds of screensizes. An adaptive theme could be up and running much faster.

http://amazium.co.uk/

I think that does a great job making a responsive theme easier to make with multiple resolutions. The class for show/hide for different devices is a great idea IMO.

Personally I'm going to try to tear apart the templates in 1.8 now that nothing should be hard coded and try to make a reasonable responsive template(probable more of a base that others can work off of).

Yes, that is a nice site. I was interested in the img size class - I found that if I used a max-width in Opera on an img in a div it resized incorrectly.

http://stackoverflow.com/questions/29237...table-cell

Still pondering

Well it's my framework of choice . Got enough to be useful without design the site for you like more and more frameworks seem to do lately.

Hmmm, got some nice framework options here.
I would love to see the new html5 in mybb and is like to start seeing some responsive designs to. But I'd also like to start seeing some professional designs here like what ipb has and all those forum software programs.

I like mybb but not having any good designs that have a good appeal to me It makes me want to just use nulled ipb and an offshore host.

I am not a designer cause I suck at it like extremely suck but I can do some stuff.

I think I'll play around with some frameworks at some point and see how easy the zurb framework Is to Integrate.

May be worth noting whats on the MyBB twitter
https://twitter.com/justinsoltesz/status...7161845760