Documentation

Content

How to build pages using the LSCG Web Framework:

Paragraph Types

The Drupal Paragraphs module allows site editors to design stylized pages using paragraph types.

• Build a Stylized Page Using Paragraph Types

Font Awesome Icons

• Font Awesome Example

Banners, Backgrounds & Galleries

• Background Image
• Big Banner
• Carousel Banner
• Carousel Slideshow

Google Maps

• Google Maps Example

Grids & Carousels

• Page Reference Grids
• Views Carousel Slider
• Views Reference Grids

Inline Content

• Inline Files
• Inline Images
• Inline Text
• Inline Videos

Content Snippets

• Event Body Text Sample
• People Body Text Sample
• SVG Graphic Used as H1 Inside Image Banner

Accessibility

Site editors should be mindful to develop content which is accessible to users on their websites.

Semantic HTML

• Heading tags allow screen readers to quickly move to main categories on page
• Use <h1> - <h6> heading tags to lay out the hierarchy of your web page

Content Linearization

• Screen readers read content by how it is presented in the html code, not how you see it visually in the browser

Alt Tags

• Alt tags are used to describe an image. The alt tag gives visually impaired users a text description of the image

Evaluation Tools

• Site Improve - Accessibility & Quality Testing
• WAVE Accessibility Evaluation - Browser Plugin
• Color Safe - Create AAA WCAG Accessible Color palettes
• Color Calculator - Create Monochromatic Colors for Buttons & Links