:p.text-subtitle WebSlides Tutorial

Classes

* * *

:div.wrap ## **WebSlides Classes**

Friendly naming conventions.

:ul.flexblock.border :@html

  • Layout

    1. CSS Syntax
    2. .alignleft
    3. .alignright
    4. .aligncenter
    5. .slide-top
    6. .content- (left, center, right)
    7. .slide-bottom
    8. .grid > .column
    9. .grid.vertical-align
    10. .card- (50,60,70...)

  • Backgrounds

    1. .bg-primary...(Corp Colors)
    2. .bg-black...(General Colors)
    3. .bg-gradient-(position)
    4. .background-video
    5. Background Images:
      1. .background (fullscreen)
      2. .background-(position)
      3. .background.dark
      4. .background.light
      5. .background.anim

  • Flexible Blocks

    1. .flexblock
    2. .flexblock.clients
    3. .flexblock.features
    4. .flexblock.gallery
    5. .flexblock.metrics
    6. .flexblock.plans
    7. .flexblock.specs
    8. .flexblock.reasons
    9. .flexblock.steps
    10. .flexblock.activity

  • Typography (Roboto)

    1. .text-landing
    2. .text-intro
    3. .text-subtitle
    4. .text-shadow
    5. .text-data
    6. .text-context
    7. .text-cols
    8. .text-label
    9. .text-serif (Maitree)
    10. .text-pull (-right/-left)
    • :div.wrap ## **WebSlides Classes**

    Friendly naming conventions.

    {^.flexblock.border} - ### [Layout](#slide=3){$[target="blank"]} - [CSS Syntax](#slide=4){$[target="blank"]} - [.alignleft](#slide=6){$[target="blank"]} - [.alignright](#slide=7){$[target="blank"]} - [.aligncenter](#slide=8){$[target="blank"]} - ### [Backgrounds](#slide=26){$[target="blank"]} - [.bg-primary...(Corp Colors)](#slide=27){$[target="blank"]}