[INFO] Responsive design
#1
With the recent wiki updates, we can now format wiki pages for better mobile viewing! Kiri added in some new responsive divs, which can be used in conjunction with tables -- something that many pages currently utilize to keep information neatly organized (more comprehensive information about this can be found here).

I've been playing around with this new feature for the past several days and thought it would be worthwhile to start a thread here, since there are a number of things that I've run into that other players might as well.
  1. You cannot box in multi-column tables using >>frame<< or %frame%
    Because the responsive divs and the frame functions are both block items, the frame will only encapsulate whatever grid cell its assigned to and will be cleared at the start of another block. But smaller tables are fine to frame (see example).

  2. Similarly, toggle boxes/links cannot be used to hide multi-column tables.
    But you can still hide specific grids within a table (see example).
    An alternate to the toggle box/link is to use a (:details summary:) tag instead, which is kinda nifty! (see example).

  3. Pages with tables spanning a width below 100% will need to be strategic with their cell widths.
    Div widths are set and classes cannot be personalized, meaning, for example, you can't have a responsive div set 20%. So if you have a page with tables spanning 90% of the page, rather than 100%, your divs will need to fall somewhere within the available width classes (25, 33, 50, 66, 75, or 100) or the cells expand over the table parameters that were previously set.

Now, I am not particularly code-savvy. What I know is only through trial and error and research about particular tags; how code works is largely magical to me, so I 100% welcome corrections and/or expanded information if I'm missing anything (which, let's face it, is likely xD).

Also, if anyone else has found other work-arounds/tips/tricks or is confused/frustrated with the new responsive divs, feel free to chime in!
  Reply
#2
If responsive codes are breaking your brain when trying to understand how they work, this is how to USE the responsive code design step-by-step.

Copy+paste this example into a wiki page! I've referred to each addition of Responsive Code to be a new "Section," and named them by color for better visualization of things and to help you see how things are affected by the code! Play around with it and see how it changes things!
Code:
(:table width=100%:)
>>lfx50 p0 clear<<
(:cellnr width=15% bgcolor=cyan:)
Column 1, Row 1, Section Cyan
(:cell width=35% bgcolor=cyan:)
Column 2, Row 1, Section Cyan
>>lfx50 p0<<
(:cellnr bgcolor=green:)
Column 3, Row 1, Section Green
>>lfx66 p0 clear<<
(:cellnr bgcolor=yellow:)
Column 1, Row 2, Section Yellow
>>lfx33 p0<<
(:cellnr bgcolor=red:)
Column 2, Row 2, Section Red
>>clear<<
>><<
(:tableend:)
Breakdown:



And here's some more stuff that I found x3



  • Tables that have table widths set to less than 100% will notice that gaps between cells will increase as the table's width decreases/is made smaller when using responsive code when viewed on desktop browsers. Examples of what I mean:
    This is a table that is 100% width:
    Code:
    (:table width=100% align=center:)
    >>lfx33 p0 clear<<
    (:cellnr bgcolor=#ccc:)
    stuffs that take up 33% of the table
    >>lfx33 p0<<
    (:cellnr bgcolor=#ccc:)
    stuffs that take up 33% of the table
    >>lfx33 p0<<
    (:cellnr bgcolor=#ccc:)
    stuffs that take up 33% of the table
    >>clear<<
    >><<
    (:tableend:)
    This is a table that is 97% width (notice the larger gaps between the cells despite being the same code other than different table width):
    Code:
    (:table width=97% align=center:)
    >>lfx33 p0 clear<<
    (:cellnr bgcolor=#ccc:)
    stuffs that take up 33% of the table
    >>lfx33 p0<<
    (:cellnr bgcolor=#ccc:)
    stuffs that take up 33% of the table
    >>lfx33 p0<<
    (:cellnr bgcolor=#ccc:)
    stuffs that take up 33% of the table
    >>clear<<
    >><<
    (:tableend:)
    If you don't care, and/or use tables that don't have colored backgrounds that would make this increasing gap as obvious as the above examples, go ahead and use smaller tables widths. However, depending on how you've stacked your table, you may also notice that some rows may not size properly (a row that is 50:50 might be slightly shorter in total page width than a row that is 66:33) when viewed on a desktop browser. This is not particularly noticeable if you're not using colored cells, but, it's something to keep in mind!



  • Make use of div2 and %style% codes for things that were previously within >><< codes. Because the responsive code uses >><< to function, it will not allow for specified code that requires the closing tag ">><<" within itself without breaking/also closing the responsive code.

    This can be used to create color palettes, faux frame codes, specific padding, faux headers with lines beneath them, etc.

    Note: You have to use "div#" to use Div codes on the wiki. You can have Divs within other Divs, so long as the # is different for each. (:div2:) can only be closed by a (:div2end:), (:div3:) by a (:div3end:), etc.
    This WORKS: (divs stretch across the ENTIRE cell)
    Code:
    (:table width=97% align=center:)
    >>lfx66 p0 clear<<
    (:cellnr:)
    stuffs that take up 66% of left side of table

    (:div2 style='padding:5px; background-color:#f9f9f9; border:1px solid #cccccc;':)
    Something that looks like it's within a frame code that has 5px of padding between the text and the edge of the "frame" box.
    (:div2end:)

    other half of stuffs that take up 66% of left side of table

    >>lfx33 p0<<
    (:cellnr:)
    stuffs that take up 33% of right side of table
    >>clear<<
    >><<
    (:tableend:)
    This WORKS: (%style% ONLY stretches across the effected text/items within it)
    Code:
    (:table width=97% align=center:)
    >>lfx66 p0 clear<<
    (:cellnr:)
    stuffs that take up 66% of left side of table

    %padding=5px frame%Something that is framed with 5px of padding between the text and the edge of the "frame" box.%%

    other half of stuffs that take up 66% of left side of table

    >>lfx33 p0<<
    (:cellnr:)
    stuffs that take up 33% of right side of table
    >>clear<<
    >><<
    (:tableend:)
    This BREAKS:
    Code:
    (:table width=97% align=center:)
    >>lfx66 p0 clear<<
    (:cellnr:)
    stuffs that take up 66% of left side of table

    >>padding=5px frame<<
    Something that was SUPPOSED to be framed with 5px of padding between the text and the edge of the "frame" box.
    >><<

    other half of stuffs that take up 66% of left side of table

    >>lfx33 p0<<
    (:cellnr:)
    stuffs that take up 33% of right side of table
    >>clear<<
    >><<
    (:tableend:)
    [[<<]]

  Reply


Forum Jump: