-
Notifications
You must be signed in to change notification settings - Fork 1
CSS Variables
Dirk Seefeld edited this page May 9, 2025
·
4 revisions
Web components as they are used in these examples protect their styles. But CSS variables can be used to control certain settings from outside. Here is a list of variables used in the block grid elements:
* {
/*colors*/
--wysiwg-highlight-color: #833ad8;
--wysiwg-text-color: #000;
--wysiwg-error-color: #cc0000;
/*all elements*/
--wysiwg-font-family: 'Comic Sans MS';
--wysiwg-line-height-28: 28px;
--wysiwg-line-height-24: 24px;
--wysiwg-line-height-16: 1.2em;
--wysiwg-line-height-14: 1.2em;
--wysiwg-line-height-12: 1.2em;
--wysiwg-line-height-10: 1.2em;
--wysiwg-font-size-24: 24px;
--wysiwg-font-size-16: 16px;
--wysiwg-font-size-14: 14px;
--wysiwg-font-size-12: 12px;
--wysiwg-font-size-10: 10px;
--wysiwg-text-shadow: rgba(0,0,0,0.3) 0.2em 0.3em 0.2em; /* none; */
--wysiwg-text-dark-shadow: rgba(0,0,0,0.9) 0.3em 0.4em 0.3em; /* none; */
--wysiwg-link-hover-color: var(--wysiwg-highlight-color, inherit);
/*headline element*/
--wysiwg-headline-text-shadow: var(--wysiwg-text-shadow, none);
--wysiwg-headline-color: var(--wysiwg-highlight-color, inherit);
--wysiwg-headline-1-font-size: 32px;
--wysiwg-headline-2-font-size: 28px;
--wysiwg-headline-3-font-size: 24px;
--wysiwg-headline-1-line-height: 1.2em;
--wysiwg-headline-2-line-height: 1.2em;
--wysiwg-headline-3-line-height: 1.2em;
--wysiwg-headline-1-margin: 0;
--wysiwg-headline-2-margin: 0;
--wysiwg-headline-3-margin: 0;
/*paragraph element*/
--wysiwg-headline-paragraph-2-margin: 0 0 18px;
--wysiwg-headline-paragraph-3-margin: 0 0 16px;
/*--wysiwg-paragraph-headline-color: var(--wysiwg-highlight-color, inherit);*/
--wysiwg-p-paragraph-margin: 0;
--wysiwg-p-paragraph-padding: 0 0 20px;
--wysiwg-link-text-decoration: underline;
--wysiwg-paragraph-headline-text-shadow: var(--wysiwg-text-dark-shadow, none);
--wysiwg-paragraph-text-shadow: var(--wysiwg-text-dark-shadow, none);
/*cropped-picture element*/
--wysiwg-figcaption-font-style: italic;
--wysiwg-figcaption-rotate-font-style: normal;
--wysiwg-figcaption-text-shadow: var(--wysiwg-text-shadow, none);
--wysiwg-figcaption-color: inherit;
--wysiwg-figcaption-font-style: italic;
--wysiwg-figcaption-font-variant: none;
--wysiwg-figcaption-font-weight: normal;
--wysiwg-figcaption-font-size: 90%;
--wysiwg-figcaption-font-family: inherit;
--wysiwg-figcaption-line-height: 1.2em;
--wysiwg-figcaption-margin: 0;
--wysiwg-figcaption-padding: 10px;
--wysiwg-cropped-image-border-radius: 20px;
--wysiwg-image-border-radius: 10px;
--wysiwg-cropped-image-width: calc(100% - var(--wysiwg-cropped-image-border-radius, 0));
--wysiwg-cropped-image-border-style: dotted;
--wysiwg-cropped-image-border-width: 3;
--wysiwg-cropped-image-border-color: #eeee00;
--wysiwg-cropped-image-box-shadow: rgba(0,0,0,0.3) 5px 10px 10px;
--wysiwg-cropped-image-background-color: transparent;
/*end element*/
/*umbraco*/
--umb-block-grid--areas-column-gap: 10px;
}
For my Demo I have used a little bit more css for the frontend:
* {
--wysiwg-line-height-28: 28px;
--wysiwg-line-height-24: 24px;
--wysiwg-font-size-24: 24px;
--wysiwg-font-size-16: 16px;
--wysiwg-headline-1-font-size: 32px;
--wysiwg-headline-2-font-size: 28px;
--wysiwg-headline-3-font-size: 24px;
--wysiwg-headline-1-line-height: 1.2em;
--wysiwg-headline-2-line-height: 1.2em;
--wysiwg-headline-3-line-height: 1.2em;
--wysiwg-headline-1-margin: 0;
--wysiwg-headline-2-margin: 0;
--wysiwg-headline-3-margin: 0;
--wysiwg-headline-paragraph-2-margin: 0 0 18px;
--wysiwg-headline-paragraph-3-margin: 0 0 16px;
--wysiwg-p-paragraph-margin: 0;
--wysiwg-p-paragraph-padding: 0 0 20px;
--wysiwg-figcaption-font-style: italic;
--wysiwg-font-family: 'Comic Sans MS';
/* Umbraco Block Grid */
--umb-block-grid--areas-column-gap: 10px;
}
body, html {
margin: 0;
}
#canvas {
max-width: 1200px;
margin: 0 auto;
}
.wysiwg {
display: block;
height: 100%;
box-sizing: border-box;
background-color: transparent;
margin: 0;
padding: 0;
font-family: var(--wysiwg-font-family, initial);
}
.wysiwg .umb-block-grid__layout-item {
display: flex;
max-width: 1172px;
}
.wysiwg .umb-block-grid__layout-item h1, .wysiwg .umb-block-grid__layout-item h2, .wysiwg .umb-block-grid__layout-item h3 {
margin: 0;
}
.wysiwg .umb-block-grid__layout-item h1 {
font-size: var(--wysiwg-headline-1-font-size, 32px);
line-height: var(--wysiwg-headline-1-line-height, 1.2em);
}
.wysiwg .umb-block-grid__layout-item h2 {
font-size: var(--wysiwg-headline-2-font-size, 28px);
line-height: var(--wysiwg-headline-2-line-height, 1.2em);
}
.wysiwg .umb-block-grid__layout-item h3 {
font-size: var(--wysiwg-headline-3-font-size, 24px);
line-height: var(--wysiwg-headline-3-line-height, 1.2em);
}
.wysiwg .umb-block-grid__layout-item p, .wysiwg .umb-block-grid__layout-item figure {
font-size: var(--wysiwg-font-size-16);
line-height: var(--wysiwg-line-height-24);
}
.wysiwg .umb-block-grid__layout-item figure {
margin: 0;
padding: 0;
display: block;
}
.wysiwg .umb-block-grid__layout-item figure img {
width: 100%;
display: flex;
height: auto;
}
.wysiwg .umb-block-grid__layout-item figcaption {
font-style: var(--wysiwg-figcaption-font-style, italic);
}
.wysiwg .umb-block-grid__layout-item .left, .wysiwg .umb-block-grid__layout-item .right {
display: flexbox;
}
.wysiwg .umb-block-grid__layout-item .error {
color: red;
font-weight: bold;
text-align: center;
}
.wysiwg .umb-block-grid__layout-item .paragraph {
font-size: var(--wysiwg-font-size-16);
line-height: var(--wysiwg-line-height-24);
}
.wysiwg .umb-block-grid__layout-item .paragraph h2 {
font-size: var(--wysiwg-font-size-24, 24px);
line-height: var(--wysiwg-line-height-28, 28px);
margin: var(--wysiwg-headline-paragraph-2-margin, 0);
}
.wysiwg .umb-block-grid__layout-item .paragraph h3 {
font-size: var(--wysiwg-font-size-16, 16px);
line-height: var(--wysiwg-line-height-24, 24px);
margin: var(--wysiwg-headline-paragraph-3-margin, 0);
}
.wysiwg .umb-block-grid__layout-item .paragraph p {
font-size: var(--wysiwg-font-size-16, 16px);
line-height: var(--wysiwg-line-height-24, 24px);
margin: var(--wysiwg-p-paragraph-margin, 0);
padding: var(--wysiwg-p-paragraph-padding, 0);
}
.umb-block-grid__layout-container {
position: relative;
display: grid;
grid-template-columns: repeat(var(--umb-block-grid--grid-columns, 1), minmax(0, 1fr));
grid-auto-flow: row;
grid-auto-rows: minmax(50px, min-content);
column-gap: var(--umb-block-grid--column-gap, 0);
row-gap: var(--umb-block-grid--row-gap, 0);
}
.umb-block-grid__layout-item {
position: relative;
/* For small devices we scale columnSpan by three, to make everything bigger than 1/3 take full width: */
grid-column-end: span min(calc(var(--umb-block-grid--item-column-span, 1) * 3), var(--umb-block-grid--grid-columns));
grid-row: span var(--umb-block-grid--item-row-span, 1);
}
.umb-block-grid__area-container,
.umb-block-grid__block--view::part(area-container) {
position: relative;
display: grid;
grid-template-columns: repeat( var(--umb-block-grid--area-grid-columns, var(--umb-block-grid--grid-columns, 1)), minmax(0, 1fr) );
grid-auto-flow: row;
grid-auto-rows: minmax(50px, min-content);
column-gap: var(--umb-block-grid--areas-column-gap, 0);
row-gap: var(--umb-block-grid--areas-row-gap, 0);
}
.umb-block-grid__area {
position: relative;
height: 100%;
display: flex;
flex-direction: column;
/* For small devices we scale columnSpan by three, to make everything bigger than 1/3 take full width: */
grid-column-end: span min(calc(var(--umb-block-grid--area-column-span, 1) * 3), var(--umb-block-grid--area-grid-columns));
grid-row: span var(--umb-block-grid--area-row-span, 1);
}
@media (min-width: 1024px) {
.umb-block-grid__layout-item {
grid-column-end: span min(var(--umb-block-grid--item-column-span, 1), var(--umb-block-grid--grid-columns));
}
.umb-block-grid__area {
grid-column-end: span min(var(--umb-block-grid--area-column-span, 1), var(--umb-block-grid--area-grid-columns));
}
}