Skip to content

Commit d863d32

Browse files
carlos-algmscarlos-algms
committed
Implemented flex-grid core classes
1 parent 9183fc1 commit d863d32

File tree

12 files changed

+328
-3
lines changed

12 files changed

+328
-3
lines changed

‎.idea/codeStyles/codeStyleConfig.xml‎

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/dictionaries/Carlos.xml‎

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

‎.idea/inspectionProfiles/Project_Default.xml‎

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

‎examples/example.css‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
main div {
2+
background-color: #EFEFEF;
3+
}
4+
5+
main aside {
6+
outline: 1px solid #CCC;
7+
}
8+
9+
main aside:nth-child(even) {
10+
outline-color: rosybrown;
11+
}
12+
13+
footer {
14+
background: #343A40;
15+
color: #FFF;
16+
min-height: 1.5rem;
17+
}

‎examples/index.html‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>CSS Flex Layout</title>
6+
7+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
8+
<link href="../src/main.css" media="all" type="text/css" rel="stylesheet" />
9+
<link href="./example.css" media="all" type="text/css" rel="stylesheet" />
10+
</head>
11+
<body class="fl-master-template">
12+
13+
<header class="fl-text-center">
14+
<div>
15+
Header
16+
</div>
17+
</header>
18+
19+
<main class="fl-text-center">
20+
<div class="fl-cols-container">
21+
<aside>1</aside>
22+
<aside>2</aside>
23+
<aside>3</aside>
24+
</div>
25+
<div class="fl-cols-container">
26+
<aside>1</aside>
27+
<aside>2</aside>
28+
<aside>3</aside>
29+
<aside>4</aside>
30+
<aside>5</aside>
31+
</div>
32+
33+
<hr />
34+
35+
<div class="fl-3-cols-container fl-gutter-5">
36+
<aside>001</aside>
37+
<aside>002</aside>
38+
<aside>003</aside>
39+
<aside>004</aside>
40+
<aside>005</aside>
41+
<aside>006</aside>
42+
<aside>007</aside>
43+
<aside>008</aside>
44+
<aside>009</aside>
45+
<aside>010</aside>
46+
</div>
47+
48+
</main>
49+
50+
<footer>
51+
<div>footer</div>
52+
</footer>
53+
54+
</body>
55+
</html>

‎package.json‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,10 @@
33
"version": "0.0.1",
44
"license": "MIT",
55
"scripts": {
6-
"prebuild": "stylelint \"src/*.css\" && rimraf dist && mkdirp dist",
6+
"prebuild": "npm run stylelint && rimraf dist && mkdirp dist",
77
"build": "cleancss --level 2 --source-map --format beautify -o dist/main.css src/main.css",
8-
"postbuild": "cleancss --level 2 --source-map --debug -o dist/main.min.css src/main.css"
8+
"postbuild": "cleancss --level 2 --source-map --debug -o dist/main.min.css src/main.css",
9+
"stylelint": "stylelint --fix \"src/*.css\""
910
},
1011
"private": false,
1112
"dependencies": {},
@@ -19,6 +20,9 @@
1920
},
2021
"stylelint": {
2122
"extends": "stylelint-config-standard",
22-
"rules": {}
23+
"rules": {
24+
"color-hex-case": "upper",
25+
"max-empty-lines": 2
26+
}
2327
}
2428
}

