-
Notifications
You must be signed in to change notification settings - Fork 1
Checkerboard CSS helper classes
Eric Debelak edited this page Jul 31, 2017
·
1 revision
The theme has an easy flexbox and none flexbox fallback for handling checkerboards.
Here is the markup to use:
<div class='checkerboard-container right'>
<div class='checkerboard-image' style='background:url(http://example.com/background-image.jpg)'></div>
<div class='checkerboard-text'>Your Text</div>
</div>
<div class='checkerboard-container left'>
<div class='checkerboard-image' style='background:url(http://example.com/background-image.jpg)'></div>
<div class='checkerboard-text'>Your Text</div>
</div>
That's it. You don't need to alternate the order of the text or images, just the left
and right
classes on the checkerboard-container
.
The accompanying css is in sass-partials/_checkerboard.sass
:
.flexbox
.checkerboard-container
display: flex
.checkerboard-text
width: 50%
padding: 25px
.checkerboard-image
width: 50%
background-size: cover !important
&.left
.checkerboard-text
order: 0
.checkerboard-image
order: 1
.no-flexbox
.checkerboard-container
float: left
width: 100%
position: relative
.checkerboard-text
width: 50%
padding: 25px
.checkerboard-image
width: 50%
background-size: cover !important
position: absolute
height: 100%
top: 0
&.right
.checkerboard-text
float: right
.checkerboard-image
left: 0
&.left
.checkerboard-text
float: left
.checkerboard-image
right: 0
@media only screen and (max-width: 800px)
.checkerboard-container
display: block !important
.checkerboard-text
width: 100% !important
float: none !important
.checkerboard-image
width: 100% !important
position: relative !important
padding-bottom: 50% !important