Digital KIT

Elementi e documentazione sul tema AOL

Classi CSS utili

Classi CSS applicabili a singole porzioni di HTML o a intere portlet tramite il Look&Feel.

 

Generali

  • .nascondi Nasconde il contenuto web agli utenti non loggati
  •  

 

Aspetto del testo

  • .f-size-[14/16/18/20/22/24/28/36/48] - Grandezza del testo in pixel
  • .t[300/400/500/600/700] - Imposta il Font Weight.
  • .ls[1/2/3/4/5] - Imposta il Letter Spacing in pixel.
  • .noheight - Imposta l'altezza dell'elemento a 0px.
  • .nolineheight - Imposta la Line height dell'elemento a 0px.
  • .font-body - Imposta il tipo di font come quello del body (Open sans)
  • .font-primary - Imposta il tipo di font come quello del body (Open sans).
  • .font-secondary - Changes the Font Family of the Element equal to the one used for the Secondary Text.
  • .fancy-bordered-titles - Assegna la classe .fancy-title.title-dotted-border ai titoli h* figli dell'elemento

 

Margini e padding

  • .allmargin - Margin of 50px on all sides.
  • .topmargin - Margin of 50px on the top side.
  • .bottommargin - Margin of 50px on the bottom side.
  • .leftmargin - Margin of 50px on the left side.
  • .rightmargin - Margin of 50px on the right side.
  • .allmargin-sm - Margin of 30px on all sides.
  • .topmargin-sm - Margin of 30px on the top side.
  • .bottommargin-sm - Margin of 30px on the bottom side.
  • .leftmargin-sm - Margin of 30px on the left side.
  • .rightmargin-sm - Margin of 30px on the right side.
  • .allmargin-lg - Margin of 80px on all sides.
  • .topmargin-lg - Margin of 80px on the top side.
  • .bottommargin-lg - Margin of 80px on the bottom side.
  • .leftmargin-lg - Margin of 80px on the left side.
  • .rightmargin-lg - Margin of 80px on the right side.
  • .nomargin - No Margin on all sides.
  • .notopmargin - No Margin on the top side.
  • .nobottommargin - No Margin on the bottom side.
  • .noleftmargin - No Margin on the left side.
  • .norightmargin - No Margin on the right side.
  • .noborder - No Border on all sides.
  • .notopborder - No Border on the top side.
  • .nobottomborder - No Border on the bottom side.
  • .noleftborder - No Border on the left side.
  • .norightborder - No Border on the right side.
  • .nopadding - No Padding on all sides.
  • .notoppadding - No Padding on the top side.
  • .nobottompadding - No Padding on the bottom side.
  • .noleftpadding - No Padding on the left side.
  • .norightpadding - No Padding on the right side.
  • .col-padding - Padding of 60px on all sides.

 

Aspetto 'box model'

  • .header-stick - Sticks content with the Header.
  • .footer-stick - Sticks content with the Footer.
  • .noradius - No Border Radius.
  • .noshadow - No Box Shadows.
  • .nobg - No Backgrounds.
  • .nobgcolor - No Background Colors.
  • .noabsolute - Forces Relative Position.
  • .hidden - Hidden Blocks.
  • .nothidden - No Hidden Blocks.
  • .inline-block - Inline Blocks.
  • .center - Center Aligned Text.
  • .tright - Right Aligned Text.
  • .divcenter - Center Aligned DIVs.
  • .fleft - Left Aligned DIVs.
  • .fright - Right Aligned DIVs.
  • .color - Theme Text Color.
  • .bgcolor - Theme Background Color.
  • .border-color - Theme Border Color.
  • .bgicon - Background Icon.
  • .bganimate - Animates Background Vertically.
  • .grayscale - Adds a Grayscale Filter to the Images and Colors on Hover.
  • .imagescale - Adds a Zoom Out Effect on the Image when Hovered.

Standards, validatori, checkers

Validator W3C 
https://validator.w3.org/nu/

PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/?hl=it

Pingdom Website Speed Test
https://tools.pingdom.com/

WHATWG community 
https://html.spec.whatwg.org/

Text/Background contrast checker
 https://webaim.org/resources/contrastchecker/

Word to HTML cleaner
https://wordhtml.com/
https://html-cleaner.com/

Colori del tema

  • Example
    Codice esadecimale
    Variabile SASS
  •  
    #2B79A6
    $theme-color ($blue-sky)
  •  
    #cc7800
    $aol-orange
  •  
    #af6700
    $aol-orange-dark
  •  
    #5F801E
    $aol-green
  •  
    #c02942
    $aol-red
  •  
    #0B3C5D
    $blue-dark
  •  
    #e41b62
    $fuchsia
  •  
    #efd00b
    $gold
  •  
    #1D2731
    $aol-black
  •  
    #555
    $body-color
  •  
    #444
    $heading-color