Advanced level layout in Tips and Tricks
- July 17, 2013, 10:39 a.m.
- |
- Public
Warning: I'm not writing this for the casual user. If you don't know any HTML, you'll probably be happy to skip this one.
I've been asked about allowing HTML table tags. I've now added those tags as valid HTML, but if you just want to use them for layout (as opposed to actual tabular data similar to Excel), there's a better and mobile-friendly way.
I'm using Twitter Bootstrap, which has a responsive grid system designed for layout. For narrow displays, the sections will collapse beneath each other. I haven't actually tried using it within an entry on here yet, so this should be an interesting test.
The grid system is divided into 12 columns. That's handy because it divides evenly into several small numbers to establish your columns. Here's a quick example:
<div class="row-fluid">
<div class="span4"><h5>I am</h5></div>
<div class="span4"><h4>I am</h4></div>
<div class="span4"><h3>I am Superman</h3></div>
</div>
<div class="row-fluid">
<div class="span6"><p>And I can do</p></div>
<div class="span6"><p><strong>Anything</strong></p></div>
</div>
(Note: I would normally indent my HTML for readability but this could cause weird side effects with Markdown)
Which translates to this:
I am
I am
I am Superman
And I can do
Anything
To appreciate the advantage that this has over tables, try shrinking your browser width so it's as skinny as a phone. :)
(NOTE: Mixing Markdown and HTML doesn't seem to work, so I've used pure HTML for my formatting here)
Deleted user ⋅ July 17, 2013
Thank you so much!
simple mind Deleted user ⋅ July 17, 2013
You're welcome, have fun!
cyndication ⋅ July 17, 2013
I'm an HTML girl just because it's what I know. So, thanks. But I remember early on having a Cheat Sheet to help me remember tags until I knew them all by heart. Maybe if I had one now this stuff would be easier for me to make the change......
Everything Good Rebecca cyndication ⋅ March 25, 2014
Funny. I had a cheat sheet early on for HTML too but have finally started using the toolbars so it isn't quite so automatic to do the HTML tags. I was just reading over the tips and started a new cheat sheet for my new Markdown learning.
Deleted user ⋅ July 17, 2013
I know you typed something, but all I can read is wa, wah, wah, wah, wa, wah, wah, wah.
simple mind Deleted user ⋅ July 17, 2013
I said, finish your homework Peppermint Pattie! Hello, is this thing on?
Deleted user simple mind ⋅ July 17, 2013
Bwahaha!
Krud ⋅ July 20, 2013
Hmm. That looks much better in phone ratio. I'm mildly confused as to what the benefit is in a regular screen ratio, though.
simple mind Krud ⋅ July 20, 2013
I think Amygdala wanted to make a picture grid. So it could be useful for that, but still mobile friendly.
Deleted user ⋅ August 31, 2013
How can you post pix and videos? Please?
Deleted user ⋅ October 19, 2013
Hey, I noticed the Bootstrap row-fluid span stuff doesn't seem to work with the new layout. I took it out of my faq on posting images.
simple mind Deleted user ⋅ October 19, 2013
Oh, right. I upgraded to Bootstrap 3 and they did a serious overhaul on some things. There's no longer "row" vs "row-fluid", because responsive is just built into everything. So it's just "row". Same goes with "container-fluid" (if you've used that one), now just "container".