Flexible 12 Column Grid
This is a flexible 12-column grid designed to create overall composition elements for the CUBE CSS stystem. Grid can change on 5 breakpoint: small (-s | 550px), medium (-m | 768px), large (-l | 900px), extra-large (-xl | 1080px) and 2x extra-large (-2xl | 1280px). Grid items are stacked on mobile. The examples below are working through some layout possibilities — there are many layouts possible!
The code below outputs the simple grid-12 pattern below it…
<div class="grid-12 | gap-s | my-xl">
<div class="grid-box sp-12-s sp-6-l | border-2 border__color-gold-400 p-m bg-color-grey-300">A</div>
<div class="grid-box sp-6-s sp-3-l | border-2 border__color-gold-400 p-m bg-color-grey-300">B</div>
<div class="grid-box sp-6-s sp-3-l | border-2 border__color-gold-400 p-m bg-color-grey-300">C<</div>
</div> Note: right now the class of grid-box isn't being used. I am not sure if it will in the future or not.
This is a heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nunc lectus, consectetur quis placerat a, ultricies vel dolor. Fusce id sagittis lectus, lacinia malesuada tellus. Duis rutrum neque ut mattis tempor. Duis quis egestas sem. Mauris posuere risus leo, et commodo dui suscipit eu.
Phasellus nisl sem, dapibus at nibh eu, ultrices tempor arcu. Praesent non tristique nulla. Phasellus pretium eros ac ante lobortis, iaculis laoreet elit venenatis. Nulla facilisi. Sed volutpat libero eget leo sollicitudin finibus.
Nam iaculis, arcu eget aliquam molestie, turpis libero tincidunt leo, ac tincidunt ante felis vitae urna. Integer consequat egestas erat bibendum posuere. Integer dapibus, justo non vehicula laoreet, sem justo efficitur ligula, nec malesuada neque eros in velit.
This is really what you want!
These Happy Days are yours and mine Happy Days. Space. The final frontier. These are the voyages of the Starship Enterprise. The first mate and his Skipper too will do their very best to make the others comfortable in their tropic island nest.
Here's the story of a lovely lady who was bringing up three very lovely girls! In a freak mishap Ranger 3 and its pilot Captain William Buck Rogers.
Believe it or not I'm walking on air. I never thought I could feel so free. The year is 1987 and NASA launches the last of Americas deep space probes.