UNPKG

roobie

Version:

A collection of CSS classes to keep you writing business logic in your HTML. Easily build maintainable web & mobile applications with 100s of pre-built CSS classes at your fingertips.

github.com/kgrewee/roobie

kgrewee/roobie

87 lines (77 loc) • 3.49 kB
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
# Wrap Determine what to do with items when there isn't enough space in the container. The default for all containers is no wrap. ## Classes ```html <div class="wrp">Wrap</div> <div class="wrpr">Wrap reverse</div> <div class="wrp0">No wrap</div> ``` ## Usage ### Wrap <div class="row wrp" style="width: 250px"> <button type="button" class="btn btn-outline">Button 1</button> <button type="button" class="btn btn-outline">Button 2</button> <button type="button" class="btn btn-outline">Button 3</button> <button type="button" class="btn btn-outline">Button 4</button> <button type="button" class="btn btn-outline">Button 5</button> </div> ```html <div class="row wrp" style="width: 250px"> <button type="button" class="btn btn-outline">Button 1</button> <button type="button" class="btn btn-outline">Button 2</button> <button type="button" class="btn btn-outline">Button 3</button> <button type="button" class="btn btn-outline">Button 4</button> <button type="button" class="btn btn-outline">Button 5</button> </div> ``` ### Wrap Reverse <div class="row wrpr" style="width: 250px"> <button type="button" class="btn btn-outline">Button 1</button> <button type="button" class="btn btn-outline">Button 2</button> <button type="button" class="btn btn-outline">Button 3</button> <button type="button" class="btn btn-outline">Button 4</button> <button type="button" class="btn btn-outline">Button 5</button> </div> ```html <div class="row wrpr" style="width: 250px"> <button type="button" class="btn btn-outline">Button 1</button> <button type="button" class="btn btn-outline">Button 2</button> <button type="button" class="btn btn-outline">Button 3</button> <button type="button" class="btn btn-outline">Button 4</button> <button type="button" class="btn btn-outline">Button 5</button> </div> ``` ### No Wrap <div class="row wrp0" style="width: 250px"> <button type="button" class="btn btn-outline">Button 1</button> <button type="button" class="btn btn-outline">Button 2</button> <button type="button" class="btn btn-outline">Button 3</button> <button type="button" class="btn btn-outline">Button 4</button> <button type="button" class="btn btn-outline">Button 5</button> </div> ```html <div class="row wrp0" style="width: 250px"> <button type="button" class="btn btn-outline">Button 1</button> <button type="button" class="btn btn-outline">Button 2</button> <button type="button" class="btn btn-outline">Button 3</button> <button type="button" class="btn btn-outline">Button 4</button> <button type="button" class="btn btn-outline">Button 5</button> </div> ``` ### Default No Wrap <div class="row" style="width: 250px"> <button type="button" class="btn btn-outline">Button 1</button> <button type="button" class="btn btn-outline">Button 2</button> <button type="button" class="btn btn-outline">Button 3</button> <button type="button" class="btn btn-outline">Button 4</button> <button type="button" class="btn btn-outline">Button 5</button> </div> ```html <div class="row" style="width: 250px"> <button type="button" class="btn btn-outline">Button 1</button> <button type="button" class="btn btn-outline">Button 2</button> <button type="button" class="btn btn-outline">Button 3</button> <button type="button" class="btn btn-outline">Button 4</button> <button type="button" class="btn btn-outline">Button 5</button> </div> ```