Flexboxes for Responsive Spacing & Sizing
1
@Jacob @kisuka
This will of course not work for <= IE8, but flex workarounds are easy and can most often be done just with CSS.
Flexboxes can be used to achieve the spacing desired between left and right sides in post, news and content row headers by using these two lines on the header elements:
You can then have the left side of headers automatically trimmed via ellipsis with:
In this way you no longer have to specify percentages on inline-blocks (and reset spacing for them) that could lead to possible breakage when the site is resized.
Additionally, you could convert Content Rows into flexboxes to make them completely responsive in relation to preview image size, with automatic vertical spacing between the Content Meta header and rows. Below is an example image of the kind of exactness you can expect from this method, as well as a link to an archive containing a mockup .
Change the width of the preview images to see it in action, may also want to remove the fixed sizing on body. An added benefit to using Flexboxes is that there's a hell of a lot you can do with them in the way of responsive design without a plethora of media queries. In fact, a web design company I regularly do bits of work for here and there has begun using them as exclusive replacements for blocks to create responsive designs, and it works wonderfully.
This will of course not work for <= IE8, but flex workarounds are easy and can most often be done just with CSS.
Flexboxes can be used to achieve the spacing desired between left and right sides in post, news and content row headers by using these two lines on the header elements:
.header {
display:flex;
justify-content:space-between;
}
display:flex;
justify-content:space-between;
}
You can then have the left side of headers automatically trimmed via ellipsis with:
.left-side {
min-width:0; // Ensures that left side does not expand the container
margin:0 1rem 0 0;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.right-side {
flex-shrink:0; // Ensures date does not shrink to give room for title - whitespace:nowrap; could also be used here.
}
min-width:0; // Ensures that left side does not expand the container
margin:0 1rem 0 0;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.right-side {
flex-shrink:0; // Ensures date does not shrink to give room for title - whitespace:nowrap; could also be used here.
}
In this way you no longer have to specify percentages on inline-blocks (and reset spacing for them) that could lead to possible breakage when the site is resized.
Additionally, you could convert Content Rows into flexboxes to make them completely responsive in relation to preview image size, with automatic vertical spacing between the Content Meta header and rows. Below is an example image of the kind of exactness you can expect from this method, as well as a link to an archive containing a mockup .
Change the width of the preview images to see it in action, may also want to remove the fixed sizing on body. An added benefit to using Flexboxes is that there's a hell of a lot you can do with them in the way of responsive design without a plethora of media queries. In fact, a web design company I regularly do bits of work for here and there has begun using them as exclusive replacements for blocks to create responsive designs, and it works wonderfully.