© 2019 ClickStart – www.clickstart.net
Enhancing HTML5 Responsive Layout and Design
CSS provides numerous options for positioning elements. In this session, we will discuss the pros and
cons of using responsive layouts, float, grid, and flex in MadCap Flare. During the session, I will
share real-world examples of using each approach and share best practices for using them.
Overview
▪ table tag
▪ column properties
▪ float property
▪ Responsive layout
▪ display: table
▪ display: grid
▪ display: flex
Table tag
Table tag - why?
Present "tabular" data
Table tag - pros/cons
Pros
▪ It works
▪ Easy to use
▪ Table styles
Cons
▪ Should not be used for non-tablular data
▪ Requires JS to adapt for mobile devices
Table tag - code
<table>
<tbody>
<tr>
<td>content...</td>
<td>content...</td>
</tr>
</tbody>
</table>
Table tag - advanced options
▪ Table styles - custom row/column styles
▪ jQuery responsive table plugins - www.clickstart.net
Table tag - print
▪ Browsers won't print background colors (by default)
© 2019 ClickStart – www.clickstart.net
Table tag - compatibility
Chrome
IE
Edge
Firefox
Safari
PDF
Word
all
all
all
all
all
YES
YES
column properties
column properties - why?
▪ Multi-column layouts that automatically adjust for small screens
▪ Mimic print designs
column properties - pros/cons
Pros
▪ Easy to use
▪ Automatically responsive
Cons
▪ Display issues in Flare's Editor
▪ Not supported in print targets
▪ Can be difficult to handle overflow
▪ Firefox & Chrome don't support break properties
column properties - code
<div class="exColumns">content...</div>
div.exColumns {
mc-column-count: 3;
column-count: 3;
column-width: 100px;
column-gap: 40px;
column-rule: solid 2px green;
}
column properties - advanced options
▪ column-fill
▪ column-gap
▪ column-rule
▪ column span
column properties - print
▪ Multiple frames in page layout
column properties - compatibility
Chrome
IE
Edge
Firefox
Safari
PDF
Word
4
10 (2012)
12
all
10 (2016)
NO
NO
© 2019 ClickStart – www.clickstart.net
float property
float property - why?
Wrap text around an element (usually an image)
float property - pros/cons
Pros
▪ Easier to use than display property
▪ Wraps well (unlike other approaches)
▪ Bug and fixes are well documented
Cons
▪ Must be cleared
▪ Only left/right (no "center")
▪ Limited source order independence
▪ Out of favor with designers
float property - code
<div class="exFloat">content...</div>
<div class="exFloat">content...</div>
div.exFloat {
float: left;
overflow: auto;
width: 50%;
}
float property - advanced options
Clearfix hack
div.exFloat::after { clear: both; }
float property - print
▪ Converted to a table
float property - compatibility
Chrome
IE
Edge
Firefox
Safari
PDF
Word
all
6 (2001)
all
all
all
YES
NO
Responsive layout
Responsive layout - why?
▪ Side-by-side layouts that automatically "stack" top-to-bottom on smaller screens
Responsive layout - pros/cons
Pros
▪ Built into Flare
▪ Based on Foundation's grid
© 2019 ClickStart – www.clickstart.net
Cons
▪ Setup and 12-column grid can be confusing
▪ Becomes a table in Word targets (and usually not side-by-side)
▪ Source order dependent
Responsive layout - code
<div class="up2">
<div>content...</div>
<div>content...</div>
</div>
div.up2 {
mc-grid-row: true;
margin-left: auto;
margin-right: auto;
}
div.up2::before {
content: ' ';
display: table;
}
div.up2::after {
content: ' ';
display: table;
clear: both;
}
div.up2 > div {
float: left;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-left: .5rem;
padding-right: .5rem;
width:45%;
margin-left: 5%;
}
Responsive layout - advanced options
▪ "cell offset" - margin-left
▪ "row gutter" - padding-left and -right
Responsive layout - print
▪ Usually break if they span across pages
▪ Lose horizontal alignment in Word
Responsive layout - compatibility
Chrome
IE
Edge
Firefox
Safari
PDF
Word
4
8 (2009)
12
3 (2008)
3
Partial
NO
© 2019 ClickStart – www.clickstart.net
display: table
display: table - why?
Vertical centered and/or equal height layouts ("cards")
display: table - pros/cons
Pros
▪ Vertical centering
▪ Can set equal heights
Cons
▪ Usually requires "extra" divs
▪ Overflow can be hard to handle
▪ Source order dependent
display: table - code
<div class="exDisplayTable">
<div class="tableRow">
<div class="tableCol">content...</div>
<div class="tableCol">content...</div>
</div>
</div>
div.exDisplayTable { display: table; }
div.tableRow { display:table-row; }
div.tableCol { display:table-cell; }
display: table - advanced option
▪ vertical-align: middle
display: table - print
▪ Lose horizontal alignment in Word
display: table - compatibility
Chrome
IE
Edge
Firefox
Safari
PDF
Word
4
8 (2009)
12
3 (2008)
3
YES
YES
display: flex
display: flex - why?
▪ Allow the container to alter its child items’ width, height, and order to best fill the available
space
▪ Content first
display: flex - pros/cons
Pros
▪ Considered "the future" of CSS layout
▪ Source order independent
▪ Vertical centering and equal heights
© 2019 ClickStart – www.clickstart.net
Cons
▪ Poor PDF/Word support
▪ Not supported in Flare's Editor
display: flex - code
<div class="exDisplayFlex">
<div class="box">content...</div>
<div class="box">content...</div>
</div>
div.exDisplayFlex {
display: flex;
flex-wrap: nowrap;
}
div.box { width: 300px; }
display: flex - advanced options
▪ align-items
▪ align-self
▪ flex-direction
▪ flex-flow
▪ flex-wrap
▪ justify-content
▪ order
display: flex - print
Use a page layout
display: flex - compatibility
Chrome
IE
Edge
Firefox
Safari
PDF
Word
21 (2012)
10 (2012)
requires ms-
prefix
12 (2015)
requires ms-
prefix
28 (2014)
6
NO
NO
display: grid
display: grid - why?
▪ Divide the screen into multiple sections
▪ Layout first
display: grid - pros/cons
Pros
▪ Two dimensional (columns and rows)
▪ Source order independent
Cons
▪ Poor PDF/Word support
▪ Can be confusing and very complex ("track-size", "fr" units, etc)
© 2019 ClickStart – www.clickstart.net
display: grid - code
<div class="exDisplayGrid">
<div class="box">content...</div>
<div class="box">content...
</div>
div.exDisplayGrid {
display: grid;
grid-template-columns: 300px 300px;
grid-gap: 10px;
}
display: grid - advanced options
▪ inline-grid
▪ grid-template -rows, -columns, and -areas
▪ grid-auto -rows and -columns
▪ grid-row
▪ row-gap
▪ grid-column
▪ column-gap
display: grid - print
▪ Use a page layout
display: grid – compatibility
Chrome
IE
Edge
Firefox
Safari
PDF
Word
57 (2017)
10 (2012)
requires ms-
prefix
12
requires ms-
prefix
52 (2017)
10 (2017)
NO
NO
Sample project
I have created a sample project to demonstrate responsive layouts and designs. You can
download it at:
bit.ly/MW19DeLoach
© 2019 ClickStart – www.clickstart.net
About the presenter
Scott DeLoach is the Founder of ClickStart, where he provides training and
consulting for MadCap Flare, embedded user assistance, JavaScript/jQuery,
CSS, and HTML5. He has been developing browser-based help systems for 25+
years, and he has received four Best in Show awards for his work from STC.
Scott is a certified Flare and Doc-to-Help instructor, and he is the author of
MadCap Flare: The Definitive Guide, CSS to the Point, and HTML5 to the Point. For
more information about Scott's books see www.lulu.com/clickstart.
You can reach Scott at www.clickstart.net or by email at scott@clickstart.net.
