ASCE Digital Style Guide

Purpose and Intent

To present guidelines and design standards for properties across ASCE's digital footprint.

A brief list of topics includes:

Color palette
Typographic specifications such as font-family, font-size, font-weight, color, etc.
Iconography
Common items such as links, buttons, and form elements
Design language via component examples

For guidance on grammar style and usage, ASCE employees should refer to the ASCE Editorial Style Guide.

For guidance on branding, ASCE employees should refer to the ASCE Branding Toolkit.

Directory Structure

dist/ ________________________________________ # Compiled Code &amp; Files
gulpfile.babel.js/ ___________________________ # Gulp and Styleguide/a11y Builders
src/ _________________________________________ # Pre-Compiled Source Code &amp; Files
|- api/ ______________________________________ # Mock API Data
|  |- search.json ____________________________ # Mock IS Search Data
|- assets/ ___________________________________ # Assets
|  |- fonts/ _________________________________ # Fonts
|  |- images/ ________________________________ # Images
|  |- pwa/ ___________________________________ # Progressive Web App Dependencies
|- components/ _______________________________ # Components
|  |- component-name/ ________________________ # Individual Component
|    |- component-name.js ____________________ # Individual Component JS Partial
|    |- component-name.json __________________ # Individual Component JSON Data Partial for Twig
|    |- component-name.scss __________________ # Individual Component SCSS Partial
|    |- component-name.twig __________________ # Individual Component Twig Partial
|- global-scss/ ______________________________ # Global SCSS
|  |- animations/ ____________________________ # Animations
|  |- helpers/ _______________________________ # Helpers &amp; Mixins
|  |- vendor/ ________________________________ # Vendor Styles
|- js-plugins/ _______________________________ # JavaScript Plugin Partials
|- pages/ ____________________________________ # Twig Page Partials
|- static-only/ ______________________________ # Functionality for Static FED
|  |- component-switcher/ ____________________ # Provides the ability to show component variations easily
|- compiled-data.json ________________________ # Mock Twig Data (merged JSON file from src/data/twig/** using Gulp)
|- layout.twig _______________________________ # Main Twig Layout File
|- main.js ___________________________________ # Main JavaScript File
|- main.scss _________________________________ # Main SCSS File
|- static.js _________________________________ # Static JavaScript File
|- static.scss _______________________________ # Static SCSS File
|- custom/ ___________________________________ # Custom SCSS
|  |- custom.scss/ ___________________________ # Custom SCSS File