On Sunday, 18 January 2015 at 17:05:28 UTC, Andrei Alexandrescu
wrote:
On 1/18/15 9:02 AM, aldanor wrote:
This is usually solved by media queries / responsive design /
grid
frameworks, sorry if I'm stating the obvious :) Try resizing
the
commonly used websites and see what happens, e.g. for
ruby-lang you have
at least 3 "versions" which are selected automatically based
on the
current viewport's settings which the browser provides:
http://imgur.com/a/gE38d
E.g. the menus on the left getting folded into one mobile
"button" which
expands them on demand and leaves more space for the actual
content, or
some elements disappearing in smaller viewports altogether
(like the
twitter feed div). This is quite a pain to manage manually
without
having an underlying grid framework.
My understanding is there are various simpler way to do this,
e.g. separate styles for small screen devices, redirection to a
different URL, setting "hidden" to certain DIVs dynamically
etc. etc. As you saying there's no way to do this unless we use
some grid framework I know nothing about and probably need to
learn? -- Andrei
The thing with frameworks is that some designers have put a
considerable amount of time on putting them together, making them
cross-browser compatible, working around various edge cases etc
(and there are many...) -- so that you won't have to. Once you
want something like responsiveness + automatic reflows, things
start getting even more complicated... Not all frameworks are
gigantic like bootstrap/foundation, there's some smaller ones
that just do the grid thing (like 960). (that, or you can always
pull just the bits you want from bootstrap or anything and minify
it). Another point is that if you use the elements the framework
provides (e.g. navbar menu), they would be already nicely
compatible with the framework's grid system. As an example -- try
resizing the width here and see what happens:
http://getbootstrap.com/examples/grid/.
There's also some minimalistic frameworks -- like PureCSS, just
to give an example -- http://purecss.io and
https://github.com/yahoo/pure, where the entire grid system is
just 0.8KB.
