Image styles

The image styles provide helper classes to align images to the left or right of content. The image will have proper margins around it and on small screens it will no longer float but will show as a block element.

The following classes are available

How to import into your CSS

Import this into your CSS with:

@import 'cacao-css/dist/image/variables.css';
@import 'cacao-css/dist/image/image.css';

You also need to import the image variables at cacao-css/dist/image/variables.css, or set them in your own CSS.

See Import Cacao CSS for more information.

Example usage

Below is an example of floating an image to the right.

<img src="/path/to/image.jpg" width="300" height="250" alt="alt text" class="image-right">

Below is an example of floating an image to the left.

<img src="/path/to/image.jpg" width="300" height="250" alt="alt text" class="image-left">

The variables

:where() is used to give the variables no specificity so that they are easily overriden. See the MDN where() documentation for more information.

The following variables are set.

Variable	Value
--image-bottom-margin	10px
--image-left-margin	20px
--image-max-width	100%
--image-max-width-md	40%
--image-max-width-sm	50%
--image-right-margin	20px

Source CSS

image/image.css

/* =========================================================================== *\
    Image utilities
\* =========================================================================== */

.image-left,
.image-right {
    display: block;
    height: auto;
    margin-bottom: var(--image-bottom-margin);
    max-width: var(--image-max-width);
}

@media (--m-sm) {
    .image-left,
    .image-right {
        display: inline;
        max-width: var(--image-max-width-sm);
    }

    .image-left {
        float: left;
        margin-right: var(--image-right-margin);
    }

    .image-right {
        float: right;
        margin-left: var(--image-left-margin);
    }
}

@media (--m-md) {
    .image-left,
    .image-right {
        max-width: var(--image-max-width-md);
    }
}

Image variables source CSS

image/variables.css

/* =========================================================================== *\
    Image utility variables
\* =========================================================================== */

/* :where() is used to give the variables no specificity so that they are easily overriden. https://developer.mozilla.org/en-US/docs/Web/CSS/:where */

:where(html) {
    --image-bottom-margin: 10px;
    --image-left-margin: 20px;
    --image-max-width: 100%;
    --image-max-width-md: 40%;
    --image-max-width-sm: 50%;
    --image-right-margin: 20px;
}