interaktionsweise/hippie
1
1
Fork 0
Code Issues Pull requests Releases 3 Activity Actions

Update everything

Browse source 
gulpjs
 * new spritesmith plugin
 * reworked exports
 * new nunjucks-render version fixing dependency issues!

File structure
New naming scheme for nunjucks files. Underscore used for files which 
are imported and not directly displayed.

Nunjucks blocks where renamed and are placed differently.

New macro for navigational elements.
This commit is contained in:
Stephan 2019-03-21 20:22:22 +01:00
parent 902016afff
commit 8dc9724a3e
35 changed files with 332 additions and 1250 deletions
Download patch file Download diff file Expand all files Collapse all files

123
source/style/hippie/mixins/_sprite.scss Normal file
View file

@ -0,0 +1,123 @@
// SCSS variables are information about icon's compiled state, stored under its original file name
//
// .icon-home {
// width: $icon-home-width;
// }
//
// The large array-like variables contain all information about a single icon
// $icon-home: x y offset_x offset_y width height total_width total_height image_path;
//
// At the bottom of this section, we provide information about the spritesheet itself
// $spritesheet: width height image $spritesheet-sprites;
$down-name: 'down';
$down-x: 64px;
$down-y: 0px;
$down-offset-x: -64px;
$down-offset-y: 0px;
$down-width: 32px;
$down-height: 32px;
$down-total-width: 96px;
$down-total-height: 64px;
$down-image: '../art/sprite.png';
$down: (64px, 0px, -64px, 0px, 32px, 32px, 96px, 64px, '../art/sprite.png', 'down', );
$meta-name: 'meta';
$meta-x: 64px;
$meta-y: 32px;
$meta-offset-x: -64px;
$meta-offset-y: -32px;
$meta-width: 32px;
$meta-height: 32px;
$meta-total-width: 96px;
$meta-total-height: 64px;
$meta-image: '../art/sprite.png';
$meta: (64px, 32px, -64px, -32px, 32px, 32px, 96px, 64px, '../art/sprite.png', 'meta', );
$up-name: 'up';
$up-x: 0px;
$up-y: 0px;
$up-offset-x: 0px;
$up-offset-y: 0px;
$up-width: 32px;
$up-height: 64px;
$up-total-width: 96px;
$up-total-height: 64px;
$up-image: '../art/sprite.png';
$up: (0px, 0px, 0px, 0px, 32px, 64px, 96px, 64px, '../art/sprite.png', 'up', );
$up2-name: 'up2';
$up2-x: 32px;
$up2-y: 0px;
$up2-offset-x: -32px;
$up2-offset-y: 0px;
$up2-width: 32px;
$up2-height: 64px;
$up2-total-width: 96px;
$up2-total-height: 64px;
$up2-image: '../art/sprite.png';
$up2: (32px, 0px, -32px, 0px, 32px, 64px, 96px, 64px, '../art/sprite.png', 'up2', );
$spritesheet-width: 96px;
$spritesheet-height: 64px;
$spritesheet-image: '../art/sprite.png';
$spritesheet-sprites: ($down, $meta, $up, $up2, );
$spritesheet: (96px, 64px, '../art/sprite.png', $spritesheet-sprites, );
// The provided mixins are intended to be used with the array-like variables
//
// .icon-home {
// @include sprite-width($icon-home);
// }
//
// .icon-email {
// @include sprite($icon-email);
// }
//
// Example usage in HTML:
//
// `display: block` sprite:
// <div class="icon-home"></div>
//
// To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:
//
// // CSS
// .icon {
// display: inline-block;
// }
//
// // HTML
// <i class="icon icon-home"></i>
@mixin sprite-width($sprite) {
width: nth($sprite, 5);
}
@mixin sprite-height($sprite) {
height: nth($sprite, 6);
}
@mixin sprite-position($sprite) {
$sprite-offset-x: nth($sprite, 3);
$sprite-offset-y: nth($sprite, 4);
background-position: $sprite-offset-x $sprite-offset-y;
}
@mixin sprite-image($sprite) {
$sprite-image: nth($sprite, 9);
background-image: url(#{$sprite-image});
}
@mixin sprite($sprite) {
@include sprite-image($sprite);
@include sprite-position($sprite);
@include sprite-width($sprite);
@include sprite-height($sprite);
}
// The `sprites` mixin generates identical output to the CSS template
// but can be overridden inside of SCSS
//
// @include sprites($spritesheet-sprites);
@mixin sprites($sprites) {
@each $sprite in $sprites {
$sprite-name: nth($sprite, 10);
.#{$sprite-name} {
@include sprite($sprite);
}
}
}