l_text-columns

Lorem Khaled Ipsum is a major key to success.

To succeed you must believe. When you believe, you will succeed. The key to more success is to have a lot of pillows.

Egg whites, turkey sausage, wheat toast, water.

Of course they don’t want us to eat our breakfast, so we are going to enjoy our breakfast. They key is to have every key, the key to open every door.

It’s on you how you want to live your life. Everyone has a choice. I pick my choice, squeaky clean.

Let’s see what Chef Dee got that they don’t want us to eat.

Life is what you make it, so let’s make it. They key is to have every key, the key to open every door. We don’t see them, we will never see them. The first of the month is coming, we have to get money, we have no choice.

The weather is amazing.

It cost money to eat and they don’t want you to eat. Walk with me through the pathway of more success.

Take this journey with me, Lion! In life there will be road blocks but we will over come it. Let’s see what Chef Dee got that they don’t want us to eat.

Markup
Output
{ } Styles

Expand

Copy

Edit

<div class="u_baseline-grid l_text-columns"> <h1>Lorem Khaled Ipsum is a major key to success.</h1> <p>To succeed you must believe. When you believe, you will succeed. The key to more success is to have a lot of pillows.</p> <h2>Egg whites, turkey sausage, wheat toast, water.</h2> <p>Of course they don’t want us to eat our breakfast, so we are going to enjoy our breakfast. They key is to have every key, the key to open every door.</p> <p>It’s on you how you want to live your life. Everyone has a choice. I pick my choice, squeaky clean.</p> <p>Let’s see what Chef Dee got that they don’t want us to eat.</p> <p>Life is what you make it, so let’s make it. They key is to have every key, the key to open every door. We don’t see them, we will never see them. The first of the month is coming, we have to get money, we have no choice.</p> <h4>The weather is amazing.</h4> <p>It cost money to eat and they don’t want you to eat. Walk with me through the pathway of more success.</p> <p><small>Take this journey with me, Lion! In life there will be road blocks but we will over come it. Let’s see what Chef Dee got that they don’t want us to eat.</p></small> </div>

l_column

.l_column, .l_beam and .l_grid classes handle the majority of layout requirements.

top (default)

middlev

bottom

space-between

middle

right

Markup
Output
{ } Styles

Expand

Copy

Edit

<h4>.l_column, .l_beam and .l_grid classes handle the majority of layout requirements.</h4>  <style> .source .l_columns { display: grid; grid-template-columns: repeat(4,1fr); grid-gap: var(--base-unit); } .l_columns .l_column { border: 1px solid var(--black); min-height: calc(var(--base-unit--b)* 4); } .l_columns .l_column > * { padding: var(--base-unit--ss); margin: 0; } </style> <div class="l_columns"> <div class="l_column"> <p>top <small>(default)</small></p> <p>top <small>(default)</small></p> <p>top <small>(default)</small></p> </div> <div class="l_column middlev"> <p>middlev</p> <p>middlev</p> <p>middlev</p> </div> <div class="l_column bottom"> <p>bottom</p> <p>bottom</p> <p>bottom</p> </div> <div class="l_column space-between"> <p>space-between</p> <p>space-between</p> <p>space-between</p> </div> <div class="l_column middle"> <p>middle</p> <p>middle</p> <p>middle</p> </div> <div class="l_column right"> <p>right</p> <p>right</p> <p>right</p> </div> </div>

Copy

Edit

