Skip to content

Commit

Permalink
Merge branch '1.0'
Browse files Browse the repository at this point in the history
  • Loading branch information
@davejtoews
davejtoews committed Dec 22, 2022
2 parents 3fb3a1a + 980923d commit f5a627a
Show file tree
Hide file tree
Showing 44 changed files with 3,522 additions and 3,179 deletions.
297 changes: 278 additions & 19 deletions README.md
View file

Large diffs are not rendered by default.

15 changes: 9 additions & 6 deletions _index.scss
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
// The order is importent here to avoid errors on compile
@forward 'breakpoints/index';
@forward 'text-sizing/index';
@forward 'proportional-box/index';
@forward 'proportional-text/index';
@forward 'spacing/index';
@forward 'card-pattern/index';
@forward 'scss/breakpoints/index';
@forward 'scss/card-pattern/index';
@forward 'scss/map-math/index';
@forward 'scss/map-slice/index';
@forward 'scss/proportional-box/index';
@forward 'scss/text-defaults/index'; // must come before proportional text
@forward 'scss/proportional-text/index';
@forward 'scss/spacing/index';
@forward 'scss/utility/index';
2 changes: 1 addition & 1 deletion dist/main.js
View file

Large diffs are not rendered by default.

8 changes: 8 additions & 0 deletions docs/demo.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import './js/breakpoints';

document.querySelectorAll('pre code').forEach((block) => {
fetch(block.dataset.src)
.then((response) => response.text())
.then((data) => block.innerHTML = data)
.then(()=> hljs.highlightElement(block));
});
17 changes: 17 additions & 0 deletions docs/demo.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
@use '../index' as derekstrap with (
$base-font-family: ('Raleway', Tacoma, sans-serif),
$base-line-height: 1.8,
$heading-margin-top: 0
);

@use 'scss/breakpoints';
@use 'scss/cards';
@use 'scss/proportional-text';
@use 'scss/spacing';

header#header,
main#main {
max-width: 850px;
margin: 0 auto;
padding: 2rem 1rem;
}
1 change: 1 addition & 0 deletions docs/dist/demo.js
View file

Large diffs are not rendered by default.

8 changes: 8 additions & 0 deletions docs/docker-compose.yml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
version: "3"
services:
web:
image: httpd
volumes:
- ./:/usr/local/apache2/htdocs/
ports:
- "80:80"
141 changes: 141 additions & 0 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Derekstrap Demo</title>
<link rel="icon" type="image/png" sizes="16x16" href="https://evanshunt.com/images/favicon/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://evanshunt.com/images/favicon/favicon-32x32.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/scss.min.js"></script>
</head>
<body>
<header id="header">
<h1>Derekstrap Demo</h1>
<p>Below is a non-exhaustive set of examples for the features in Derekstrap</p>
<nav>
<a href="#breakpoints">Breakpoints</a>
|
<a href="#cards">Cards</a>
|
<a href="#proportional-text">Proportional Text</a>
|
<a href="#spacing">Spacing</a>
<hr>
See the <a href="https://github.com/evanshunt/derekstrap/#derekstrap">full documentation on GitHub</a>
<br>
Preview the default styles on the <a href="kitchen-sink.html">HTML5 Kitchen Sink</a>
</nav>

</header>
<main id="main">
<section>
<div id="breakpoints">
<h2>Breakpoints</h2>
<p>The colour of this text changes depending on screen size.</p>
<p>The largest current breakpoint is: <code id="currentBreakpoint"></code></p>
</div>
<h3>scss</h3>
<pre><code class="language-scss" data-src="scss/breakpoints.scss"></code></pre>
<h3>js</h3>
<pre><code class="language-js" data-src="js/breakpoints.js"></code></pre>
</section>
<hr>
<section>
<div id="cards">
<h2>Cards</h2>
<p>The layout below will have a different column count and different spacing depending on breakpoint.</p>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
<br>
<h3>scss</h3>
<pre><code class="language-scss" data-src="scss/cards.scss"></code></pre>
</section>
<hr>
<section>
<div id="proportional-text">
<h2>Proportional text</h2>
<h3>Auto scaling by view width</h3>
<p>Anything in this section that is sized in em units should resize in scale with the screen width. Resetting at specified breakpoints.</p>
<img src="https://via.placeholder.com/300x150" alt="Placeholder image">
</div>
<pre><code class="language-scss" data-src="scss/proportional-text.scss"></code></pre>
</section>
<hr>
<section>
<div id="spacing">
<h2>Spacing</h2>
<p>Utility classes have been created using Derekstrap's spacing functions to create different spacing combinations.</p>
<div class="wrapper">
<div class="block vertical-padding horizontal-margin">
<div class="inner">
<h3><code>.vertical-padding.horizontal-margin</code></h3>
</div>
</div>
<hr>
<div class="block vertical-margin left-padding">
<div class="inner">
<h3><code>.vertical-margin.left-padding</code></h3>
</div>
</div>
<hr>
<div class="block top-padding right-margin">
<div class="inner">
<h3><code>.top-padding.right-margin</code></h3>
</div>
</div>
<hr>
<div class="block bottom-margin horizontal-padding">
<div class="inner">
<h3><code>.bottom-margin.horizontal-padding</code></h3>
</div>
</div>
<hr>
<div class="block vertical-margin horizontal-padding">
<div class="inner">
<h3><code>.vertical-margin.horizontal-padding</code></h3>
</div>
</div>
<hr>
<div class="block vertical-margin left-margin">
<div class="inner">
<h3><code>.vertical-margin.left-margin</code></h3>
</div>
</div>
<hr>
<div class="block bottom-margin horizontal-margin">
<div class="inner">
<h3><code>.bottom-margin.horizontal-margin</code></h3>
</div>
</div>
<hr>
<div class="block top-margin right-padding">
<div class="inner">
<h3><code>.top-margin.right-padding</code></h3>
</div>
</div>
</div>
</div>
<pre><code class="language-scss" data-src="scss/spacing.scss"></code></pre>
</section>
</main>
<script src="dist/demo.js"></script>
</body>
</html>
17 changes: 17 additions & 0 deletions docs/js/breakpoints.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
// In your project, write
// import breakpointList from '../styles/main.scss';
// import { Breakpoints } from '@evanshunt/derekstrap';
import breakpointList from '../demo.scss';
import { Breakpoints } from '../../src/index';

Breakpoints.init(breakpointList);

const currentBreakpoint = document.querySelector('#currentBreakpoint');

if (currentBreakpoint) {
currentBreakpoint.innerHTML = Breakpoints.getCurrent();

window.addEventListener('breakpointChange', (event) => {
currentBreakpoint.innerHTML = event.detail.breakpoint;
});
}
Loading

0 comments on commit f5a627a

Please sign in to comment.