u_filter

Expand

u_contents

Markup
Output
{ } Styles

Expand

u_sticky

Markup
Output
{ } Styles

Expand

u_clamp

Markup
Output
{ } Styles

Expand

u_span

Markup
Output
{ } Styles

Expand

u_debug

Markup
Output
{ } Styles

Expand

Copy

Edit

/* scss/7-utilities/_u_debug.scss */ .u_debug { outline: 1px solid rgba(silver, .5); * { outline: 1px dotted rgba(silver, .5); } &--info{ position: absolute; z-index: 10; top: my-bs(.5); left: var(--base-unit); font-size: .75rem; opacity: 0; transition: opacity .3s linear; .l_superimposed &, .m_thumb & { color: var(--white); } .has--image-omitted & { color: var(--black); } &.raised { margin-top: - my-bs(1); } &.static { position: static; } &__holder { position: relative; } } } *:hover > .u_debug--info { opacity: 1; }

u_m

Markup
Output
{ } Styles

Expand

Copy

Edit

/* scss/7-utilities/_u_m.scss */ .u_m { &--t { margin-top: my-bs(1.5); &0 { margin-top: 0; } &vh { margin-top: 10vh; } } &--tt { margin-top: my-bs(4.5); } &--l { margin-left: var(--base-unit); &0 { margin-left: 0; } } &--r { margin-right: var(--base-unit); &0 { margin-right: 0; } } &--b { margin-bottom: my-bs(1.5); &0 { margin-bottom: 0; } &b { margin-bottom: my-bs(4.5); } &vh { margin-bottom: 10vh; } } }

u_p

Markup
Output
{ } Styles

Expand

Copy

Edit

/* scss/7-utilities/_u_p0.scss */ .u_p { padding: my-bs(1.5) var(--base-unit); &--t { padding-top: my-bs(1.5); &t{ padding-top: my-bs(3); } &0 { padding-top: 0; } &- { padding-top: my-bs(.75); } } &--l { padding-left: var(--base-unit); &- { padding-left: var(--base-unit--s); } &0 { padding-left: 0; } } &--r { padding-right: var(--base-unit); &- { padding-right: var(--base-unit--s); } &0 { padding-right: 0; } } &--b { padding-bottom: my-bs(1.5); &b { padding-bottom: my-bs(3); } &0 { padding-bottom: 0; } &- { padding-bottom: my-bs(.75); } } }

u_hide

Markup
Output
{ } Styles

Expand

Copy

Edit

/* scss/7-utilities/_u_hide.scss */ .u_hide { @media screen and (max-width: $small) { &--to-small { display: none; } } @media screen and (min-width: $small) { &--from-small { display: none; } } @media screen and (max-width: $medium) { &--to-medium { display: none; } } @media screen and (min-width: $medium) { &--from-medium { display: none; } } @media screen and (max-width: $desktop) { &--to-desktop { display: none; } } @media screen and (min-width: $desktop) { &--from-desktop { display: none; } } &--always { display: none; } }

u_fold-limited

Markup
Output
{ } Styles

Expand

u_edit-in-txp

Article title

Markup
Output
{ } Styles

Expand

Copy

Edit

<div style="position: relative; min-height: 2rem"> <h4> Article title <object class="u_edit-in-txp"> <a title="edit this article in Textpattern"><img src="/themes/all-grid/styles/img/u_little-hand.svg" width="16" alt="edit article" /></a> </object> </h4> </div> <figure style="position: relative; float: right;"> <object class="u_edit-in-txp u_edit-in-txp--image"> <a title="edit this image in Textpattern"><img src="/themes/all-grid/styles/img/u_little-eye.svg" width="16" alt="edit image" /></a> </object> <img src="/images/2t.jpg" alt="Placeholder image"> </figure>

Copy

Edit

/* scss/7-utilities/_u_edit-in-txp.scss */ .u_edit-in-txp { position: absolute; z-index: 1; opacity: 1; //text-decoration: none; cursor: pointer; &.static { position: static; display: inline-block; margin-top: -.5em; } img { object-fit: contain; position: relative; top: var(--base-unit--ss); //left: .5ch; } &:hover { filter: invert(100%); } } .u_edit-in-txp--image { top: calc(var(--base-unit)/3); right:var(--base-unit--s); //filter: invert(100%); //opacity: .5; &:hover { filter: invert(100%); // opacity: 1; } }

u_baseline-grid

You smart, you loyal, you a genius. You see that bamboo behind me though, you see that bamboo? Ain’t nothin’ like bamboo. Bless up. You see the hedges, how I got it shaped up? It’s important to shape up your hedges, it’s like getting a haircut, stay fresh. We don’t see them, we will never see them.

The key is to enjoy life, because they don’t want you to enjoy life. I promise you, they don’t want you to jetski, they don’t want you to smile. Congratulations, you played yourself. It’s on you how you want to live your life. Everyone has a choice. I pick my choice, squeaky clean. You see that bamboo behind me though, you see that bamboo? Ain’t nothin’ like bamboo. Bless up. How’s business? Boomin. The ladies always say Khaled you smell good, I use no cologne. Cocoa butter is the key.

Markup
Output
{ } Styles

Expand

Copy

Edit

<div class="u_baseline-grid"> <p>You smart, you loyal, you a genius. You see that bamboo behind me though, you see that bamboo? Ain’t nothin’ like bamboo. Bless up. You see the hedges, how I got it shaped up? It’s important to shape up your hedges, it’s like getting a haircut, stay fresh. We don’t see them, we will never see them.</p> <p>The key is to enjoy life, because they don’t want you to enjoy life. I promise you, they don’t want you to jetski, they don’t want you to smile. Congratulations, you played yourself. It’s on you how you want to live your life. Everyone has a choice. I pick my choice, squeaky clean. You see that bamboo behind me though, you see that bamboo? Ain’t nothin’ like bamboo. Bless up. How’s business? Boomin. The ladies always say Khaled you smell good, I use no cologne. Cocoa butter is the key. </p> </div>

Copy

Edit

/* scss/7-utilities/_u_baseline-grid.scss */ // Baseline Grid Utility .u_baseline-grid { //background: var(--white) repeat url(img/u_baseline-12.svg); // background: transparent; // background-image: url(//basehold.it/24); /* 24px baseline */ //background-image: url(//basehold.it/i/24/0/0/0/0.85); /* with RGBA colour */ // background-repeat: repeat; position: relative; &:after { position: absolute; width: auto; height: auto; z-index: 9999; content: ''; display: block; pointer-events: none; top: 0; right: 0; bottom: 0; left: 0; background: url(//basehold.it/i/24/0/0/0/0.15); background-size: 2px 24px; } &:active:after { display: none; } }