<!-- Default -->
<div class="example js-example example--default">
Incidunt dolor consequatur blanditiis velit. Minima dolor commodi provident. Est qui nobis ipsam consequatur totam et.
</div>
<!-- Large -->
<div class="example js-example example--large">
Quia ut et molestiae ullam sit ex officiis facilis. Quo delectus accusamus rem accusantium enim dolor est aut eum. Dolorem modi voluptas et ea modi est illo et. Quae harum quia. Ut consequatur ducimus dignissimos laudantium illo eum quasi ullam id.
</div>
<div class="example js-example{% if modifiers %} {{ modifiers }}{% endif %}">
{{ text }}
</div>
/* Default */
debug: true
styleguide: true
shared:
breakpoints:
s: 480
m: 640
l: 720
xl: 960
xxl: 1100
xxxl: 1400
custom: '(max-width: 30em)'
fonts:
default:
family: Roboto
fallback: sans-serif
weight: 400
style: normal
fontface: true
file: roboto-regular
site:
lang: en
dir: ltr
title: 'Kalong—Styleguide, v0.0.1-alpha.1'
description: null
themecolor: '#000000'
modifiers: null
globals:
nav:
main:
- href: '#somepage'
label: Somepage
text: >-
Incidunt dolor consequatur blanditiis velit. Minima dolor commodi provident.
Est qui nobis ipsam consequatur totam et.
modifiers: example--default
/* Large */
debug: true
styleguide: true
shared:
breakpoints:
s: 480
m: 640
l: 720
xl: 960
xxl: 1100
xxxl: 1400
custom: '(max-width: 30em)'
fonts:
default:
family: Roboto
fallback: sans-serif
weight: 400
style: normal
fontface: true
file: roboto-regular
site:
lang: en
dir: ltr
title: 'Kalong—Styleguide, v0.0.1-alpha.1'
description: null
themecolor: '#000000'
modifiers: null
globals:
nav:
main:
- href: '#somepage'
label: Somepage
text: >-
Quia ut et molestiae ullam sit ex officiis facilis. Quo delectus accusamus rem
accusantium enim dolor est aut eum. Dolorem modi voluptas et ea modi est illo
et. Quae harum quia. Ut consequatur ducimus dignissimos laudantium illo eum
quasi ullam id.
modifiers: example--large
// You can import anything you want here, npm-modules, other files etc. pp.
// Examples:
// import $ from 'jquery';
// import Vue from 'vue';
//
// There is a shortcut for importing the Sass-shared.json config
// import config from '#sharedconfig'
//
// and a shortcut for importing a file from the node_modules-folder
// import somelib from '#module/somelib/dist/somefile';
//
// and other helpers for vendor/global/helper
// import mediaquery from '#helper/mediaquery';
// import fontloader from '#global/fontloader';
// import somefile from '#vendor/somefile';
//
// And finally: a shortcut to import patterns—you don't have to specify
// the full path, because pattern-names should be unique anyway:
// import button from '#pattern/button';
import mediaquery from '#helper/mediaquery';
import select from 'select-dom';
export default (scope = document) => {
const examples = select.all('.js-example', scope);
examples.forEach(example => {
if (mediaquery('l')) {
console.log(`Doing something with ${example} above breakpoint L`);
} else {
console.log(`Doing something with ${example} below breakpoint L`);
}
});
};
.example {
@include padding(a 1);
border: 1px solid currentColor;
box-shadow: 0 0 $base-unit 0 currentColor;
}
.example--default {
font-size: 100%;
}
.example--large {
@include padding(a 2);
font-size: 200%;
}
// testing is not included in kalong, yet
// but this would be the file where to put your tests and specs ;)
You can use markdown here, if you want.
Yay! This is an awesome example.