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> | |
</button> | |
</div> |
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' })) | |
... | |
... |
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"), |
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'); | |
iFrame.id = '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 |
View groupErrors.js
var chalk = require('chalk'); | |
var groupedErrors = {}; | |
var GroupErrors = { | |
GROUP: { | |
PropertyReferenceErrors: 'Property Reference Errors', | |
PropertyValueCollisions: 'Property Value Collisions', | |
}, |
View styleguide-frame.css
.styleguide-frame { | |
position: relative; | |
transform: translate3d(0, 0, 0); /* <-- THIS LINE MAKES THE TRICK! */ | |
outline: 1px solid #eaeaea; | |
} |
View tokens-approach-A.json
{ | |
"button": { | |
"text-icon-spacing": { | |
"mobile": { | |
"value": "8", | |
"type": "size" | |
}, | |
"desktop": { | |
"value": "12", | |
"type": "size" |
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" | |
}] |
OlderNewer