Webbplatsfärger

Webbaddresser till stilmall och javascript

Webbadresser att lägga till i din grundmall om de inte redan är inlagda.

• Länk till CSS
• Länk till JS

Tillgängliga färger

Nedan ser du en lista på de webbplatsfärger som finns skapade på huset. Nyckeln används främst för att hämta färg i klientskript via lp.siteColors.get(colorSlug, defaultColor) där colorSlug är nyckeln.

Anpassade stilklasser för färgerna

Om man vill skapa speciella stilklasser för varje färg kan man redigera velocity-mallen som är utpekad i skriptmodulens variabel selectorTemplate.

I velocity-kontexten finner ni $colors som är en samling av alla webbplatsfärger. Varje färg har följande attribut:

## MAIN ##
## Each $color contains:
## - name             The name of the color.
## - slug             The machine friendly name of the color.
## - baseSubstitute   The name run through EndecUtil.getBaseSubstitute().
## - htmlHexValue     The color's HEX value.

#foreach( $color in $!colors )
  /* $color.name, $color.slug, $color.baseSubstitute, $color.htmlHexValue */
  .lp-site-color-$!{color.slug}-bg { background: $!color.htmlHexValue; }
  .lp-site-color-$!{color.slug}-color { color: $!color.htmlHexValue; }

#end

Med velocity-mallen ovan genereras följande stilklasser för de webbplatsfärger som finns:

  /* Svart, svart, svart, #000000 */
  .lp-site-color-svart-bg { background: #000000; }
  .lp-site-color-svart-color { color: #000000; }

  /* Mörkgrå, morkgra, morkgra, #222222 */
  .lp-site-color-morkgra-bg { background: #222222; }
  .lp-site-color-morkgra-color { color: #222222; }

  /* Ljusgrå, ljusgra, ljusgra, #e6e8eb */
  .lp-site-color-ljusgra-bg { background: #e6e8eb; }
  .lp-site-color-ljusgra-color { color: #e6e8eb; }

  /* Vit, vit, vit, #ffffff */
  .lp-site-color-vit-bg { background: #ffffff; }
  .lp-site-color-vit-color { color: #ffffff; }

  /* Röd, rod, rod, #ff0000 */
  .lp-site-color-rod-bg { background: #ff0000; }
  .lp-site-color-rod-color { color: #ff0000; }

  /* Grön 100, gron-100, gron100, #00863c */
  .lp-site-color-gron-100-bg { background: #00863c; }
  .lp-site-color-gron-100-color { color: #00863c; }

  /* Grön 70, gron-70, gron70, #5ead77 */
  .lp-site-color-gron-70-bg { background: #5ead77; }
  .lp-site-color-gron-70-color { color: #5ead77; }

  /* Grön 30, gron-30, gron30, #b7d5bd */
  .lp-site-color-gron-30-bg { background: #b7d5bd; }
  .lp-site-color-gron-30-color { color: #b7d5bd; }

  /* Grön 10, gron-10, gron10, #e4efe6 */
  .lp-site-color-gron-10-bg { background: #e4efe6; }
  .lp-site-color-gron-10-color { color: #e4efe6; }

  /* Beige 100, beige-100, beige100, #e0d5c3 */
  .lp-site-color-beige-100-bg { background: #e0d5c3; }
  .lp-site-color-beige-100-color { color: #e0d5c3; }

  /* Beige 70, beige-70, beige70, #e5dbd0 */
  .lp-site-color-beige-70-bg { background: #e5dbd0; }
  .lp-site-color-beige-70-color { color: #e5dbd0; }

  /* Beige 30, beige-30, beige30, #f6f1eb */
  .lp-site-color-beige-30-bg { background: #f6f1eb; }
  .lp-site-color-beige-30-color { color: #f6f1eb; }

  /* Beige 10, beige-10, beige10, #fcfbf9 */
  .lp-site-color-beige-10-bg { background: #fcfbf9; }
  .lp-site-color-beige-10-color { color: #fcfbf9; }

Velocity

Nedan ser du det velocity-macro som används för att generera css-vänligt namn på färgen. Detta kan du använda i dina egna velocity-mallar för att vara säker på att ett korrekt namn genereras.

## Macro for generating a valid string for html class/id
#macro (slug $str)${str.toLowerCase().replaceAll("å|ä", 'a').replaceAll("ö", 'o').replaceAll("[^a-z0-9]+", '-').replaceAll("^-+|-+$", '')}#end

JavaScript (klient)

Vill du använda webbplatsfärgerna i skript på klientsidan finns färgerna exponerade via ett enkelt api.

lp.siteColors.getAll()
// Object {vit: "#ffffff", ljusgra: "#e8e8e8", morkgra: "#404040"...}

lp.siteColors.get(colorSlug, defaultColor)
// "#ffffff"

lp.siteColors.getSlug(colorName)
// "ljusgra"