25 changed files with 181 additions and 48 deletions
Split View
Diff Options
-
+8 -0assets/svg/hamburger.svg
-
+2 -2dist/example/components.html
-
+1 -1dist/example/core.html
-
+2 -2dist/example/functions.html
-
+2 -2dist/example/getting-started.html
-
+1 -1dist/example/helpers.html
-
+1 -1dist/example/imprint.html
-
+2 -2dist/example/mixins.html
-
+1 -1dist/example/privacy-policy.html
-
+1 -0dist/example/script.js
-
+1 -1dist/example/styles.css
-
+1 -1dist/example/symbol-defs.svg
-
+1 -0mix-manifest.json
-
+25 -4package-lock.json
-
+3 -1package.json
-
+7 -5src/components/_group.scss
-
+20 -0src/example/components/_button.scss
-
+21 -0src/example/components/_main.scss
-
+4 -4src/example/components/_triangle.scss
-
+10 -0src/example/js/script.js
-
+37 -5src/example/site/_header.scss
-
+4 -0src/example/styles.scss
-
+4 -3src/example/templates/_home.scss
-
+21 -12src/html/page.html.ejs
-
+1 -0webpack.mix.js
+ 8
- 0
assets/svg/hamburger.svg
View File
| @ -0,0 +1,8 @@ | |||
| <!-- Generated by IcoMoon.io --> | |||
| <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> | |||
| <title>hamburger</title> | |||
| <path d="M0 22h4v2h16v-2h4v-4h-24z"></path> | |||
| <path d="M0 10h24v2h-24v-2z"></path> | |||
| <path d="M0 14h24v2h-24v-2z"></path> | |||
| <path d="M22 4v-2h-4v-2h-12v2h-4v2h-2v4h24v-4h-2zM6 6h-2v-2h2v2zM10 6h-2v-2h2v2zM16 6h-2v-2h2v2zM20 6h-2v-2h2v2z"></path> | |||
| </svg> | |||
+ 2
- 2
dist/example/components.html
View File
+ 1
- 1
dist/example/core.html
View File
| @ -1 +1 @@ | |||
| <!doctype html><html lang="en_EN"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><title>Core | Crispy CSS</title><meta name="description" content=""><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="styles.css"></head><body class="page"><header id="header" class="header header--fixed background-color-info"><div class="container"><div class="grid align-center"><div class="col-12 col-md-4"><a href="/" class="text-color-white text-bold"><svg class="icon text-size-mega" alt="Crispy CSS"><use xlink:href="symbol-defs.svg#icon-logo"/></svg> Crispy CSS</a></div><div class="col-12 col-md-8"><nav class="group text-right show"><ul class="group"><li class="group__item"><a href="getting-started.html" class="text-color-white">Getting started!</a></li><li class="group__item"><a href="core.html" class="text-color-white">Core</a></li><li class="group__item"><a href="components.html" class="text-color-white">Components</a></li><li class="group__item"><a href="helpers.html" class="text-color-white">Helpers</a></li><li class="group__item"><a href="mixins.html" class="text-color-white">Mixins</a></li><li class="group__item"><a href="functions.html" class="text-color-white">Functions</a></li></ul></nav></div></div></div></header><main class="container"><div class="grid"><div class="col-12"><header class="header"><h1 class="padding-top-4 padding-bottom-2 text-center">Core</h1></header><h2 class="marginless margin-bottom-1">Normalize</h2><hr class="marginless margin-bottom-2"/><h3 class="h4 margin-top-2">a</h3><a href="#">Link</a><h2 class="marginless margin-top-2 margin-bottom-1">Typography</h2><hr class="marginless margin-bottom-2"/><h3 class="h4 margin-top-2">Heading</h3><div class="h1">Heading h1</div><div class="h2">Heading h2</div><div class="h3">Heading h3</div><div class="h4">Heading h4</div><div class="h5">Heading h5</div><div class="h6">Heading h6</div><h3 class="h4 margin-top-2">abbr</h3><p>Glossier viral occupy mixtape pok pok cornhole, <abbr title="vape affogato hella">vape affogato hella</abbr> knausgaard thundercats</p><h3 class="h4 margin-top-2">blockquote</h3><blockquote>Hoodie kickstarter four loko, pinterest hashtag chambray glossier. Pug before they sold out etsy listicle. Deep v bespoke tacos polaroid, squid flexitarian crucifix messenger bag.</blockquote><h3 class="h4 margin-top-2">hr</h3><hr><h3 class="h4 margin-top-2">paragraph</h3><p>Glossier viral occupy mixtape pok pok.</p><h3 class="h4 margin-top-2">mark</h3><p>Pug before they <mark>four loko</mark> Deep v bespoke</p><h3 class="h4 margin-top-2">list</h3><ul><li>item 1</li><li>item 2<ul><li>child item 1</li><li>child item 2</li></ul></li></ul><ol><li>item 1</li><li>item 2</li></ol><dl><dt>defined title 1</dt><dd>defined item 1</dd></dl></div></div></main><footer class="footer background-color-info margin-top-4 padding-top-3 padding-bottom-3"><div class="container"><div class="grid"><div class="col-12"><div class="text-center"><ul class="group group--hr"><li class="group__item"><a class="text-color-white" href="/imprint.html">Imprint</a></li><li class="group__item"><a class="text-color-white" href="/privacy-policy.html">Privacy Policy</a></li></ul><p class="margin-top-1 margin-bottom-0">Made with Euphorie by Björn Hase, <a class="text-color-white" href="https://tententakelfabrik.de" target="_blank">Tentakelfabrik</a></p></div></div></div></div></footer></body></html> | |||
| <!doctype html><html lang="en_EN"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><title>Core | Crispy CSS</title><meta name="description" content=""><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="styles.css"></head><body class="page"><header class="header header--fixed background-color-info"><div class="container"><div class="grid align-center"><div class="col-10 col-sm-3"><a href="/" class="text-color-white text-bold"><svg class="icon text-size-mega" alt="Crispy CSS"><use xlink:href="symbol-defs.svg#icon-logo"/></svg> Crispy CSS</a></div><div class="col-2 hide-sm text-right"><button id="nav-button" class="button button--transparent text-size-medium"><svg class="icon" alt="Hamburger"><use xlink:href="symbol-defs.svg#icon-hamburger"/></svg></button></div><div id="nav" class="col-sm-9 hide show-sm"><nav class="group text-right show"><ul class="group"><li class="group__item"><a href="getting-started.html">Getting started!</a></li><li class="group__item"><a href="core.html">Core</a></li><li class="group__item"><a href="components.html">Components</a></li><li class="group__item"><a href="helpers.html">Helpers</a></li><li class="group__item"><a href="mixins.html">Mixins</a></li><li class="group__item"><a href="functions.html">Functions</a></li></ul></nav></div></div></div></header><main class="container main"><div class="grid"><div class="col-12"><header class="main__header"><h1 class="main__title padding-bottom-2 text-center">Core</h1></header><h2 class="marginless margin-bottom-1">Normalize</h2><hr class="marginless margin-bottom-2"/><h3 class="h4 margin-top-2">a</h3><a href="#">Link</a><h2 class="marginless margin-top-2 margin-bottom-1">Typography</h2><hr class="marginless margin-bottom-2"/><h3 class="h4 margin-top-2">Heading</h3><div class="h1">Heading h1</div><div class="h2">Heading h2</div><div class="h3">Heading h3</div><div class="h4">Heading h4</div><div class="h5">Heading h5</div><div class="h6">Heading h6</div><h3 class="h4 margin-top-2">abbr</h3><p>Glossier viral occupy mixtape pok pok cornhole, <abbr title="vape affogato hella">vape affogato hella</abbr> knausgaard thundercats</p><h3 class="h4 margin-top-2">blockquote</h3><blockquote>Hoodie kickstarter four loko, pinterest hashtag chambray glossier. Pug before they sold out etsy listicle. Deep v bespoke tacos polaroid, squid flexitarian crucifix messenger bag.</blockquote><h3 class="h4 margin-top-2">hr</h3><hr><h3 class="h4 margin-top-2">paragraph</h3><p>Glossier viral occupy mixtape pok pok.</p><h3 class="h4 margin-top-2">mark</h3><p>Pug before they <mark>four loko</mark> Deep v bespoke</p><h3 class="h4 margin-top-2">list</h3><ul><li>item 1</li><li>item 2<ul><li>child item 1</li><li>child item 2</li></ul></li></ul><ol><li>item 1</li><li>item 2</li></ol><dl><dt>defined title 1</dt><dd>defined item 1</dd></dl></div></div></main><footer class="footer background-color-info margin-top-4 padding-top-3 padding-bottom-3"><div class="container"><div class="grid"><div class="col-12"><div class="text-center"><ul class="group group--hr"><li class="group__item"><a class="text-color-white" href="/imprint.html">Imprint</a></li><li class="group__item"><a class="text-color-white" href="/privacy-policy.html">Privacy Policy</a></li></ul><p class="margin-top-1 margin-bottom-0">Made with Euphorie by Björn Hase, <a class="text-color-white" href="https://tententakelfabrik.de" target="_blank">Tentakelfabrik</a></p></div></div></div></div></footer><script src="script.js"></script></body></html> | |||
+ 2
- 2
dist/example/functions.html
View File
| @ -1,4 +1,4 @@ | |||
| <!doctype html><html lang="en_EN"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><title>Functions | Crispy CSS</title><meta name="description" content=""><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="styles.css"></head><body class="page"><header id="header" class="header header--fixed background-color-info"><div class="container"><div class="grid align-center"><div class="col-12 col-md-4"><a href="/" class="text-color-white text-bold"><svg class="icon text-size-mega" alt="Crispy CSS"><use xlink:href="symbol-defs.svg#icon-logo"/></svg> Crispy CSS</a></div><div class="col-12 col-md-8"><nav class="group text-right show"><ul class="group"><li class="group__item"><a href="getting-started.html" class="text-color-white">Getting started!</a></li><li class="group__item"><a href="core.html" class="text-color-white">Core</a></li><li class="group__item"><a href="components.html" class="text-color-white">Components</a></li><li class="group__item"><a href="helpers.html" class="text-color-white">Helpers</a></li><li class="group__item"><a href="mixins.html" class="text-color-white">Mixins</a></li><li class="group__item"><a href="functions.html" class="text-color-white">Functions</a></li></ul></nav></div></div></div></header><main class="container"><div class="grid"><div class="col-12"><header class="header"><h1 class="padding-top-4 padding-bottom-2 text-center">Functions</h1></header><h3 class="h4 margin-top-0">stripUnit()</h3><h4 class="h6 margin-top-1">Sass:</h4><pre class="code"><code>stripUnit(10px);</code></pre><p>Returns value without unit.</p><h3 class="h4 margin-top-0">zIndex(name)</h3><h4 class="h6 margin-top-1">Sass:</h4><pre class="code"><code>zIndex('modal');</code></pre><p>Returns value from $crispy__z-index.</p><h4 class="h6 margin-top-1">Sass:</h4><pre class="code"><code>$crispy__z-index: ( | |||
| <!doctype html><html lang="en_EN"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><title>Functions | Crispy CSS</title><meta name="description" content=""><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="styles.css"></head><body class="page"><header class="header header--fixed background-color-info"><div class="container"><div class="grid align-center"><div class="col-10 col-sm-3"><a href="/" class="text-color-white text-bold"><svg class="icon text-size-mega" alt="Crispy CSS"><use xlink:href="symbol-defs.svg#icon-logo"/></svg> Crispy CSS</a></div><div class="col-2 hide-sm text-right"><button id="nav-button" class="button button--transparent text-size-medium"><svg class="icon" alt="Hamburger"><use xlink:href="symbol-defs.svg#icon-hamburger"/></svg></button></div><div id="nav" class="col-sm-9 hide show-sm"><nav class="group text-right show"><ul class="group"><li class="group__item"><a href="getting-started.html">Getting started!</a></li><li class="group__item"><a href="core.html">Core</a></li><li class="group__item"><a href="components.html">Components</a></li><li class="group__item"><a href="helpers.html">Helpers</a></li><li class="group__item"><a href="mixins.html">Mixins</a></li><li class="group__item"><a href="functions.html">Functions</a></li></ul></nav></div></div></div></header><main class="container main"><div class="grid"><div class="col-12"><header class="main__header"><h1 class="main__title padding-bottom-2 text-center">Functions</h1></header><h3 class="h4 margin-top-0">stripUnit()</h3><h4 class="h6 margin-top-1">Sass:</h4><pre class="code"><code>stripUnit(10px);</code></pre><p>Returns value without unit.</p><h3 class="h4 margin-top-0">zIndex(name)</h3><h4 class="h6 margin-top-1">Sass:</h4><pre class="code"><code>zIndex('modal');</code></pre><p>Returns value from $crispy__z-index.</p><h4 class="h6 margin-top-1">Sass:</h4><pre class="code"><code>$crispy__z-index: ( | |||
| 'overlay': 90, | |||
| 'modal' : 100 | |||
| );</code></pre></div></div></main><footer class="footer background-color-info margin-top-4 padding-top-3 padding-bottom-3"><div class="container"><div class="grid"><div class="col-12"><div class="text-center"><ul class="group group--hr"><li class="group__item"><a class="text-color-white" href="/imprint.html">Imprint</a></li><li class="group__item"><a class="text-color-white" href="/privacy-policy.html">Privacy Policy</a></li></ul><p class="margin-top-1 margin-bottom-0">Made with Euphorie by Björn Hase, <a class="text-color-white" href="https://tententakelfabrik.de" target="_blank">Tentakelfabrik</a></p></div></div></div></div></footer></body></html> | |||
| );</code></pre></div></div></main><footer class="footer background-color-info margin-top-4 padding-top-3 padding-bottom-3"><div class="container"><div class="grid"><div class="col-12"><div class="text-center"><ul class="group group--hr"><li class="group__item"><a class="text-color-white" href="/imprint.html">Imprint</a></li><li class="group__item"><a class="text-color-white" href="/privacy-policy.html">Privacy Policy</a></li></ul><p class="margin-top-1 margin-bottom-0">Made with Euphorie by Björn Hase, <a class="text-color-white" href="https://tententakelfabrik.de" target="_blank">Tentakelfabrik</a></p></div></div></div></div></footer><script src="script.js"></script></body></html> | |||
+ 2
- 2
dist/example/getting-started.html
View File
+ 1
- 1
dist/example/helpers.html
File diff suppressed because it is too large
View File
+ 1
- 1
dist/example/imprint.html
View File
| @ -1 +1 @@ | |||
| <!doctype html><html lang="en_EN"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><title>Imprint | Crispy CSS</title><meta name="description" content=""><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="styles.css"></head><body class="page"><header id="header" class="header header--fixed background-color-info"><div class="container"><div class="grid align-center"><div class="col-12 col-md-4"><a href="/" class="text-color-white text-bold"><svg class="icon text-size-mega" alt="Crispy CSS"><use xlink:href="symbol-defs.svg#icon-logo"/></svg> Crispy CSS</a></div><div class="col-12 col-md-8"><nav class="group text-right show"><ul class="group"><li class="group__item"><a href="getting-started.html" class="text-color-white">Getting started!</a></li><li class="group__item"><a href="core.html" class="text-color-white">Core</a></li><li class="group__item"><a href="components.html" class="text-color-white">Components</a></li><li class="group__item"><a href="helpers.html" class="text-color-white">Helpers</a></li><li class="group__item"><a href="mixins.html" class="text-color-white">Mixins</a></li><li class="group__item"><a href="functions.html" class="text-color-white">Functions</a></li></ul></nav></div></div></div></header><main class="container"><div class="grid"><div class="col-12"><header class="header"><h1 class="padding-top-4 padding-bottom-2 text-center">Imprint</h1></header></div></div></main><footer class="footer background-color-info margin-top-4 padding-top-3 padding-bottom-3"><div class="container"><div class="grid"><div class="col-12"><div class="text-center"><ul class="group group--hr"><li class="group__item"><a class="text-color-white" href="/imprint.html">Imprint</a></li><li class="group__item"><a class="text-color-white" href="/privacy-policy.html">Privacy Policy</a></li></ul><p class="margin-top-1 margin-bottom-0">Made with Euphorie by Björn Hase, <a class="text-color-white" href="https://tententakelfabrik.de" target="_blank">Tentakelfabrik</a></p></div></div></div></div></footer></body></html> | |||
| <!doctype html><html lang="en_EN"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><title>Imprint | Crispy CSS</title><meta name="description" content=""><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="styles.css"></head><body class="page"><header class="header header--fixed background-color-info"><div class="container"><div class="grid align-center"><div class="col-10 col-sm-3"><a href="/" class="text-color-white text-bold"><svg class="icon text-size-mega" alt="Crispy CSS"><use xlink:href="symbol-defs.svg#icon-logo"/></svg> Crispy CSS</a></div><div class="col-2 hide-sm text-right"><button id="nav-button" class="button button--transparent text-size-medium"><svg class="icon" alt="Hamburger"><use xlink:href="symbol-defs.svg#icon-hamburger"/></svg></button></div><div id="nav" class="col-sm-9 hide show-sm"><nav class="group text-right show"><ul class="group"><li class="group__item"><a href="getting-started.html">Getting started!</a></li><li class="group__item"><a href="core.html">Core</a></li><li class="group__item"><a href="components.html">Components</a></li><li class="group__item"><a href="helpers.html">Helpers</a></li><li class="group__item"><a href="mixins.html">Mixins</a></li><li class="group__item"><a href="functions.html">Functions</a></li></ul></nav></div></div></div></header><main class="container main"><div class="grid"><div class="col-12"><header class="main__header"><h1 class="main__title padding-bottom-2 text-center">Imprint</h1></header></div></div></main><footer class="footer background-color-info margin-top-4 padding-top-3 padding-bottom-3"><div class="container"><div class="grid"><div class="col-12"><div class="text-center"><ul class="group group--hr"><li class="group__item"><a class="text-color-white" href="/imprint.html">Imprint</a></li><li class="group__item"><a class="text-color-white" href="/privacy-policy.html">Privacy Policy</a></li></ul><p class="margin-top-1 margin-bottom-0">Made with Euphorie by Björn Hase, <a class="text-color-white" href="https://tententakelfabrik.de" target="_blank">Tentakelfabrik</a></p></div></div></div></div></footer><script src="script.js"></script></body></html> | |||
+ 2
- 2
dist/example/mixins.html
View File
+ 1
- 1
dist/example/privacy-policy.html
View File
| @ -1 +1 @@ | |||
| <!doctype html><html lang="en_EN"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><title>Privacy Policy | Crispy CSS</title><meta name="description" content=""><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="styles.css"></head><body class="page"><header id="header" class="header header--fixed background-color-info"><div class="container"><div class="grid align-center"><div class="col-12 col-md-4"><a href="/" class="text-color-white text-bold"><svg class="icon text-size-mega" alt="Crispy CSS"><use xlink:href="symbol-defs.svg#icon-logo"/></svg> Crispy CSS</a></div><div class="col-12 col-md-8"><nav class="group text-right show"><ul class="group"><li class="group__item"><a href="getting-started.html" class="text-color-white">Getting started!</a></li><li class="group__item"><a href="core.html" class="text-color-white">Core</a></li><li class="group__item"><a href="components.html" class="text-color-white">Components</a></li><li class="group__item"><a href="helpers.html" class="text-color-white">Helpers</a></li><li class="group__item"><a href="mixins.html" class="text-color-white">Mixins</a></li><li class="group__item"><a href="functions.html" class="text-color-white">Functions</a></li></ul></nav></div></div></div></header><main class="container"><div class="grid"><div class="col-12"><header class="header"><h1 class="padding-top-4 padding-bottom-2 text-center">Privacy Policy</h1></header></div></div></main><footer class="footer background-color-info margin-top-4 padding-top-3 padding-bottom-3"><div class="container"><div class="grid"><div class="col-12"><div class="text-center"><ul class="group group--hr"><li class="group__item"><a class="text-color-white" href="/imprint.html">Imprint</a></li><li class="group__item"><a class="text-color-white" href="/privacy-policy.html">Privacy Policy</a></li></ul><p class="margin-top-1 margin-bottom-0">Made with Euphorie by Björn Hase, <a class="text-color-white" href="https://tententakelfabrik.de" target="_blank">Tentakelfabrik</a></p></div></div></div></div></footer></body></html> | |||
| <!doctype html><html lang="en_EN"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><title>Privacy Policy | Crispy CSS</title><meta name="description" content=""><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="styles.css"></head><body class="page"><header class="header header--fixed background-color-info"><div class="container"><div class="grid align-center"><div class="col-10 col-sm-3"><a href="/" class="text-color-white text-bold"><svg class="icon text-size-mega" alt="Crispy CSS"><use xlink:href="symbol-defs.svg#icon-logo"/></svg> Crispy CSS</a></div><div class="col-2 hide-sm text-right"><button id="nav-button" class="button button--transparent text-size-medium"><svg class="icon" alt="Hamburger"><use xlink:href="symbol-defs.svg#icon-hamburger"/></svg></button></div><div id="nav" class="col-sm-9 hide show-sm"><nav class="group text-right show"><ul class="group"><li class="group__item"><a href="getting-started.html">Getting started!</a></li><li class="group__item"><a href="core.html">Core</a></li><li class="group__item"><a href="components.html">Components</a></li><li class="group__item"><a href="helpers.html">Helpers</a></li><li class="group__item"><a href="mixins.html">Mixins</a></li><li class="group__item"><a href="functions.html">Functions</a></li></ul></nav></div></div></div></header><main class="container main"><div class="grid"><div class="col-12"><header class="main__header"><h1 class="main__title padding-bottom-2 text-center">Privacy Policy</h1></header></div></div></main><footer class="footer background-color-info margin-top-4 padding-top-3 padding-bottom-3"><div class="container"><div class="grid"><div class="col-12"><div class="text-center"><ul class="group group--hr"><li class="group__item"><a class="text-color-white" href="/imprint.html">Imprint</a></li><li class="group__item"><a class="text-color-white" href="/privacy-policy.html">Privacy Policy</a></li></ul><p class="margin-top-1 margin-bottom-0">Made with Euphorie by Björn Hase, <a class="text-color-white" href="https://tententakelfabrik.de" target="_blank">Tentakelfabrik</a></p></div></div></div></div></footer><script src="script.js"></script></body></html> | |||
+ 1
- 0
dist/example/script.js
File diff suppressed because it is too large
View File
+ 1
- 1
dist/example/styles.css
File diff suppressed because it is too large
View File
+ 1
- 1
dist/example/symbol-defs.svg
File diff suppressed because it is too large
View File
+ 1
- 0
mix-manifest.json
View File
+ 25
- 4
package-lock.json
View File
+ 3
- 1
package.json
View File
+ 7
- 5
src/components/_group.scss
View File
+ 20
- 0
src/example/components/_button.scss
View File
| @ -0,0 +1,20 @@ | |||
| /** | |||
| * components: header | |||
| * | |||
| * | |||
| * @author Björn Hase, Tentakelfabrik | |||
| * @license http://opensource.org/licenses/MIT The MIT License | |||
| * @link https://github.com/tentakelfabrik/crispy-css | |||
| * | |||
| */ | |||
| @mixin component__button() { | |||
| .button { | |||
| &--transparent { | |||
| padding: 0; | |||
| margin: 0; | |||
| border: 0; | |||
| background: transparent; | |||
| } | |||
| } | |||
| } | |||
+ 21
- 0
src/example/components/_main.scss
View File
| @ -0,0 +1,21 @@ | |||
| /** | |||
| * components: header | |||
| * | |||
| * | |||
| * @author Björn Hase, Tentakelfabrik | |||
| * @license http://opensource.org/licenses/MIT The MIT License | |||
| * @link https://github.com/tentakelfabrik/crispy-css | |||
| * | |||
| */ | |||
| @mixin component__main() { | |||
| .main { | |||
| &__title { | |||
| margin-top: 80px; | |||
| @include crispy__media-sm() { | |||
| margin-top: 100px; | |||
| } | |||
| } | |||
| } | |||
| } | |||
+ 4
- 4
src/example/components/_triangle.scss
View File
+ 10
- 0
src/example/js/script.js
View File
| @ -0,0 +1,10 @@ | |||
| import $ from 'cash-dom'; | |||
| $(function() { | |||
| const $nav = $('#nav'); | |||
| $('#nav-button').on('click', function() { | |||
| $nav.toggleClass('show'); | |||
| }); | |||
| }); | |||