2 CSS objects that will simplify your HTML structure

I haven’t posted anything for almost a year but during that time I’ve learned a lot of useful stuff. Today I’ll share with you two cool things that I use all the time. Split & Join objects will help you building your HTML structure. See demo at the end of article.

Basic settings and helper

1
2
3
4
5
6
7
8
$spacing-unit: 32px;
$breakpoint:   480px;

%clearfix:after {
    content: "";
    display: table;
    clear: both;
}

Split

Classes:

  • split – Base class used to split 2 elements
  • split--table – Option used with .split class to split more elements
  • split--responsive – Makes object responsive
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
.split {
    @extend %clearfix;

    > * {
        float: left;
    }

    > * + * {
        float: right;
    }

    &--table {
        display: table;
        width: 100%;
        table-layout:fixed;
        text-align: center;

        &:after {
            content: none;
        }

        > * {
            float: none;
            display: table-cell;
            vertical-align: middle;
        }

        > :first-child {
            text-align: left;
        }

        > :last-child {
            text-align: right;
        }
    }

    &--responsive {
        @media screen and (max-width: $breakpoint) {
            display: block;
            text-align: center;

            > * {
                float: none;
                display: inline-block;
            }

            > * + * {
                display: block;
                margin-top: $spacing-unit/2;
            }

            > :first-child,
            > :last-child {
                text-align: inherit;
            }
        }
    }
}

Join

Classes:

  • join – Base class used to join multiple elements
  • join--tiny, join--small, join--large – Control spacing between elements
  • join--bottom, join--middle – Controll elements vertical alignment
  • join--force – Remove whitespace between elements using float
  • join--responsive – Makes object responsive
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
.join {
    > * {
        display: inline-block;
        vertical-align: top;
    }

    > * + * {
        margin-left: $spacing-unit;
    }

    &--middle > * { vertical-align: middle; }
    &--bottom > * { vertical-align: bottom; }

    &--tiny  > * + * { margin-left: $spacing-unit/4; }
    &--small > * + * { margin-left: $spacing-unit/2; }
    &--large > * + * { margin-left: $spacing-unit*2; }

    &--force {
        @extend %clearfix;

        > * {
            float: left;
        }
    }

    &--responsive {
        @media screen and (max-width: $breakpoint) {
            text-align: center;

            > * {
                float: none;
                display: inline-block;
            }

            > * + * {
                display: block;
                margin-left: 0;
                margin-top: $spacing-unit/2;
            }
        }
    }
}