raphaelgoetter

/* -------------------------------------------------- */
/* ==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

.pastel-colors {
  background: powderblue;
  background: pink;
  background: darkseagreen;
  background: ivory;
  background: peachpuff;
  background: rosybrown;
  background: thistle;
  background: lightsteelblue;
  background: bisque;

raphaelgoetter

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

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

/* OMG */

/* spacer utility classes */

$breakpoints : (
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
);

raphaelgoetter

$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

{
    "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

{
  "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

$colors: orange, pink, green, tomato, chocolate;

//
//@each $value in $colors {
//  $t: index($colors,$value);
//  div:nth-child(#{$t}) {
//    background-color: $value;
//  }
//}
//

raphaelgoetter

.btn {
  display: inline-block;
  padding: 1em;
  color: pink;
  $v: &;
  
  &--primary {
    @extend #{$v};
    background: hotpink;
  }