Skip to content

Instantly share code, notes, and snippets.

@rufo

rufo/content.haml

Created February 1, 2015 16:50
Show Gist options
  • Save rufo/06796994c17fb410686f to your computer and use it in GitHub Desktop.
Save rufo/06796994c17fb410686f to your computer and use it in GitHub Desktop.
Download ZIP
Centered vertical text using flexbox
Raw
content.haml
.container
.header-container
.header
.text Prepress
.cell
%p Content 1
%p There is more content that goes here
%p look at all the content
.cell
%p Content 2
.cell.doublewide
%p Content 3
.container
.header-container
.header
.text Press
.cell
%p Content 1
%p There is more content that goes here
%p so much more content
.cell
%p Content 2
.cell.doublewide
%p Content 3
.container
.header-container
.header
.text Finishing
.cell
%p Content 1
%p There is more content that goes here
.cell
%p Content 2
.cell.doublewide
%p Content 3
Raw
styles.sass
.cell
background-color: #eee
padding: 5px
flex: 1
&.doublewide
flex: 2
.container
display: flex
margin: 3px
.header-container
display: flex
flex-direction: column
justify-content: center
background-color: #ccc
.header
overflow: hidden
width: 1.5em
line-height: 1.5
text-align: center
.text
display: inline-block
white-space: nowrap
transform: translate(0,100%) rotate(-90deg)
transform-origin: 0 0
&:before
float: left
content: ""
margin-top: 100%
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment