Fractal Starter
Project version : 0.1.2

Color 

<h2>Marque</h2>

<ul class="color-list">
    <li>
        <div class="c-brand-gold"></div><b>brand-gold</b><span>#BDA450</span></li>
    <li>
        <div class="c-theme-location"></div><b>theme-location</b><span>#1FCEB9</span></li>
    <li>
        <div class="c-theme-mariage"></div><b>theme-mariage</b><span>#FD6034</span></li>
    <li>
        <div class="c-theme-events"></div><b>theme-events</b><span>#FE6DB8</span></li>
</ul>

<h2>Usage web</h2>

<ul class="color-list">
    <li>
        <div class="c-base"></div><b>base</b><span>#222222</span></li>
    <li>
        <div class="c-heading"></div><b>heading</b><span>#222222</span></li>
    <li>
        <div class="c-heading-alt"></div><b>heading-alt</b><span>#BDA450</span></li>
    <li>
        <div class="c-link"></div><b>link</b><span>#A07C2A</span></li>
    <li>
        <div class="c-link-hover"></div><b>link-hover</b><span>#BDA450</span></li>
    <li>
        <div class="c-link-border"></div><b>link-border</b><span>#E3CB78, #AO7C2A</span></li>
    <li>
        <div class="c-background-light"></div><b>background-light</b><span>#D2CDB8</span></li>
    <li>
        <div class="c-background-dark"></div><b>background-dark</b><span>#252322</span></li>
    <li>
        <div class="c-gradient"></div><b>gradient</b><span>#E3CB78, #AO7C2A</span></li>
    <li>
        <div class="c-gradient-blue"></div><b>gradient-blue</b><span>#E3CB78, #AO7C2A</span></li>
    <li>
        <div class="c-gradient-orange"></div><b>gradient-orange</b><span>#E3CB78, #AO7C2A</span></li>
    <li>
        <div class="c-gradient-pink"></div><b>gradient-pink</b><span>#E3CB78, #AO7C2A</span></li>
    <li>
        <div class="c-social-facebook"></div><b>social-facebook</b><span>#3B5998</span></li>
    <li>
        <div class="c-social-twitter"></div><b>social-twitter</b><span>#1DA1F2</span></li>
    <li>
        <div class="c-social-youtube"></div><b>social-youtube</b><span>#FF0000</span></li>
    <li>
        <div class="c-social-instagram"></div><b>social-instagram</b><span></span></li>
</ul>
 
<h2>Marque</h2>

