CSS Variables - idseefeld/Wysiwg.Umbraco.Community.Extensions GitHub Wiki

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:

* {
  --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;
}

Video Demo

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));
    }
}