Css

Met css bedoel ik ook scss en alles wat er mee samen valt.

Een goede bron voor informatie is MDN web docs

Shortening Flexbox content

Submitted by admin on Tue, 05/12/2020 - 16:12

Malika tipped me on this one.

When shortening text in a flexbox  use:

.long-and-truncated {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

When the flexbox has a child (h2) use:

.long-and-truncated-with-child {
    flex: 1;
    h2 {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

 

Tags

CSS Flexible Box Layout

Submitted by admin on Tue, 05/12/2020 - 16:12
CSS Flex is all about having items flow into a container. CSS Flex is bias to working horizontally or vertically. Items can be place in one direction and still wrap to new rows/columns with: flex-wrap: wrap. Space can be divided in several ways using content-justify. Width is set with flex-basis instead of width. The order can be changes with... order. When working in rows, the height of items on the same row will be equal by default, unless you specify align-items with flex-start or flex-end.

Tags

CSS Grid

Submitted by admin on Tue, 03/31/2020 - 16:41

CSS Grid is a grid system that allows you to fill the grid with contents or assign content to a certain cell.

A great resource: https://developer.mozilla.org/en-US/docs/Web/CSS/grid

When setting up a basic layout we can take a basic html and layout the area by their area name. When adding media lines we can go change rows, columns, template-areas and most important the order of the div blocks!

Tags