<ul class="color-list">
{{#each color.brands}}
    <li><div class="c-{{this.name}}"></div><b>{{this.name}}</b><span>{{this.hex}}</span></li>
{{/each}}
</ul>

<h2>Usage web</h2>

<ul class="color-list">
{{#each color.colors}}
    <li><div class="c-{{this.name}}"></div><b>{{this.name}}</b><span>{{this.hex}}</span></li>
{{/each}}
</ul>
 
{
  "color": {
    "colors": [
      {
        "item": null,
        "name": "base",
        "hex": "#222222"
      },
      {
        "item": null,
        "name": "heading",
        "hex": "#222222"
      },
      {
        "item": null,
        "name": "heading-alt",
        "hex": "#BDA450"
      },
      {
        "item": null,
        "name": "link",
        "hex": "#A07C2A"
      },
      {
        "item": null,
        "name": "link-hover",
        "hex": "#BDA450"
      },
      {
        "item": null,
        "name": "link-border",
        "hex": "#E3CB78, #AO7C2A"
      },
      {
        "item": null,
        "name": "background-light",
        "hex": "#D2CDB8"
      },
      {
        "item": null,
        "name": "background-dark",
        "hex": "#252322"
      },
      {
        "item": null,
        "name": "gradient",
        "hex": "#E3CB78, #AO7C2A"
      },
      {
        "item": null,
        "name": "gradient-blue",
        "hex": "#E3CB78, #AO7C2A"
      },
      {
        "item": null,
        "name": "gradient-orange",
        "hex": "#E3CB78, #AO7C2A"
      },
      {
        "item": null,
        "name": "gradient-pink",
        "hex": "#E3CB78, #AO7C2A"
      },
      {
        "item": null,
        "name": "social-facebook",
        "hex": "#3B5998"
      },
      {
        "item": null,
        "name": "social-twitter",
        "hex": "#1DA1F2"
      },
      {
        "item": null,
        "name": "social-youtube",
        "hex": "#FF0000"
      },
      {
        "item": null,
        "name": "social-instagram",
        "hex": null
      }
    ],
    "brands": [
      {
        "item": null,
        "name": "brand-gold",
        "hex": "#BDA450"
      },
      {
        "item": null,
        "name": "theme-location",
        "hex": "#1FCEB9"
      },
      {
        "item": null,
        "name": "theme-mariage",
        "hex": "#FD6034"
      },
      {
        "item": null,
        "name": "theme-events",
        "hex": "#FE6DB8"
      }
    ]
  }
}
  • Content: 
    @include generateColor('brand-gold', $c-brand-gold);
@include generateColor('theme-location', $c-theme-location);
@include generateColor('theme-mariage', $c-theme-mariage);
@include generateColor('theme-events', $c-theme-events);

// Typo
@include generateColor('base', $c-font-color);
@include generateColor('heading', $c-heading-color);
@include generateColor('heading-alt', $c-heading-color-alt);
@include generateColor('link', $c-link-color);
@include generateColor('link-hover', $c-link-hover-color);
@include generateColor('link-border', $c-link-border-color);

// Background
@include generateColor('background-light', $c-background-light);
@include generateColor('background-dark', $c-background-dark);


// Gradient
@include generateColor('gradient', $c-gradient);
@include generateColor('gradient-blue', $c-gradient-blue);
@include generateColor('gradient-orange', $c-gradient-orange);
@include generateColor('gradient-pink', $c-gradient-pink);

// Social
@include generateColor('social-facebook', $c-social-facebook);
@include generateColor('social-twitter', $c-social-twitter);
@include generateColor('social-youtube', $c-social-youtube);
@include generateColor('social-instagram', $c-social-instagram);
  • URL: /components/raw/color/_color.scss
  • Filesystem Path: components/04-elements/00-color/_color.scss
  • Size: 1.2 KB

How to add color

context:
  color:
    colors:
      - item:
        name: base
        hex: '#4a3449'
        rvb: 'rgb(74, 52, 73)'
        hsl: 'hsl(303, 17%, 25%)'
        pantone: 'PMS 518'
      - item:
        name: heading
        hex: '#4a3449'
        rvb: 'rgb(74, 52, 73)'
        hsl: 'hsl(303, 17%, 25%)'
        pantone: 'PMS 518'
      - item:
        name: heading-alt
        hex: '#347f71'
        rvb: 'rgb(52, 127, 113)'
        hsl: 'hsl(169, 42%, 35%)'
        pantone: 'PMS 3288'
      - item: 
        name: link
        hex: '#347f71'
        rvb: 'rgb(52, 127, 113)'
        hsl: 'hsl(169, 42%, 35%)'
        pantone: 'PMS 3288'
      - item:
        name: link-hover
        hex: '#255b51'
        rvb: 'rgb(37, 91, 81)'
        hsl: 'hsl(169, 42%, 25%)'
        pantone: 'PMS 3208'
      - item: 
        name: background-light
        hex: '#f2f4eb'
        rvb: 'rgb(242, 244, 235)'
        hsl: 'hsl(73, 29%, 94%)'
        pantone: ''
      - item:
        name: gradient
        hex: '#2091b1, #b6d51a'
        rvb: ''
        hsl: ''
        pantone: ''
    brands:
      - item:
        name: brand-blue
        hex: '#2091b1'
        rvb: 'rgb(32, 145, 177)'
        hsl: 'hsl(193, 69%, 41%)'
        pantone: 'PMS 313' 
      - item: 
        name: brand-green
        hex: '#b6d51a'
        rvb: 'rgb(182, 213, 26)'
        hsl: 'hsl(70, 78%, 47%)'
        pantone: 'PMS 382'
      - item:
        name: brand-bluegreen
        hex: '#347f71'
        rvb: 'rgb(52, 127, 113)'
        hsl: 'hsl(169, 42%, 35%)'
        pantone: 'PMS 3288'