Skip to content

Commit f5a627a

Browse files
davejtoewsdavejtoews
committed
Merge branch '1.0'
2 parents 3fb3a1a + 980923d commit f5a627a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+3522
-3179
lines changed

‎README.md

+278-19
Large diffs are not rendered by default.

‎_index.scss

+9-6
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
// The order is importent here to avoid errors on compile
2-
@forward 'breakpoints/index';
3-
@forward 'text-sizing/index';
4-
@forward 'proportional-box/index';
5-
@forward 'proportional-text/index';
6-
@forward 'spacing/index';
7-
@forward 'card-pattern/index';
2+
@forward 'scss/breakpoints/index';
3+
@forward 'scss/card-pattern/index';
4+
@forward 'scss/map-math/index';
5+
@forward 'scss/map-slice/index';
6+
@forward 'scss/proportional-box/index';
7+
@forward 'scss/text-defaults/index'; // must come before proportional text
8+
@forward 'scss/proportional-text/index';
9+
@forward 'scss/spacing/index';
10+
@forward 'scss/utility/index';

‎dist/main.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/demo.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import './js/breakpoints';
2+
3+
document.querySelectorAll('pre code').forEach((block) => {
4+
fetch(block.dataset.src)
5+
.then((response) => response.text())
6+
.then((data) => block.innerHTML = data)
7+
.then(()=> hljs.highlightElement(block));
8+
});

‎docs/demo.scss

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
@use '../index' as derekstrap with (
2+
$base-font-family: ('Raleway', Tacoma, sans-serif),
3+
$base-line-height: 1.8,
4+
$heading-margin-top: 0
5+
);
6+
7+
@use 'scss/breakpoints';
8+
@use 'scss/cards';
9+
@use 'scss/proportional-text';
10+
@use 'scss/spacing';
11+
12+
header#header,
13+
main#main {
14+
max-width: 850px;
15+
margin: 0 auto;
16+
padding: 2rem 1rem;
17+
}

‎docs/dist/demo.js

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/docker-compose.yml

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
version: "3"
2+
services:
3+
web:
4+
image: httpd
5+
volumes:
6+
- ./:/usr/local/apache2/htdocs/
7+
ports:
8+
- "80:80"

‎docs/index.html

