Skip to content

Commit 90a9865

Browse files
author
λhmad λjmi
committed
Created a seperated file for every set of rules
1 parent 9b7067e commit 90a9865

19 files changed

+290
-289
lines changed

‎Gruntfile.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ module.exports = function(grunt){
77

88
watch: {
99
css: {
10-
files: ['css/**/*.scss'],
10+
files: ['*.scss'],
1111
tasks: ['buildcss']
1212
}
1313
},

‎helpers.css

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
.left {
1+
.float-left {
22
float: left; }
33

4-
.right {
4+
.float-right {
55
float: right; }
66

77
.clearfix:before, .clearfix:after {
@@ -119,6 +119,17 @@
119119
.italic {
120120
font-style: italic; }
121121

122+
.truncate {
123+
white-space: nowrap;
124+
overflow: hidden;
125+
text-overflow: ellipsis; }
126+
127+
.break-word {
128+
word-wrap: break-word; }
129+
130+
.no-wrap {
131+
white-space: nowrap !important; }
132+
122133
.white-bg {
123134
background-color: white; }
124135

@@ -164,17 +175,6 @@
164175
.border-left--dark {
165176
border-left: 1px solid #bdc3c7; }
166177

167-
.truncate {
168-
white-space: nowrap;
169-
overflow: hidden;
170-
text-overflow: ellipsis; }
171-
172-
.break-word {
173-
word-wrap: break-word; }
174-
175-
.no-wrap {
176-
white-space: nowrap !important; }
177-
178178
.radius {
179179
border-radius: 3px; }
180180

‎helpers.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎helpers.scss

Lines changed: 16 additions & 274 deletions
Original file line numberDiff line numberDiff line change
@@ -1,277 +1,19 @@
11
@import 'variables';
22
@import 'functions';
33

4-
//
5-
// Floats
6-
7-
.left { float: left; }
8-
.right { float: right; }
9-
10-
11-
//
12-
// Clearfix
13-
14-
.clearfix {
15-
&:before,
16-
&:after {
17-
content: " ";
18-
display: table;
19-
}
20-
21-
&:after { clear: both; }
22-
}
23-
24-
25-
//
26-
// Positions
27-
28-
.fixed { position: fixed; }
29-
.relative { position: relative; }
30-
.absolute { position: absolute; }
31-
32-
33-
//
34-
// Align
35-
36-
.text-left { text-align: left; }
37-
.text-right { text-align: right; }
38-
.text-center { text-align: center; }
39-
.text-just { text-align: justify; }
40-
41-
.align-top { vertical-align: top;}
42-
.align-bottom { vertical-align: bottom;}
43-
.align-middle { vertical-align: middle;}
44-
.align-baseline { vertical-align: baseline; }
45-
46-
47-
//
48-
// Width && Height
49-
50-
.fit { max-width: 100%; }
51-
.full-width { width: 100%; }
52-
.full-min-height { min-height: 100%; }
53-
.full-height { height: 100vh; }
54-
55-
56-
//
57-
// Display
58-
59-
.inline { display: inline; }
60-
.block { display: block; }
61-
.inline-block { display: inline-block; }
62-
.hidden { display: none; }
63-
.flex { display: flex; }
64-
65-
66-
//
67-
// Z-index
68-
69-
.zindex-1 { z-index: 1; }
70-
.zindex-2 { z-index: 2; }
71-
.zindex-3 { z-index: 3; }
72-
.zindex-4 { z-index: 4; }
73-
.zindex-5 { z-index: 5; }
74-
75-
76-
//
77-
// Lists
78-
79-
.no-bullets { list-style: none; }
80-
.bullets-inside { list-style: inside; }
81-
.list-bare {
82-
margin: 0;
83-
padding: 0;
84-
@extend .no-bullets;
85-
}
86-
87-
88-
//
89-
// Color
90-
91-
.white { color: $white; }
92-
.gray { color: $gray; }
93-
94-
.notice { color: $notice; }
95-
.success { color: $success; }
96-
.danger { color: $danger; }
97-
98-
99-
//
100-
// Font
101-
102-
.bold { font-weight: bold; }
103-
.regular { font-weight: bold; }
104-
.italic { font-style: italic; }
105-
106-
107-
//
108-
// Backgrounds
109-
110-
.white-bg { background-color: $white; }
111-
.dark-bg { background-color: $dark; }
112-
.notice-bg { background-color: $notice; }
113-
.success-bg { background-color: $success; }
114-
.danger-bg { background-color: $danger; }
115-
116-
117-
//
118-
// Border
119-
120-
.border-all { border: 1px solid $border-color; }
121-
.border-top { border-top: 1px solid $border-color; }
122-
.border-bottom { border-bottom: 1px solid $border-color; }
123-
.border-right { border-right: 1px solid $border-color; }
124-
.border-left { border-left: 1px solid $border-color; }
125-
126-
.border-all--dark { border: 1px solid $border-color--dark; }
127-
.border-top--dark { border-top: 1px solid $border-color--dark; }
128-
.border-bottom--dark { border-bottom: 1px solid $border-color--dark; }
129-
.border-right--dark { border-right: 1px solid $border-color--dark; }
130-
.border-left--dark { border-left: 1px solid $border-color--dark; }
131-
132-
133-
//
134-
// Text
135-
136-
.truncate {
137-
white-space: nowrap;
138-
overflow: hidden;
139-
text-overflow: ellipsis;
140-
}
141-
142-
.break-word { word-wrap: break-word; }
143-
.no-wrap { white-space: nowrap !important; }
144-
145-
//
146-
// Radius
147-
148-
.radius { border-radius: $base-radius-unit; }
149-
.radius-top { border-radius: $base-radius-unit $base-radius-unit 0 0; }
150-
.radius-right { border-radius: 0 $base-radius-unit $base-radius-unit 0; }
151-
.radius-bottom { border-radius: 0 0 $base-radius-unit $base-radius-unit; }
152-
.radius-left { border-radius: $base-radius-unit 0 0 $base-radius-unit; }
153-
154-
155-
//
156-
// Margin
157-
//
158-
159-
//
160-
// Top Margin
161-
162-
.margin-top-none { margin-top: 0; }
163-
.margin-top-quarter { margin-top: quarter($base-space-unit); }
164-
.margin-top-half { margin-top: halve($base-space-unit); }
165-
.margin-top-one { margin-top: $base-space-unit; }
166-
.margin-top-two { margin-top: double($base-space-unit); }
167-
.margin-top-three { margin-top: threefold($base-space-unit); }
168-
.margin-top-four { margin-top: quadruple($base-space-unit); }
169-
170-
171-
//
172-
// Bottom Margin
173-
174-
.margin-bottom-none { margin-bottom: 0; }
175-
.margin-bottom-quarter { margin-bottom: quarter($base-space-unit); }
176-
.margin-bottom-half { margin-bottom: halve($base-space-unit); }
177-
.margin-bottom-one { margin-bottom: $base-space-unit; }
178-
.margin-bottom-two { margin-bottom: double($base-space-unit); }
179-
.margin-bottom-three { margin-bottom: threefold($base-space-unit); }
180-
.margin-bottom-four { margin-bottom: quadruple($base-space-unit); }
181-
182-
183-
//
184-
// Right Margin
185-
.margin-right-none { margin-right: 0; }
186-
.margin-right-quarter { margin-right: quarter($base-space-unit); }
187-
.margin-right-half { margin-right: halve($base-space-unit); }
188-
.margin-right-one { margin-right: $base-space-unit; }
189-
.margin-right-two { margin-right: double($base-space-unit); }
190-
.margin-right-three { margin-right: threefold($base-space-unit); }
191-
.margin-right-four { margin-right: quadruple($base-space-unit); }
192-
193-
194-
//
195-
// Left Margin
196-
197-
.margin-left-none { margin-left: 0; }
198-
.margin-left-quarter { margin-left: quarter($base-space-unit); }
199-
.margin-left-half { margin-left: halve($base-space-unit); }
200-
.margin-left-one { margin-left: $base-space-unit; }
201-
.margin-left-two { margin-left: double($base-space-unit); }
202-
.margin-left-three { margin-left: threefold($base-space-unit); }
203-
.margin-left-four { margin-left: quadruple($base-space-unit); }
204-
205-
206-
//
207-
// Margin All
208-
.margin-none { margin: 0; }
209-
.margin-quarter { margin: quarter($base-space-unit); }
210-
.margin-half { margin: halve($base-space-unit); }
211-
.margin-one { margin: $base-space-unit; }
212-
.margin-two { margin: double($base-space-unit); }
213-
.margin-three { margin: threefold($base-space-unit); }
214-
.margin-four { margin: quadruple($base-space-unit); }
215-
216-
217-
//
218-
// Padding
219-
//
220-
221-
//
222-
// Top Padding
223-
224-
.padding-top-none { padding-top: 0; }
225-
.padding-top-quarter { padding-top: quarter($base-space-unit); }
226-
.padding-top-halve { padding-top: halve($base-space-unit); }
227-
.padding-top-one { padding-top: $base-space-unit; }
228-
.padding-top-two { padding-top: double($base-space-unit); }
229-
.padding-top-three { padding-top: threefold($base-space-unit); }
230-
.padding-top-four { padding-top: quadruple($base-space-unit); }
231-
232-
233-
//
234-
// Bottom Padding
235-
236-
.padding-bottom-none { padding-bottom: 0; }
237-
.padding-bottom-quarter { padding-bottom: quarter($base-space-unit); }
238-
.padding-bottom-halve { padding-bottom: halve($base-space-unit); }
239-
.padding-bottom-one { padding-bottom: $base-space-unit; }
240-
.padding-bottom-two { padding-bottom: double($base-space-unit); }
241-
.padding-bottom-three { padding-bottom: threefold($base-space-unit); }
242-
.padding-bottom-four { padding-bottom: quadruple($base-space-unit); }
243-
244-
245-
//
246-
// Right Padding
247-
248-
.padding-right-none { padding-right: 0; }
249-
.padding-right-quarter { padding-right: quarter($base-space-unit); }
250-
.padding-right-halve { padding-right: halve($base-space-unit); }
251-
.padding-right-one { padding-right: $base-space-unit; }
252-
.padding-right-two { padding-right: double($base-space-unit); }
253-
.padding-right-three { padding-right: threefold($base-space-unit); }
254-
.padding-right-four { padding-right: quadruple($base-space-unit); }
255-
256-
257-
//
258-
// Left Padding
259-
.padding-left-none { padding-left: 0; }
260-
.padding-left-quarter { padding-left: quarter($base-space-unit); }
261-
.padding-left-halve { padding-left: halve($base-space-unit); }
262-
.padding-left-one { padding-left: $base-space-unit; }
263-
.padding-left-two { padding-left: double($base-space-unit); }
264-
.padding-left-three { padding-left: threefold($base-space-unit); }
265-
.padding-left-four { padding-left: quadruple($base-space-unit); }
266-
267-
268-
//
269-
// Padding All
270-
271-
.padding-none { padding: 0; }
272-
.padding-quarter { padding: quarter($base-space-unit); }
273-
.padding-halve { padding: halve($base-space-unit); }
274-
.padding-one { padding: $base-space-unit; }
275-
.padding-two { padding: double($base-space-unit); }
276-
.padding-three { padding: threefold($base-space-unit); }
277-
.padding-four { padding: quadruple($base-space-unit); }
4+
@import 'helpers/float';
5+
@import 'helpers/clearfix';
6+
@import 'helpers/positions';
7+
@import 'helpers/align';
8+
@import 'helpers/width-height';
9+
@import 'helpers/display';
10+
@import 'helpers/z-index';
11+
@import 'helpers/lists';
12+
@import 'helpers/colors';
13+
@import 'helpers/typography';
14+
@import 'helpers/backgrounds';
15+
@import 'helpers/border';
16+
@import 'helpers/border-radius';
17+
18+
@import 'helpers/margin';
19+
@import 'helpers/padding';

‎helpers/_align.scss

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
//
2+
// Align
3+
//
4+
5+
.text-left { text-align: left; }
6+
.text-right { text-align: right; }
7+
.text-center { text-align: center; }
8+
.text-just { text-align: justify; }
9+
10+
.align-top { vertical-align: top;}
11+
.align-bottom { vertical-align: bottom;}
12+
.align-middle { vertical-align: middle;}
13+
.align-baseline { vertical-align: baseline; }

‎helpers/_backgrounds.scss

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
//
2+
// Background Colors
3+
//
4+
5+
.white-bg { background-color: $white; }
6+
.dark-bg { background-color: $dark; }
7+
.notice-bg { background-color: $notice; }
8+
.success-bg { background-color: $success; }
9+
.danger-bg { background-color: $danger; }

‎helpers/_border-radius.scss

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
//
2+
// Border Radius
3+
//
4+
5+
.radius { border-radius: $base-radius-unit; }
6+
.radius-top { border-radius: $base-radius-unit $base-radius-unit 0 0; }
7+
.radius-right { border-radius: 0 $base-radius-unit $base-radius-unit 0; }
8+
.radius-bottom { border-radius: 0 0 $base-radius-unit $base-radius-unit; }
9+
.radius-left { border-radius: $base-radius-unit 0 0 $base-radius-unit; }

0 commit comments

Comments
 (0)