Element Themes

The home for Element styles required for web-technologies.

Getting Started

The Element Team is happy to accept contributions to our 4 repositories - React, Vue, Cerebro(docs), and Themes(HTML/CSS styles).

Our React and Vue components are shown on Storybook. For more information, the Element team can be reached via Microsoft Teams or through our Product Owner, Sam Hay, via email at [email protected]. The storybook site displays our README file and has more information on getting started with installation, for reference.

Install local dependencies and then start up a Storybook instance:

npm i && npm start

Once npm has finished installing packages, the Storybook instance will be built and available locally in browser:

╭────────────────────────────────────────────────────╮
│                                                    │
│   Storybook 6.1.10 started                         │
│   15 s for manager and 37 s for preview            │
│                                                    │
│    Local:            http://localhost:8008/        │
│    On your network:  http://aaa.bbb.ccc.ddd:8008/  │
│                                                    │
╰────────────────────────────────────────────────────╯

Build Process Improvements

The Element Themes build process has been improved to be significantly faster and more efficient. The new "Compile Once, Assemble Many" approach eliminates redundant SCSS compilation, resulting in 60-80% faster build times, especially for multi-theme builds.

Key improvements:

• Components are compiled once instead of multiple times per theme
• Theme-specific styles are compiled separately
• Final CSS files are assembled from pre-compiled components and theme styles

For more details on the build process and how to use it, see the Build Process Documentation.

Table of Contents

Knowledge is power. And knowing is half the battle.

• Release Strategy
• Consumer Guide
  • Package Details
  • Style Integration
  • Markup Integration
• Maintainer Guide
  • Brand Expression
  • Release Guide
  • Repo Structure
  • Theme Anatomy
  • NPM Scripts
  • Build Process
• How to Contribute
  • Code of Conduct
  • Code Style
• Helpful Resources
• Lmnt Namespace
• TODO

People ignore design that ignores people.