Requires grunt-spritesmith which generates a spritesheet from a bunch of images.
This gist passes a custom template for spritesmith to generate the SCSS file.
Gruntfile.js
sprite: {
src: "images/*.png",
/** | |
* Android 2.3.4 2d transform bug when 3d transform rule is given | |
*/ | |
.rotate-me-working { | |
position:absolute; | |
left:50%; | |
top:50%; | |
-webkit-transform: rotate(45deg); | |
} |
Requires grunt-spritesmith which generates a spritesheet from a bunch of images.
This gist passes a custom template for spritesmith to generate the SCSS file.
Gruntfile.js
sprite: {
src: "images/*.png",
# Input strings like "52 lb 6 oz" or "8 oz" | |
def weight_string_to_float(weight_string) | |
/(?<lb>[0-9]*\slb\s)*(?<oz>[0-9]*\soz)/ =~ weight_string | |
lbs = 0 | |
unless lb.nil? | |
lbs += lb.to_i | |
end | |
unless oz.nil? | |
lbs += (oz.to_i * 0.0625) |
{% macro hero( | |
title="We Are Awesome", | |
background_image="http://placehold.it/1000x400", | |
cta_text="Find Out Why!", | |
cta_href="/some/awesome-link.html" | |
) %} | |
<div class="hero" {% if background_image %} style="background-image:url({{ background_image }})" {% endif %}> | |
<h1 class="hero__title">{{ title }}</h1> | |
{% if caller %} | |
{{ caller() }} |
{% set mixed_object = { | |
key_1: 'Delta', | |
key_2: 'Epsilon', | |
key_3: ['Zeta', 'Eta', 'Theta', 'Iota'] | |
} %} | |
{% for key, value in mixed_objct %} | |
{% if value[0].length > 1 %} | |
{# This is an array, do array stuff with it #} | |
{{ value | join('<br>') | safe }} | |
{% else %} |
$esds-tokens: ( | |
'color': ( | |
'white': $esds-color-white, | |
'black': $esds-color-black, | |
'orange': ( | |
'82': $esds-color-orange-82, | |
'91': $esds-color-orange-91, | |
'93': $esds-color-orange-93 | |
), | |
'neutral': ( |
{% set a = (a.push(3),a) %} | |
{# Copied from: https://github.com/mozilla/nunjucks/issues/240 and added here for findability #} |
import Vue from 'vue' | |
import App from './App.vue' | |
import Form from './Form.vue' | |
Vue.config.productionTip = false | |
const NotFound = { template: '<p>Page not found</p>' } | |
const routes = { | |
'/': App, | |
'/form': Form |
{ | |
"extends": [ | |
"stylelint-config-sass-guidelines", | |
"stylelint-config-prettier" | |
], | |
"rules": { | |
"color-hex-case": "upper", | |
"color-hex-length": "long", | |
"selector-class-pattern": "^(?:(?:o|c|u|t|s|is|has|_|js|qa)-)?[a-z0-9]+(?:-[a-z0-9]+)*(?:__[a-z0-9]+(?:-[a-z0-9]+)*)?(?:--[a-z0-9]+(?:-[a-z0-9]+)*)?(?:\\[.+\\])?$", | |
"max-nesting-depth": 2 |