Skip to content

Commit 2abb5cf

Browse files
eynceync
committed
update
1 parent e245055 commit 2abb5cf

7 files changed

Lines changed: 419 additions & 225 deletions

File tree

‎css/default.css‎

Lines changed: 0 additions & 64 deletions
This file was deleted.

‎css/grid.css‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
/*
2+
* SuperBro version 0.1.2
3+
* Copyright 2019, Sanjiv Rana
4+
* www.superbro.dev
5+
* Free to use under the MIT license.
6+
* http://www.opensource.org/licenses/mit-license.php
7+
* Last update: 6-jun-2020
8+
*/
9+
10+
.grid {grid-gap:15px; display: grid; grid-template-columns: repeat(var(--columns, 12), minmax(1em, 1fr)); grid-column: span 12 ;margin-top:20px;}
11+
12+
/* ::--:Span e.g. how much space each "item" will take
13+
================================================== */
14+
15+
/* Mobile Hand device sizing */
16+
.span1 { grid-column: span 12 ; grid-row: span 1; width: 100%; }
17+
.span2 { grid-column: span 12 ; grid-row: span 1; width: 100%; }
18+
.span3 { grid-column: span 12 ; grid-row: span 1; width: 100%; }
19+
.span4 { grid-column: span 12 ; grid-row: span 1; width: 100%; }
20+
.span5 { grid-column: span 12 ; grid-row: span 1; width: 100%; }
21+
.span6 { grid-column: span 12 ; grid-row: span 1; width: 100%; }
22+
.span7 { grid-column: span 12 ; grid-row: span 1; width: 100%; }
23+
.span8 { grid-column: span 12 ; grid-row: span 1; width: 100%; }
24+
.span9 { grid-column: span 12 ; grid-row: span 1; width: 100%; }
25+
.span10 { grid-column: span 12; grid-row: span 1; width: 100%; }
26+
.span11 { grid-column: span 12; grid-row: span 1; width: 100%; }
27+
.span12 { grid-column: span 12; grid-row: span 1; width: 100%; }
28+
29+
/* Tablet / other screens */
30+
@media (min-width: 420px) {
31+
.span1 { grid-column: span 12 ; grid-row: span 1; width: 100%; }
32+
.span2 { grid-column: span 12 ; grid-row: span 1; width: 100%; }
33+
.span3 { grid-column: span 12 ; grid-row: span 1; width: 100%; }
34+
.span4 { grid-column: span 12 ; grid-row: span 1; width: 100%; }
35+
.span5 { grid-column: span 12 ; grid-row: span 1; width: 100%; }
36+
.span6 { grid-column: span 12 ; grid-row: span 1; width: 100%; }
37+
.span7 { grid-column: span 12 ; grid-row: span 1; width: 100%; }
38+
.span8 { grid-column: span 12 ; grid-row: span 1; width: 100%; }
39+
.span9 { grid-column: span 12 ; grid-row: span 1; width: 100%; }
40+
.span10 { grid-column: span 12; grid-row: span 1; width: 100%; }
41+
.span11 { grid-column: span 12; grid-row: span 1; width: 100%; }
42+
.span12 { grid-column: span 12; grid-row: span 1; width: 100%; }
43+
}
44+
45+
/* Desktop or larger */
46+
@media (min-width: 960px) {
47+
.span0 { grid-column: span 0 ; grid-row: span 1; width: 100%; }
48+
.span1 { grid-column: span 1 ; grid-row: span 1; width: 100%; }
49+
.span2 { grid-column: span 2 ; grid-row: span 1; width: 100%; }
50+
.span3 { grid-column: span 3 ; grid-row: span 1; width: 100%; }
51+
.span4 { grid-column: span 4 ; grid-row: span 1; width: 100%; }
52+
.span5 { grid-column: span 5 ; grid-row: span 1; width: 100%; }
53+
.span6 { grid-column: span 6 ; grid-row: span 1; width: 100%; }
54+
.span7 { grid-column: span 7 ; grid-row: span 1; width: 100%; }
55+
.span8 { grid-column: span 8 ; grid-row: span 1; width: 100%; }
56+
.span9 { grid-column: span 9 ; grid-row: span 1; width: 100%; }
57+
.span10 { grid-column: span 10; grid-row: span 1; width: 100%; }
58+
.span11 { grid-column: span 11; grid-row: span 1; width: 100%; }
59+
.span12 { grid-column: span 12; grid-row: span 1; width: 100%; }
60+
.row1 { grid-row: span 1; height:100%; }
61+
.row2 { grid-row: span 2; height:100%; }
62+
.row3 { grid-row: span 3; height:100%; }
63+
.row4 { grid-row: span 4; height:100%; }
64+
.row5 { grid-row: span 5; height:100%; }
65+
.row6 { grid-row: span 6; height:100%; }
66+
.row7 { grid-row: span 7; height:100%; }
67+
.row8 { grid-row: span 8; height:100%; }
68+
.row9 { grid-row: span 9; height:100%; }
69+
.row10 { grid-row: span 10; height:100%; }
70+
.row11 { grid-row: span 11; height:100%; }
71+
.row12 { grid-row: span 12; height:100%; }
72+
}
73+
74+
75+
/* GRID UTILITIES - Tools to make grid templating convient */
76+
.tl, .text-left {text-align:left;}
77+
.tr, .text-right {text-align:right;}
78+
.tc, .text-center {text-align:center;}
79+
80+
/* POSITIONING */
81+
.sc, .super-center {display:grid; place-items:center;}
82+
83+
.as, .align-self-center {display:grid;align-self:center;}
84+
.ac, .align-children-center {display:grid;align-items:center;}
85+
86+
.asl, .align-self-start {display:grid;align-self:start;}
87+
.acl, .align-children-start {display:grid;align-items:start;}
88+
89+
.ase, .align-self-end {display:grid;align-self:right;}
90+
.ace, .align-children-end {display:grid;align-items:right;}
91+
92+
.js, .justify-self-center {display:grid;justify-self:center;}
93+
.jc, .justify-children-center {display:grid;justify-items:center;}
94+
95+
.jsl, .justify-self-left {display:grid;justify-self:left;}
96+
.jcl, .justify-children-left {display:grid;justify-items:left;}
97+
98+
.jsr, .justify-self-right {display:grid;justify-self:right;}
99+
.jcr, .justify-children-right {display:grid;justify-items:right;}
100+

‎css/main.css‎

Lines changed: 0 additions & 42 deletions
This file was deleted.

0 commit comments

Comments
 (0)