Skip to content

Instantly share code, notes, and snippets.

Avatar

Raphael Goetter raphaelgoetter

View GitHub Profile
@raphaelgoetter
raphaelgoetter / input.scss
Last active April 26, 2021 08:44
Generated by SassMeister.com.
View input.scss
/* -------------------------------------------------- */
/* ==Grillade : système de micro-grille de KNACSS */
/* ------------------------------------------------ */
// Grillade est directement inspiré tailwindcss.com et de ses classes utilitaires
// Les variables ci-dessous ne sont appliquées que si elles n'ont pas été renseignées
// dans le fichiers de variables de KNACSS.
@if variable_exists(grid-columns) {
$grid-columns: $grid-columns !global;
@raphaelgoetter
raphaelgoetter / pastel-css-colors.css
Last active April 18, 2021 19:43
Pastel CSS named colors
View pastel-css-colors.css
.pastel-colors {
background: powderblue;
background: pink;
background: darkseagreen;
background: ivory;
background: peachpuff;
background: rosybrown;
background: thistle;
background: lightsteelblue;
background: bisque;
@raphaelgoetter
raphaelgoetter / maizzle.md
Last active February 4, 2021 15:41
Facilitez l'intégration d'e-mails HTML grâce à Maizzle
View maizzle.md

Facilitez l'intégration d'e-mails HTML grâce à Maizzle

Maizzle est un outil dédié à la construction de gabarits HTML pour e-mails, alimenté par un (classique) moteur NodeJS et le framework CSS Tailwind.

Que va vous apporter Maizzle ?

Comme chacun le sait, le monde merveilleux de l'e-mailing se trouve à des années lumières de ce que l'on considère comme des Standards, voire des Bonnes Pratiques de conception web.

Les clients mails sont capricieux, ils interprêtent à leur manière, ils redimensionnent s'ils le souhaitent, ils reconnaissent uniquement les styles qui leur conviennent, etc.

@raphaelgoetter
raphaelgoetter / email-bugs.md
Last active February 2, 2021 09:09
Bugs emails rencontrés
View email-bugs.md

Corriger les bugs, trouver des ressources

Rappel : projet réalisé sous framework Maizzle

Outlook et les images de fond

Microsoft Outlook, depuis la version 7, n'affiche plus les images de fond et nécessite un langage particulier pour les reconnaître (Vector Markup Language - VML).

Pour l'image de fond de Hero, il a été nécessaire de détecter Outlook (<!--[if mso]>) puis de respecter une structure particulière (<v:rect>, <v:fill>, <v:textbox>, …) uniquement pour ce client mail.

@raphaelgoetter
raphaelgoetter / input.scss
Created October 12, 2020 13:45
Generated by SassMeister.com.
View input.scss
/* OMG */
/* spacer utility classes */
$breakpoints : (
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
);
@raphaelgoetter
raphaelgoetter / input.scss
Created October 10, 2020 09:09
Generated by SassMeister.com.
View input.scss
$breakpoints : (
sm: 640px,
md: 768px,
lg: 1024px,
xl: 1330px
);
$sizes: 1rem, 2rem, 3rem, 4rem, 5rem, 6rem, 6rem, 10rem, 12rem, 15rem, 20rem;
// loop for each size
@each $sz in $sizes {
@raphaelgoetter
raphaelgoetter / VSCode params
Created August 21, 2020 09:46
Paramètres pour VSCode
View VSCode params
{
"atomKeymap.promptV3Features": true,
"editor.multiCursorModifier": "ctrlCmd",
"editor.formatOnPaste": true,
"editor.fontSize": 16,
"editor.lineHeight": 24,
"editor.wordWrap": "on",
"editor.renderWhitespace": "boundary",
"editor.minimap.enabled": true,
"stylelint.enable": true,
@raphaelgoetter
raphaelgoetter / schnapsum.code-snippets
Created August 21, 2020 08:41
Schnapsum snippet for VSCode
View schnapsum.code-snippets
{
"schnapsit": {
"prefix": [
"sch",
"schnaps"
],
"body": [
"${1|Lorem Salu bissame! Wie geht's les samis? Hans apporte moi une Wurschtsalad avec un picon bitte s'il te plaît. Voss? Une Carola et du Melfor? Yo dû espèce de Knäckes ch'ai dit un picon!,Lorem Yoo ch'ai lu dans les DNA que le Racing a encore perdu contre Oberschaeffolsheim. Verdammi et moi ch'avais donc parié deux knacks et une flammekueche. Ah so? T'inquiète ch'ai ramené du schpeck du chambon un kuglopf et du schnaps dans mon rucksack. Allez s'guelt! Wotch a kofee avec ton bibalaekaess et ta wurscht?,Lorem Elsass Ipsum mitt picon bière munster du ftomi! Ponchour bisame. Bibbeleskaas jetz rossbolla sech choucroute un schwanz geburtstàg Chinette dû ìch bier deppfele schiesser. Flammekueche de knèkes Seppele gal! a hopla geburtstàg alles fraü Chulia Roberts oder knäckes dûû blottkopf. Noch bredele schissabibala yeuh e schmutz. E gewurtztraminer doch Carola schneck schmutz a riesling de chambon eme rucksack Roger dû ho
@raphaelgoetter
raphaelgoetter / Give a background color with a Sass loop
Last active August 21, 2020 09:42
Give a background color with a Sass loop
View Give a background color with a Sass loop
$colors: orange, pink, green, tomato, chocolate;
//
//@each $value in $colors {
// $t: index($colors,$value);
// div:nth-child(#{$t}) {
// background-color: $value;
// }
//}
//
@raphaelgoetter
raphaelgoetter / Using & as variable in Sass
Last active August 21, 2020 09:41
Using & as variable in Sass
View Using & as variable in Sass
.btn {
display: inline-block;
padding: 1em;
color: pink;
$v: &;
&--primary {
@extend #{$v};
background: hotpink;
}