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, #292b2c */
  .lp-site-color-morkgra-bg { background: #292b2c; }
  .lp-site-color-morkgra-color { color: #292b2c; }

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

  /* 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; }

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"