Skip to content

Commit a66e463

Browse files
eynceync
authored
Merge pull request #6 from eync/v0.1.4
Updated version v0.1.4 css file splitting
2 parents 944ae24 + 886757f commit a66e463

File tree

6 files changed

+420
-7
lines changed

6 files changed

+420
-7
lines changed

‎README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
Minimalistic Boilerplate
1313
Made in mind of mobile-first orientation.
1414

15-
It's quick and easy to start new projects with Superbro, since it offers many goods of HTML5 and CSS3 out of box. It's small library and supports all new browsers.
15+
It's quick and easy to start new projects with Superbro, since it offers many goods of HTML5 and CSS3 out of box. It's small library and supports all new browser versions.
1616

1717
Visit [Superbro.DEV](https://superbro.dev) for better documentation.
1818

@@ -53,7 +53,7 @@ We can also take advantage of "columns" and "rows" as seen below.
5353
- Remove all PX and replace them with EMs or VHs
5454

5555
## Version
56-
Current version is [0.1.3.](https://github.com/eync/superbro/releases/tag/v0.1.3)
56+
Current version is [0.1.4.](https://github.com/eync/superbro/releases/tag/v0.1.4)
5757

5858
## Examples
5959
Websites created with superbro boilerplate.

‎css/core.css

Lines changed: 305 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,305 @@
1+
/*
2+
* SuperBro version 0.1.4
3+
* Copyright 2019-2021, 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: 13-aug-2021
8+
*/
9+
10+
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,700&display=swap');
11+
@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro&display=swap');
12+
13+
/* && CSS RESET
14+
================================================== */
15+
iframe { border: 0; }
16+
17+
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
18+
margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
19+
20+
body {line-height: 1; }
21+
22+
ol, ul {list-style: none; }
23+
24+
/* ===================================================================================== */
25+
/* ====!! Do not change code below, make your changes/ code in it's own .css file !!==== */
26+
/* ===================================================================================== */
27+
28+
html {
29+
font-family: var(--font-default);
30+
}
31+
32+
body {
33+
font-family: var(--font-main);
34+
background: var(--background-main);
35+
color:var(--default-font-color);
36+
font-size: calc(var(--text-base-value));
37+
line-height: var(--body-line-height);
38+
margin: 0 auto;
39+
padding: 2em;
40+
}
41+
42+
main, .base {
43+
display:block;
44+
margin: 0 auto;
45+
max-width: var(--site-size);
46+
position: relative;
47+
}
48+
49+
/* && Typography setup
50+
=======================*/
51+
h1, h2, h3, h4, h5, h6 {
52+
text-transform: capitalize;
53+
font-weight:700;
54+
line-height: var(--heading-line-height);
55+
}
56+
57+
h1 {font-size: calc(var(--h1) + var(--text-scale-value));}
58+
h2 {font-size: calc(var(--h2) + var(--text-scale-value));}
59+
h3 {font-size: calc(var(--h3) + var(--text-scale-value));}
60+
h4 {font-size: calc(var(--h4) + var(--text-scale-value));}
61+
h5 {font-size: calc(var(--h5) + var(--text-scale-value));}
62+
h6 {font-size: calc(var(--h6) + var(--text-scale-value));}
63+
64+
em {font-style: italic;}
65+
strong {font-weight:700;}
66+
67+
a { color: var(--alink); text-decoration: underline; outline: 0; }
68+
a:hover, a:focus { color: var(--alink-hover); }
69+
a:visited { color: var(--alink-visited); }
70+
a:active { color: var(--alink-active); }
71+
72+
a.button, button, input.button {
73+
display: inline-block;
74+
height: 38px;
75+
padding: 0 30px;
76+
margin: 10px 0;
77+
text-align: center;
78+
font-size: 11px;
79+
font-weight: 700;
80+
line-height: 38px;
81+
letter-spacing: .1rem;
82+
text-transform: uppercase;
83+
text-decoration: none;
84+
white-space: nowrap;
85+
border-radius: 4px;
86+
cursor: pointer;
87+
box-sizing: border-box;
88+
}
89+
90+
button {background-color: var(--primary-button-bg);border: 1px solid var(--primary-button-bdr);color: var(--primary-button);}
91+
button:hover {background-color: var(--primary-button-hover-bg);border-color: var(--primary-button-hover-bdr);color: var(--primary-button-hover);}
92+
93+
a.button{background-color: var(--a-button-bg);border: 1px solid var(--a-button-bdr);color: var(--a-button);}
94+
a.button:active, a.button:visited {color: var(--a-button);}
95+
a.button:hover{background-color: var(--a-button-hover-bg);border-color: var(--a-button-hover-bdr);color: var(--a-button-hover);}
96+
97+
blockquote {
98+
margin-right:6.25em;
99+
}
100+
blockquote p {
101+
padding: 15px;
102+
background: var(--gray-1);
103+
border-radius: 5px;
104+
color: var(--black);
105+
font-size: var(--h5);
106+
font-family: var(--font-alt);
107+
}
108+
blockquote cite {
109+
color: var(--white);
110+
font-style: italic;
111+
font-family: var(--font-alt);
112+
}
113+
blockquote footer {
114+
padding: 1px 10px;
115+
font-size: var(--quotetextsize);
116+
color: var(--white);
117+
font-family: var(--font-alt);
118+
}
119+
120+
blockquote p::before {
121+
content: '\201C ';
122+
font-size: var(--h4);
123+
}
124+
125+
blockquote p::after {
126+
content: ' \201D';
127+
font-size: var(--h4);
128+
}
129+
blockquote cite::before {
130+
content: ', ';
131+
}
132+
133+
code {
134+
border: 1px solid var(--code-background);
135+
background: var(--code-background);
136+
font-size: calc(12px + var(--text-scale-value));
137+
letter-spacing: 1.5px;
138+
width:100%;
139+
height:5em;
140+
display:block;
141+
padding:10px;
142+
white-space: pre;
143+
line-height: 30px;
144+
font-family: var(--font-alt);
145+
overflow: scroll;
146+
}
147+
148+
/* && Forms
149+
=======================*/
150+
input[type="email"],
151+
input[type="number"],
152+
input[type="search"],
153+
input[type="text"],
154+
input[type="tel"],
155+
input[type="url"],
156+
input[type="password"],
157+
textarea,
158+
select {
159+
height: 38px;
160+
padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
161+
background-color: #fff;
162+
border: 1px solid #D1D1D1;
163+
border-radius: 4px;
164+
box-shadow: none;
165+
box-sizing: border-box; }
166+
/* Removes awkward default styles on some inputs for iOS */
167+
input[type="email"],
168+
input[type="number"],
169+
input[type="search"],
170+
input[type="text"],
171+
input[type="tel"],
172+
input[type="url"],
173+
input[type="password"],
174+
textarea {
175+
-webkit-appearance: none;
176+
-moz-appearance: none;
177+
appearance: none; }
178+
textarea {
179+
min-height: 65px;
180+
padding-top: 6px;
181+
padding-bottom: 6px; }
182+
input[type="email"]:focus,
183+
input[type="number"]:focus,
184+
input[type="search"]:focus,
185+
input[type="text"]:focus,
186+
input[type="tel"]:focus,
187+
input[type="url"]:focus,
188+
input[type="password"]:focus,
189+
textarea:focus,
190+
select:focus {
191+
border: 1px solid #33C3F0;
192+
outline: 0; }
193+
label,
194+
legend {
195+
display: block;
196+
margin-bottom: .5rem;
197+
font-weight: 600; }
198+
fieldset {
199+
padding: 0;
200+
border-width: 0; }
201+
input[type="checkbox"],
202+
input[type="radio"] {
203+
display: inline; }
204+
label > .label-body {
205+
display: inline-block;
206+
margin-left: .5rem;
207+
font-weight: normal; }
208+
209+
210+
/* && Tables
211+
=======================*/
212+
th {font-weight:700;}
213+
th,
214+
td {
215+
padding: 12px 15px;
216+
text-align: left;
217+
border-bottom: 1px solid #E1E1E1; }
218+
th:first-child,
219+
td:first-child {
220+
padding-left: 0; }
221+
th:last-child,
222+
td:last-child {
223+
padding-right: 0; }
224+
225+
226+
/* && Menu
227+
=======================*/
228+
.sb-menu{
229+
display:grid;
230+
grid-template-columns: repeat(12, minmax(1em, auto));
231+
width: 100%;
232+
height: 3.5em;
233+
line-height: 3.5em;
234+
text-align: center;
235+
font-family: sans-serif;
236+
background-color: #9c9c9c;
237+
height:100%;
238+
}
239+
.sb-menu .sb-logo {
240+
grid-column-start: 1;
241+
width: auto;
242+
color: var(--default-font-color);
243+
}
244+
.sb-menu .sb-logo p {
245+
font-size: 1.2rem;
246+
font-weight: 700;
247+
padding: 1em 0;
248+
}
249+
.sb-menu nav {
250+
grid-column: span 11;
251+
height: 100%;
252+
justify-self:right;
253+
}
254+
255+
.sb-menu nav ul li {
256+
width: auto;
257+
height: inherit;
258+
padding: 0 3.5em;
259+
color: var(--default-font-color);
260+
display: inline-block;
261+
height:100%
262+
263+
}
264+
.sb-menu nav ul li a {
265+
text-decoration: none;
266+
color: var(--alink-menu);
267+
}
268+
.sb-menu nav ul li a:hover {
269+
color: var(--alink-menu-hover);
270+
}
271+
.sb-menu nav ul li a.active {
272+
color: var(--alink-menu-active);
273+
}
274+
/* && Status
275+
=======================*/
276+
div.sb-status {
277+
padding: 15px;
278+
margin: 15px;
279+
background-color: var(--color-default);
280+
border-radius: 5px;
281+
color: var(--white);
282+
border-color: var(--color-default-border);
283+
border-style: solid;
284+
border-width: 1px;
285+
font-size: var(--h5);
286+
font-family: var(--font-alt);
287+
}
288+
div.sb-status.success {
289+
background-color: var(--color-success);
290+
color: var(--black-alt);
291+
border-color: var(--color-success-border);
292+
}
293+
div.sb-status.warning {
294+
background-color: var(--color-warning);
295+
color: var(--black-alt);
296+
border-color: var(--color-warning-border);
297+
}
298+
div.sb-status.error {
299+
background-color: var(--color-error);
300+
color: var(--white);
301+
border-color: var(--color-error-border);
302+
}
303+
304+
305+
diff --git a/index.html b/index.html

‎css/grid.css

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
/*
2-
* SuperBro version 0.1.3
3-
* Copyright 2019-2020, Sanjiv Rana
2+
* SuperBro version 0.1.4
3+
* Copyright 2019-2021, Sanjiv Rana
44
* www.superbro.dev
55
* Free to use under the MIT license.
66
* http://www.opensource.org/licenses/mit-license.php
7-
* Last update: 02-nov-2020
7+
* Last update: 13-aug-2021
88
*/
99

1010
.grid {grid-gap:15px; display: grid; grid-template-columns: repeat(var(--columns, 12), minmax(1em, 1fr)); grid-column: span 12 ;margin-top:20px;}

0 commit comments

Comments
 (0)