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: 30px;
$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;
}
}
}
}