Skip to content

Instantly share code, notes, and snippets.

Avatar

Claudia Romano claudia-romano

View GitHub Profile
@claudia-romano
claudia-romano / codyframe-php-config.js
Last active Jun 17, 2022
CodyFrame gulp config file for a PHP project
View codyframe-php-config.js
var gulp = require('gulp');
var sass = require('gulp-sass')(require('sass-embedded'));
var sassGlob = require('gulp-sass-glob');
var browserSync = require('browser-sync');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
var connect = require('gulp-connect-php');
@claudia-romano
claudia-romano / codyframe-v2-php-config.js
Last active Aug 25, 2021
CodyFrame gulp config file for a PHP project
View codyframe-v2-php-config.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var sassGlob = require('gulp-sass-glob');
var browserSync = require('browser-sync');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var cssvariables = require('postcss-css-variables');
var calc = require('postcss-calc');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
View icons_09_icon-color-variation.scss
.theme--dark .icon {
color: #fff;
}
.theme--dark .icon use {
fill: #d4c1be;
}
.theme--dark .icon.icon--outline use {
stroke: #d4c1be;
View lhCrop_06_mixin-css-variables-2.scss
:root {
/* line-height */
--heading-line-height: 1.2;
--body-line-height: 1.4;
--article-line-height: 1.58;
/* capital letters - used in combo with the lhCrop mixin */
--font-primary-capital-letter: 0.75;
--font-secondary-capital-letter: 0.69;
}
View lhCrop_05_mixin-css-variables-1.scss
:root {
/* line-height */
--heading-line-height: 1.2;
--body-line-height: 1.4;
--article-line-height: 1.58;
}
.text-to-crop {
@include lhCrop(var(--heading-line-height));
}
View two-state-icons_05_script-2.js
TransitionIcon.prototype.triggerAnimation = function(timestamp) {
var progress = this.getProgress(timestamp);
this.animateIcon(progress);
this.checkProgress(progress);
};
TransitionIcon.prototype.getProgress = function(timestamp) {
//make sure the progress value is in the right interval
if (!this.time.start) this.time.start = timestamp;
return timestamp - this.time.start;
View two-state-icons_04_script-1.js
(function() {
function TransitionIcon( element ) {
this.element = element;
this.size = this.element.getBoundingClientRect();
this.states = this.element.querySelectorAll('.js-transition-icon__state');
this.time = {start: null, total: 200};
this.status = {interacted : false, animating : false};
this.init();
};
View two-state-icons_03_icon-complete.html
<svg class="js-transition-icon" width="32px" height="32px" viewBox="0 0 32 32">
<g class="js-transition-icon__state">
<title>Search</title>
<line fill="none" stroke="#111111" x1="30" y1="30" x2="21.5" y2="21.5"/>
<circle fill="none" stroke="#111111" cx="13" cy="13" r="12"/>
</g>
<g class="js-transition-icon__state" style="display: none;" aria-hidden="true">
<title>Close search</title>
<line fill="none" stroke="#111111" x1="27" y1="5" x2="5" y2="27"/>
View two-state-icons_02_icon-2.html
<svg width="32px" height="32px" viewBox="0 0 32 32">
<g class="js-transition-icon__state">
<title>Close search</title>
<line fill="none" stroke="#111111" x1="27" y1="5" x2="5" y2="27"/>
<line fill="none" stroke="#111111" x1="27" y1="27" x2="5" y2="5"/>
</g>
</svg>
View two-state-icons_01_icon-1.html
<svg width="32px" height="32px" viewBox="0 0 32 32">
<g class="js-transition-icon__state">
<title>Search</title>
<line fill="none" stroke="#111111" x1="30" y1="30" x2="21.5" y2="21.5"/>
<circle fill="none" stroke="#111111" cx="13" cy="13" r="12"/>
</g>
</svg>