‎src/_grid.css‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
.fl-valign {
2+
display: flex;
3+
align-items: center;
4+
}
5+
6+
7+
html,
8+
body,
9+
.fl-rows-container,
10+
[class*="-cols-container"] {
11+
display: flex;
12+
flex-wrap: wrap;
13+
}
14+
15+
16+
html > *,
17+
body > *,
18+
.fl-rows-container > *,
19+
[class*="-cols-container"] > *,
20+
.fl-valign > * {
21+
flex: 1 0 auto;
22+
position: relative;
23+
}
24+
25+
26+
.fl-rows-container {
27+
justify-content: flex-start;
28+
}
29+
30+
31+
[class*="-cols-container"] > * {
32+
flex: 1 1 auto;
33+
}
34+
35+
36+
html,
37+
body,
38+
.fl-rows-container {
39+
flex-direction: column;
40+
}
41+
42+
43+
[class*="-cols-container"] {
44+
flex-direction: row;
45+
}
46+
47+
48+
.fl-col-1 {
49+
flex: 0 0 8.33333333%;
50+
max-width: 8.33333333%;
51+
}
52+
53+
54+
.fl-col-2,
55+
.fl-6-cols-container > * {
56+
flex: 0 0 16.66666667%;
57+
max-width: 16.66666667%;
58+
}
59+
60+
61+
.fl-col-3,
62+
.fl-4-cols-container > * {
63+
flex: 0 0 25%;
64+
max-width: 25%;
65+
}
66+
67+
68+
.fl-col-4,
69+
.fl-3-cols-container > * {
70+
flex: 0 0 33.33333333%;
71+
max-width: 33.33333333%;
72+
}
73+
74+
75+
.fl-col-5 {
76+
flex: 0 0 41.66666667%;
77+
max-width: 41.66666667%;
78+
}
79+
80+
81+
.fl-col-6,
82+
.fl-2-cols-container > * {
83+
flex: 0 0 50%;
84+
max-width: 50%;
85+
}
86+
87+
88+
.fl-col-7 {
89+
flex: 0 0 58.33333333%;
90+
max-width: 58.33333333%;
91+
}
92+
93+
94+
.fl-col-8 {
95+
flex: 0 0 66.66666667%;
96+
max-width: 66.66666667%;
97+
}
98+
99+
100+
.fl-col-9 {
101+
flex: 0 0 75%;
102+
max-width: 75%;
103+
}
104+
105+
106+
.fl-col-10 {
107+
flex: 0 0 83.33333333%;
108+
max-width: 83.33333333%;
109+
}
110+
111+
112+
.fl-col-11 {
113+
flex: 0 0 91.66666667%;
114+
max-width: 91.66666667%;
115+
}
116+
117+
118+
.fl-col-12 {
119+
flex: 0 0 100%;
120+
max-width: 100%;
121+
}

‎src/_master-template.css‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
.fl-master-template {
2+
display: flex;
3+
min-height: 100vh;
4+
flex-direction: column;
5+
}
6+
7+
8+
.fl-master-template > * {
9+
flex: 0 1 auto;
10+
min-height: 1.5rem;
11+
}
12+
13+
14+
.fl-master-template__header,
15+
.fl-master-template > header {
16+
min-height: 40px;
17+
}
18+
19+
20+
.fl-master-template__main,
21+
.fl-master-template > main {
22+
flex: 1 0 auto;
23+
display: block;
24+
}

‎src/_typography.css‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
:root {
2+
font-family: var(--font-family-sans-serif);
3+
}
4+
5+
6+
code,
7+
var,
8+
samp,
9+
i,
10+
ruby,
11+
kbd,
12+
rt {
13+
font-family: var(--font-family-monospace);
14+
}
15+
16+
17+
.fl-text-left {
18+
text-align: left !important;
19+
}
20+
21+
22+
.fl-text-right {
23+
text-align: right !important;
24+
}
25+
26+
27+
.fl-text-center {
28+
text-align: center !important;
29+
}
30+
31+
32+
.fl-text-justify {
33+
text-align: justify !important;
34+
}

‎src/_variables.css‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
:root {
2+
--blue: #007BFF;
3+
--indigo: #6610F2;
4+
--purple: #6F42C1;
5+
--pink: #E83E8C;
6+
--red: #DC3545;
7+
--orange: #FD7E14;
8+
--yellow: #FFC107;
9+
--green: #28A745;
10+
--teal: #20C997;
11+
--cyan: #17A2B8;
12+
--white: #FFF;
13+
--gray: #6C757D;
14+
--gray-dark: #343A40;
15+
--primary: #007BFF;
16+
--secondary: #6C757D;
17+
--success: #28A745;
18+
--info: #17A2B8;
19+
--warning: #FFC107;
20+
--danger: #DC3545;
21+
--light: #F8F9FA;
22+
--dark: #343A40;
23+
--breakpoint-xs: 0;
24+
--breakpoint-sm: 576px;
25+
--breakpoint-md: 768px;
26+
--breakpoint-lg: 992px;
27+
--breakpoint-xl: 1200px;
28+
--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
29+
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
30+
}

0 commit comments

Comments
 (0)