Skip to content

Instantly share code, notes, and snippets.


Cristiano Rastelli didoo

View GitHub Profile
View gist:6bf8322e53f9e8c34038
<div class="show-more-link">
<button class="btn--special-show-more" data-ng-show="truncated" data-ng-click="toggle()">
<span class="show-more--more ng-binding ng-hide" data-ng-show="!expanded">Show more</span>
<span class="show-more--less ng-binding" data-ng-show="expanded">Show less</span>
View gist:16e7009f11fa15da1671
var using = require('gulp-using'); // use: .pipe(using({ prefix:'Using', color:'blue' }))
// and then
// Styles (Global)
gulp.task('styles:global', function() {
return gulp.src(globScss)
.pipe(using({ prefix:'Using', color:'blue' }))
didoo / gist:68d507aae20ba46a256d
Last active Oct 15, 2015
What I would like to read about on @12devsGulp3
View gist:68d507aae20ba46a256d
End of year, time for lists:
- Three websites that made you yell "wow!"
- Three developers that made you change your mind about something
- Three talks/speeches you liked the most
- Three articles/blog posts that made you think for day
Or, if you want something more specific:
- Gulp 4, did you transitioned already? how smooth it was? anything I need to know before migrating my build process?
- Npm 3, did you already started to use it? Something we can start to use to create reusable "packages" of CSS/Sass libs?
- The definition of "web development" is broadening every day, more and more; will we end up to be all "specialist of something", no more "unicorns" and ?
View styleguide.js
/*global require, casper, phantom, fs, console */
"use strict";
// INSTRUCTION: call via Gulp (see task there) or in the "visual-regression" folder as:
// casperjs --ignore-ssl-errors=yes --ssl-protocol=any --target=[local|remote] test instructions/styleguide.js 2>&1 | grep -v "CoreText performance note"
// var phantomcss = require("phantomcss/phantomcss");
var phantomcss = require('./../node_modules/phantomcss/phantomcss.js');
var _IS_REMOTE = (casper.cli.has("target") && casper.cli.get("target")==="remote"),
didoo / SassMeister-input.scss
Last active Dec 9, 2016
Generated by
View SassMeister-input.scss
// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----
.block {
display: block;
@at-root {
View setupIFrame.js
function setupIFrame(container) {
// create the iframe element
const iFrame = document.createElement('iframe'); = 'styleguide-iframe-' + Math.random().toString(36).substring(2, 10);
iFrame.src = 'about:blank';
iFrame.setAttribute('allowfullscreen', '');
iFrame.setAttribute('frameBorder', '0');
// inject it in the DOM
container.parentNode.insertBefore(iFrame, container);
// store a reference to the iFrame "document" element
didoo / groupErrors.js
Created Oct 21, 2018
groupErrors.js suggestion
View groupErrors.js
var chalk = require('chalk');
var groupedErrors = {};
var GroupErrors = {
PropertyReferenceErrors: 'Property Reference Errors',
PropertyValueCollisions: 'Property Value Collisions',
didoo / styleguide-frame.css
Last active Feb 26, 2020
View styleguide-frame.css
.styleguide-frame {
position: relative;
transform: translate3d(0, 0, 0); /* <-- THIS LINE MAKES THE TRICK! */
outline: 1px solid #eaeaea;
didoo / tokens-approach-A.json
Last active Apr 20, 2020
Answer in Medium article on Design Tokens - Approach A
View tokens-approach-A.json
"button": {
"text-icon-spacing": {
"mobile": {
"value": "8",
"type": "size"
"desktop": {
"value": "12",
"type": "size"
didoo / style-dictionary-config-desktop.json
Created Apr 20, 2020
Answer in Medium article on Design Tokens - Approach B
View style-dictionary-config-desktop.json
"source": ["tokens_desktop/spacing.json", "tokens_button.json"],
"platforms": {
"desktop": {
"transformGroup": "desktop",
"buildPath": "build/desktop/",
"files": [{
"destination": "tokens.ext",
"format": "my/format"