Double-click this headline to edit the text.
Helper classes to achieve the perfect layout
Super centered
Easily center anything with a single class
o-super-centered
Flex cards
For the parent, apply class o-flex-cards. Children can stretch, or not, and are available in 3 sizes matching reading content sizes.
Not stretching
o-flex-card-1
o-flex-card-1
o-flex-card-1
Stretching
o-flex-card-stretch-1
o-flex-card-stretch-1
o-flex-card-stretch-1
Available in 3 sizes
o-flex-card-1
o-flex-card-2
o-flex-card-3
o-flex-card-stretch-1
o-flex-card-stretch-2
o-flex-card-stretch-3
Sidebars
Apply class o-left-sidebar-{1-3} or o-right-sidebar-{1-3} to the parent. Add 2 children divs, and you are ready to go.
Left Sidebar
Right Sidebar
The Stack
Apply class o-stack to the parent, Then add the 3 children divs.
This is the typical layout for an app with a menu bar and a status bar.
The header height adapts to fit the content
Let's rry with two rows.
Let's rry with two rows.
The content div uses all space available between top and bottom divs.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In iaculis nunc sed augue lacus viverra. Molestie at elementum eu facilisis sed odio. Pellentesque adipiscing commodo elit at imperdiet dui accumsan sit amet. Nisl purus in mollis nunc. Sapien eget mi proin sed libero enim sed faucibus. Neque gravida in fermentum et sollicitudin ac orci phasellus egestas. Praesent elementum facilisis leo vel fringilla est ullamcorper. Id velit ut tortor pretium viverra suspendisse potenti nullam. Semper eget duis at tellus at. Sit amet porttitor eget dolor morbi non. Velit euismod in pellentesque massa placerat duis ultricies. Aliquam ut porttitor leo a diam sollicitudin tempor id. Mattis enim ut tellus elementum sagittis vitae et. Phasellus egestas tellus rutrum tellus. Sit amet nisl purus in mollis nunc sed id semper. Felis donec et odio pellentesque diam volutpat commodo sed. Posuere ac ut consequat semper viverra nam.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In iaculis nunc sed augue lacus viverra. Molestie at elementum eu facilisis sed odio. Pellentesque adipiscing commodo elit at imperdiet dui accumsan sit amet. Nisl purus in mollis nunc. Sapien eget mi proin sed libero enim sed faucibus. Neque gravida in fermentum et sollicitudin ac orci phasellus egestas. Praesent elementum facilisis leo vel fringilla est ullamcorper. Id velit ut tortor pretium viverra suspendisse potenti nullam. Semper eget duis at tellus at. Sit amet porttitor eget dolor morbi non. Velit euismod in pellentesque massa placerat duis ultricies. Aliquam ut porttitor leo a diam sollicitudin tempor id. Mattis enim ut tellus elementum sagittis vitae et. Phasellus egestas tellus rutrum tellus. Sit amet nisl purus in mollis nunc sed id semper. Felis donec et odio pellentesque diam volutpat commodo sed. Posuere ac ut consequat semper viverra nam.
The footer div adapt's to its content height.
The Holy Grail
Apply the class o-holy-grail to the parent, then add the 5 children divs.
This is the typical layout for an app with a header, footer aand left and right sidebars.
The header height adapts to fit the content
Let's rry with two rows.
Let's rry with two rows.
This can be a left menu
The width adapts to its
content
The width adapts to its
content
The content div uses all space available between the surrounding divs.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In iaculis nunc sed augue lacus viverra. Molestie at elementum eu facilisis sed odio. Pellentesque adipiscing commodo elit at imperdiet dui accumsan sit amet. Nisl purus in mollis nunc. Sapien eget mi proin sed libero enim sed faucibus. Neque gravida in fermentum et sollicitudin ac orci phasellus egestas. Praesent elementum facilisis leo vel fringilla est ullamcorper. Id velit ut tortor pretium viverra suspendisse potenti nullam. Semper eget duis at tellus at. Sit amet porttitor eget dolor morbi non. Velit euismod in pellentesque massa placerat duis ultricies. Aliquam ut porttitor leo a diam sollicitudin tempor id. Mattis enim ut tellus elementum sagittis vitae et. Phasellus egestas tellus rutrum tellus. Sit amet nisl purus in mollis nunc sed id semper. Felis donec et odio pellentesque diam volutpat commodo sed. Posuere ac ut consequat semper viverra nam.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In iaculis nunc sed augue lacus viverra. Molestie at elementum eu facilisis sed odio. Pellentesque adipiscing commodo elit at imperdiet dui accumsan sit amet. Nisl purus in mollis nunc. Sapien eget mi proin sed libero enim sed faucibus. Neque gravida in fermentum et sollicitudin ac orci phasellus egestas. Praesent elementum facilisis leo vel fringilla est ullamcorper. Id velit ut tortor pretium viverra suspendisse potenti nullam. Semper eget duis at tellus at. Sit amet porttitor eget dolor morbi non. Velit euismod in pellentesque massa placerat duis ultricies. Aliquam ut porttitor leo a diam sollicitudin tempor id. Mattis enim ut tellus elementum sagittis vitae et. Phasellus egestas tellus rutrum tellus. Sit amet nisl purus in mollis nunc sed id semper. Felis donec et odio pellentesque diam volutpat commodo sed. Posuere ac ut consequat semper viverra nam.
This could be a widgets sidebar
The width adapts to its content
The width adapts to its content
The footer div adapt's to its content height.
The R.A.M.
R.A.M. stands for Repeat Auto Minmax. Oxyprops offers either auto-fill or auto-fit keywords. Not familiar with the difference between auto-fit and auto-fill ? Let's have a look.
o-ram-fill-{1-3}
In this version, the algorithm fills the row with as many columns as it can fit. It will create implicit columns whenever a new column can fit because it is willing to FILL the row with as many columns as it can.
The newly added columns can and may be empty, but they will still occupy a designated space in the row.
The newly added columns can and may be empty, but they will still occupy a designated space in the row.
o-ram-fill-1
I am a card
I am a card
I am a card
o-ram-fill-2
I am a card
I am a card
I am a card
o-ram-fill-3
I am a card
I am a card
I am a card
o-ram-fit-{1-3}
In this version, the algorithm fits the available columns into the space by expanding them so that they take up any available space. The algorithm fills the extra space with extra columns (as with auto-fill ) and then collapses the empty ones.
o-ram-fit-1
I am a card
I am a card
I am a card
o-ram-fit-2
I am a card
I am a card
I am a card
o-ram-fit-3
I am a card
I am a card
I am a card
The fluid R.A.M.
This is an advanced version of the R.A.M. that creates an auto-responsive layout based on your Oxygen page width setting and a given number of columns.
o-ram-{1-12}
This version uses the auto-fit principle seen above. The number you specify in the class is the target number of columns at full page width.
For example, o-ram-6 will create a layout with 6 columns. The columns desired width will be 1/6 of your Oxygen page width (as set in global settings, 1440px as per OxyProps defaults).
If your container is not full page width, the number of columns will be less than specified. o-ram-6 will show 3 columns when applied to a container that is 50% of full page width.
For example, o-ram-6 will create a layout with 6 columns. The columns desired width will be 1/6 of your Oxygen page width (as set in global settings, 1440px as per OxyProps defaults).
If your container is not full page width, the number of columns will be less than specified. o-ram-6 will show 3 columns when applied to a container that is 50% of full page width.
o-ram-6
I am a card
I am a card
I am a card
I am a card
I am a card
I am a card
o-ram-12
I am a card
I am a card
I am a card
I am a card
I am a card
I am a card
I am a card
I am a card
I am a card
I am a card
I am a card
I am a card