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 layout_11_gridLayout-mixin-action.scss
.grid {
@include gridLayout(
(7, 2), //item 1
(5, 1), //item 2
(5, 1), //item 3
(12, 1) //item 4
);
}
View lhCrop_01_mixin.scss
@mixin lhCrop($line-height) {
&::before {
content: '';
display: block;
height: 0;
width: 0;
margin-top: calc((1 - #{$line-height}) * 0.5em);
}
}
View icons_05_icon-color-variation.scss
@supports(--css: variables) {
.theme--dark {
--component-background: var(--black);
--color-text: var(--gray-4);
--color-icon-primary: #fff;
//..other relevant css variables
}
}
View icons_08_icon-text-aligner-class-action.html
<p class="icon-text-aligner">
<svg class="icon"><use href="#icon-dog" xlink:href="#icon-dog"/></svg>
<em>This is some text here</em>
</p>
View icons_07_icon-text-aligner-class.scss
/* add this class to parent element that contains icon + text */
.icon-text-aligner {
display: flex;
align-items: center;
> *:nth-child(2) {
margin-left: var(--space-xxs);
}
.icon {
View icons_06_icon-size-classes.scss
:root {
--icon-xs: 16px;
--icon-sm: 24px;
--icon-md: 32px;
--icon-lg: 48px;
--icon-xl: 64px;
}
/* icon size */
.icon--xs {
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;