MyBB Community Forums

Full Version: Responsive/Adaptive theme
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2 3 4
That responsive web design article is from May 2010 - hardly as immature as HTML5. Everything in that article is based on solid standards.

Since most mobile devices now kow how to parse HTML (instead of using WAP or WML) we can use the same struture and just serve up a different set of style sheets based on device.
(2012-01-03, 01:08 AM)Omar G. Wrote: [ -> ]Can you summarize it? I don't get it too well.

Skeleton is a CSS grid-based framework that stands at a standard width of 960px, but is fully adaptive to smaller screen sizes. It also includes a few other features such as pre-defined typographic styles and form element styling.
To be nitpicky, Skeleton is "adaptive" more than "responsive" (responsive design includes the use of a fluid layout, while Skeleton uses media queries but with fixed layouts).
Sorry about that Wink I still tend to get my terminology mixed up xD Fixed the above post.
(2012-01-03, 12:21 AM)ekerazha Wrote: [ -> ]semantic.gs needs LESS.

Skeleton is nice too http://getskeleton.com/

LESS is meant for ease of development, not deployment. It can and should be compiled down to plain CSS. In the end it's all the same as any other stylesheet and it took you half the time to code. LESS is a big advantage in my opinion.

Skeleton is fine but it's just like any other grid system: it has divitis. All those unsemantic <div class="seven columns alpha"> classes are really bad. They are absolutely meaningless and they quickly add up, making the code look really confusing. semantic.gs fixes this by using sweet, declarative, semantic HTML and styling it all with CSS.

Besides, Skeleton comes with a lot more than a grid - which is undesirable in my opinion. We just want a grid. There is no need for all of those typography, buttons and forms base styles. Let us decide what we want to use. Of course you could strip it down and retain just the grid, but it's not worth the trouble considering the alternatives.

(2012-01-03, 01:08 AM)Omar G. Wrote: [ -> ]Can you summarize it? I don't get it too well.

The best way to understand it is to check it out by yourself. Visit the following websites and resize your browser window in width.

http://avondalemeadows.org/
http://thinkvitamin.com/
http://seesparkbox.com/

Basically you have one version of a website only, and it correctly scales down to whatever resolution you're using - whether it's a desktop, laptop, tablet, smartphone, PSP...
(2012-01-03, 04:02 PM)Fábio Maia Wrote: [ -> ]
(2012-01-03, 12:21 AM)ekerazha Wrote: [ -> ]semantic.gs needs LESS.

Skeleton is nice too http://getskeleton.com/

LESS is meant for ease of development, not deployment. It can and should be compiled down to plain CSS. In the end it's all the same as any other stylesheet and it took you half the time to code. LESS is a big advantage in my opinion.

Skeleton is fine but it's just like any other grid system: it has divitis. All those unsemantic <div class="seven columns alpha"> classes are really bad. They are absolutely meaningless and they quickly add up, making the code look really confusing. semantic.gs fixes this by using sweet, declarative, semantic HTML and styling it all with CSS.

Besides, Skeleton comes with a lot more than a grid - which is undesirable in my opinion. We just want a grid. There is no need for all of those typography, buttons and forms base styles. Let us decide what we want to use. Of course you could strip it down and retain just the grid, but it's not worth the trouble considering the alternatives.

It's true that you can compile LESS files (although this can make more difficult to customize the style). You could include both the CSS and the LESS files. It's not that true that LESS is for development only, because you can also compile a LESS style on client side with less.js (nice article http://fadeyev.net/2010/06/19/lessjs-will-obsolete-css/ ) or server side. Skeleton is a skeleton, you can customize it, you're not forced to use its typography.

Still, personally I prefer a fluid layout (responsive) over a fixed layout (adaptive).

My favorite responsive grid is Golden Grid System http://goldengridsystem.com/

It's not a "ready-to-use" solution, it's a concept. Gutters are not fluid but elastic, this is a very good idea in my opinion.

If you don't like "explicit" grid classes, maybe you like this concept http://framelessgrid.com/ (from the same author of Golden Grid System).


This is another approach: http://goldilocksapproach.com/
Yepe, it is awesome, really.
But I think this will have the same answers like the HTML5 thread one, MyBB team should only use what is already complete and standard, there is not need to push it that much.
I highly recommend ZURB foundation: http://foundation.zurb.com/
I really do feel that a clean, responsive theme is the way forward. It would ultimately be easier IMO to maintain because responsive design uses mostly styling tweaks. Having a separate theme means having to detect browsers, make decisions, etcetera. On the other hand, a few CSS files that would be needed anyways, add some media queries, and you've got a great start and something that still feels well integrated with the main style.
(2013-01-04, 06:51 AM)r4dian Wrote: [ -> ]I highly recommend ZURB foundation: http://foundation.zurb.com/

While I do like foundation I think it's a little bulky for MyBB's default themes needs. They can make a responsive theme from scratch or they for some reason did use a css framework I would say amazium would be a better choice Big Grin.
Pages: 1 2 3 4