<div class="example js-example example--default">
Incidunt dolor consequatur blanditiis velit. Minima dolor commodi provident. Est qui nobis ipsam consequatur totam et.
</div>
<div class="example js-example{% if modifiers %} {{ modifiers }}{% endif %}">
{{ text }}
</div>
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
// 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.