/* scss/5-layouts/_l_column.scss */ .l_column { display: flex; flex-direction: column; //height: 100%; &.top { // default justify-content: flex-start; } &.middlev { justify-content: center; } &.bottom { justify-content: flex-end; } &.space-between { justify-content: space-between; } &.space-round { justify-content: space-around; } &.middle { align-items: center; } &.right { align-items: flex-end; } }

l_beam

top (default)

middle

right

space-between

middlev

bottom

Markup
Output
{ } Styles

Expand

Copy

Edit

<style> .source .l_beams { display: grid; grid-template-columns: 1fr 1fr; grid-gap: var(--base-unit); } .l_beams .l_beam { border: 1px solid var(--black); height: calc(var(--base-unit--b)* 3); margin-bottom: var(--base-unit--ss); } .l_beams .l_beam > * { padding: var(--base-unit--ss); margin: 0; } </style> <div class="l_beams"> <div class="l_beam"> <p>top <small>(default)</small></p> <p>top <small>(default)</small></p> <p>top <small>(default)</small></p> </div> <div class="l_beam middle"> <p>middle</p> <p>middle</p> <p>middle</p> </div> <div class="l_beam right"> <p>right</p> <p>right</p> <p>right</p> </div> <div class="l_beam space-between"> <p>space-between</p> <p>space-between</p> <p>space-between</p> </div> <div class="l_beam middlev"> <p>middlev</p> <p>middlev</p> <p>middlev</p> </div> <div class="l_beam bottom"> <p>bottom</p> <p>bottom</p> <p>bottom</p> </div> </div>

Copy

Edit

/* scss/5-layouts/_l_beam.scss */ .l_beam { display: flex; width: 100%; &--wrap { flex-wrap: wrap; } &--spaced>* { margin-right: var(--base-unit); } &.middle { justify-content: center; } &.right { justify-content: flex-end; > :last-child { margin-right: 0; } } @media (min-width: $small) { &\@small { display: flex; } &.right\@small { justify-content: flex-end; > :last-child { margin-right: 0; } } } &.space-between { justify-content: space-between; > :last-child { margin-right: 0; } } &.middlev { align-items: center; } &.bottom { align-items: flex-end; //align-content: flex-end; } &:empty { display: none; } }

l_grid

Twin columns all widths l_grid l_grid--twin

Child

Three columns all widths l_grid l_grid--tri

Child

Twin columns@small browser window width l_grid l_grid--twin@small

Child

Triple columns@small browser window width l_grid l_grid--tri@small

Child

Quadruple columns@small browser window width l_grid l_grid--quad

Child

Control grid alignment by adding class modifiers:

top middlev bottom space-between left middle right

For grid child elements, use the utility classes found in the sidebar adjacent:

u_span--2 u_span--3@medium u_span--4@medium u_span--full-width

Copy

Edit

<div class="l_grid l_grid--twin"> <div> <p>Twin columns all widths <code>l_grid l_grid--twin</code></p> <div class="l_grid l_grid--twin"> <div>Child</div> <div>Child</div> <div>Child</div> <div>Child</div> <div>Child</div> </div> </div> <div> <p>Three columns all widths <code>l_grid l_grid--tri</code></p> <div class="l_grid l_grid--tri"> <div>Child</div> <div>Child</div> <div>Child</div> <div>Child</div> <div>Child</div> </div> </div> <div> <p>Twin columns@small browser window width <code>l_grid l_grid--twin@small</code></p> <div class="l_grid l_grid--twin@small"> <div>Child</div> <div>Child</div> <div>Child</div> <div>Child</div> <div>Child</div> </div> </div> <div> <p>Triple columns@small browser window width <code>l_grid l_grid--tri@small</code></p> <div class="l_grid l_grid--tri@small"> <div>Child</div> <div>Child</div> <div>Child</div> <div>Child</div> <div>Child</div> </div> </div> <div class="u_span--2"> <p>Quadruple columns@small browser window width <code>l_grid l_grid--quad</code></p> <div class="l_grid l_grid--quad"> <div>Child</div> <div>Child</div> <div>Child</div> <div>Child</div> <div>Child</div> </div> </div> </div> <p class="u_m--t">Control grid alignment by adding class modifiers:</p> <p><code>top middlev bottom space-between left middle right</code></p> <p class="u_m--t">For grid child elements, use the utility classes found in the sidebar adjacent:</p> <p><code>u_span--2 u_span--3@medium u_span--4@medium u_span--full-width</code></p> <style> .source p + .l_grid > * { border: 1px solid var(--black); padding: var(--base-unit--ss); } </style>

Copy

Edit

/* scss/6-layouts/_l_grid.scss */ .l_grid { display: grid; grid-gap: my-bs(1.5) var(--base-unit); @media (max-width: $small) { display: block; >* { margin-bottom: 10vh; } &--mobile { display: grid; >* { margin-bottom: inherit; } } } &--gap-small { grid-gap: my-bs(.5) var(--base-unit--s); } @media (min-width: $desktop) { &--gap-large { grid-gap: my-bs(3) var(--base-unit--b); } } &--twin { grid-template-columns: 1fr 1fr; } &--tri { grid-template-columns: 1fr 1fr 1fr; } &--quad { grid-template-columns: 1fr 1fr 1fr 1fr; } @media (min-width: $small) { &--twin\@small { grid-template-columns: 1fr 1fr; } &--tri\@small { grid-template-columns: 1fr 1fr 1fr; } &--quad\@small { grid-template-columns: 1fr 1fr 1fr 1fr; } } @media (min-width: $medium) { &--tri\@medium { grid-template-columns: 1fr 1fr 1fr; } &--quad\@medium { grid-template-columns: 1fr 1fr 1fr 1fr; } } @media (min-width: $desktop) { &--tri\@desktop { grid-template-columns: 1fr 1fr 1fr; } &--quad\@desktop { grid-template-columns: 1fr 1fr 1fr 1fr; } } .self-right { justify-self: end; } &.top { // default align-items: start; } &.middlev { align-items: center; align-content: center; } &.bottom { align-items: end; align-content: end; } &.space-between { justify-content: space-between; } &.left { // default justify-content: start; } &.middle { justify-content: center; } &.right { justify-content: end; } @media (min-width: $small) { &.staggered { // grid-template-rows: auto min-content; // grid-auto-flow: dense; .landscape { grid-column: span 2; @media screen and (min-width: $desktop) { &:nth-of-type(odd) { grid-column: span 3; grid-column-end: -1; } &+.landscape { grid-column-end: -1; } } } .square { grid-column: span 2; grid-row: span 2; } .portrait { &:nth-of-type(even) { grid-row: span 2; grid-column: span 2; } &+.portrait { //grid-row: span 3; //grid-column: span 3; } } } } }

l_width-limited

Make your window wide enough and this paragraph will be constrained to the desktop width. Make your window wide enough and this paragraph will be constrained to the desktop width. Make your window wide enough and this paragraph will be constrained to the desktop width.

Markup
Output
{ } Styles

Expand

l_superimposed

Content

Markup
Output
{ } Styles

Expand

Copy

Edit

/* scss/6-layouts/_l_superimposed.scss */ .l_superimposed { position: relative; height: max-content; &.has--image-omitted { @media (max-width: $small) { min-height: my-bs(6); } } &--fold-limited { @media (orientation: landscape) { height: 66vh; } @media (orientation: portrait) { height: 80vh; } } &--fullscreen { width: 100%; height: 100vh; } &--fixed { position: fixed; } &__inner { position: absolute; top: 0; right: 0; bottom: 0; left: 0; &.bg-gradient { background: var(--superimposed-bg); } &.bg-colour { background: var(--thumb-background-colour); //color: var(--black); } color: currentcolor; &--shiftingtiles { color: inherit; @media (max-width: $small) { background-color: var(--background-colour); height: max-content; padding-bottom: my-bs(1); } @media (min-width: $small) { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(4, 1fr); grid-gap: var(--shiftingtiles-gap); >* { background-color: var(--white); padding: my-bs(.5) var(--base-unit--s); margin: calc(var(--shiftingtiles-gap)* -.5); } [itemprop="headline"] { grid-column-start: 2; grid-row-start: 2; display: grid; align-items: end; } [itemprop="description"] { grid-column-start: 3; grid-row-start: 3; } } } } // video { // object-fit: contain; // height: auto; // width: 100%; // // } figure { height: 100%; width: 100%; } [itemprop="description"]>*:last-child { margin-bottom: 0; } }