+141
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Derekstrap Demo</title>
7+
<link rel="icon" type="image/png" sizes="16x16" href="https://evanshunt.com/images/favicon/favicon-16x16.png">
8+
<link rel="icon" type="image/png" sizes="32x32" href="https://evanshunt.com/images/favicon/favicon-32x32.png">
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
10+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
11+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/scss.min.js"></script>
12+
</head>
13+
<body>
14+
<header id="header">
15+
<h1>Derekstrap Demo</h1>
16+
<p>Below is a non-exhaustive set of examples for the features in Derekstrap</p>
17+
<nav>
18+
<a href="#breakpoints">Breakpoints</a>
19+
|
20+
<a href="#cards">Cards</a>
21+
|
22+
<a href="#proportional-text">Proportional Text</a>
23+
|
24+
<a href="#spacing">Spacing</a>
25+
<hr>
26+
See the <a href="https://github.com/evanshunt/derekstrap/#derekstrap">full documentation on GitHub</a>
27+
<br>
28+
Preview the default styles on the <a href="kitchen-sink.html">HTML5 Kitchen Sink</a>
29+
</nav>
30+
31+
</header>
32+
<main id="main">
33+
<section>
34+
<div id="breakpoints">
35+
<h2>Breakpoints</h2>
36+
<p>The colour of this text changes depending on screen size.</p>
37+
<p>The largest current breakpoint is: <code id="currentBreakpoint"></code></p>
38+
</div>
39+
<h3>scss</h3>
40+
<pre><code class="language-scss" data-src="scss/breakpoints.scss"></code></pre>
41+
<h3>js</h3>
42+
<pre><code class="language-js" data-src="js/breakpoints.js"></code></pre>
43+
</section>
44+
<hr>
45+
<section>
46+
<div id="cards">
47+
<h2>Cards</h2>
48+
<p>The layout below will have a different column count and different spacing depending on breakpoint.</p>
49+
<div class="parent">
50+
<div class="child"></div>
51+
<div class="child"></div>
52+
<div class="child"></div>
53+
<div class="child"></div>
54+
<div class="child"></div>
55+
<div class="child"></div>
56+
<div class="child"></div>
57+
<div class="child"></div>
58+
<div class="child"></div>
59+
<div class="child"></div>
60+
<div class="child"></div>
61+
<div class="child"></div>
62+
<div class="child"></div>
63+
<div class="child"></div>
64+
<div class="child"></div>
65+
</div>
66+
</div>
67+
<br>
68+
<h3>scss</h3>
69+
<pre><code class="language-scss" data-src="scss/cards.scss"></code></pre>
70+
</section>
71+
<hr>
72+
<section>
73+
<div id="proportional-text">
74+
<h2>Proportional text</h2>
75+
<h3>Auto scaling by view width</h3>
76+
<p>Anything in this section that is sized in em units should resize in scale with the screen width. Resetting at specified breakpoints.</p>
77+
<img src="https://via.placeholder.com/300x150" alt="Placeholder image">
78+
</div>
79+
<pre><code class="language-scss" data-src="scss/proportional-text.scss"></code></pre>
80+
</section>
81+
<hr>
82+
<section>
83+
<div id="spacing">
84+
<h2>Spacing</h2>
85+
<p>Utility classes have been created using Derekstrap's spacing functions to create different spacing combinations.</p>
86+
<div class="wrapper">
87+
<div class="block vertical-padding horizontal-margin">
88+
<div class="inner">
89+
<h3><code>.vertical-padding.horizontal-margin</code></h3>
90+
</div>
91+
</div>
92+
<hr>
93+
<div class="block vertical-margin left-padding">
94+
<div class="inner">
95+
<h3><code>.vertical-margin.left-padding</code></h3>
96+
</div>
97+
</div>
98+
<hr>
99+
<div class="block top-padding right-margin">
100+
<div class="inner">
101+
<h3><code>.top-padding.right-margin</code></h3>
102+
</div>
103+
</div>
104+
<hr>
105+
<div class="block bottom-margin horizontal-padding">
106+
<div class="inner">
107+
<h3><code>.bottom-margin.horizontal-padding</code></h3>
108+
</div>
109+
</div>
110+
<hr>
111+
<div class="block vertical-margin horizontal-padding">
112+
<div class="inner">
113+
<h3><code>.vertical-margin.horizontal-padding</code></h3>
114+
</div>
115+
</div>
116+
<hr>
117+
<div class="block vertical-margin left-margin">
118+
<div class="inner">
119+
<h3><code>.vertical-margin.left-margin</code></h3>
120+
</div>
121+
</div>
122+
<hr>
123+
<div class="block bottom-margin horizontal-margin">
124+
<div class="inner">
125+
<h3><code>.bottom-margin.horizontal-margin</code></h3>
126+
</div>
127+
</div>
128+
<hr>
129+
<div class="block top-margin right-padding">
130+
<div class="inner">
131+
<h3><code>.top-margin.right-padding</code></h3>
132+
</div>
133+
</div>
134+
</div>
135+
</div>
136+
<pre><code class="language-scss" data-src="scss/spacing.scss"></code></pre>
137+
</section>
138+
</main>
139+
<script src="dist/demo.js"></script>
140+
</body>
141+
</html>

‎docs/js/breakpoints.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
// In your project, write
2+
// import breakpointList from '../styles/main.scss';
3+
// import { Breakpoints } from '@evanshunt/derekstrap';
4+
import breakpointList from '../demo.scss';
5+
import { Breakpoints } from '../../src/index';
6+
7+
Breakpoints.init(breakpointList);
8+
9+
const currentBreakpoint = document.querySelector('#currentBreakpoint');
10+
11+
if (currentBreakpoint) {
12+
currentBreakpoint.innerHTML = Breakpoints.getCurrent();
13+
14+
window.addEventListener('breakpointChange', (event) => {
15+
currentBreakpoint.innerHTML = event.detail.breakpoint;
16+
});
17+
}

0 commit comments

Comments
 (0)