GumGum Concrete Design System

Concrete is inspired by the modern design of GumGum’s Santa Monica office featuring white walls and exposed concrete.

Breaking Changes: 2.0 has recently been released due to an upcoming deprecation of how scss calculates math. This breaking change requires using sass package and no longer supports node-sass. 2.1.0 also contains breaking changes to remove deprecated components. See CHANGELOG.md for details.

Table of Contents

- Usage
- Local Setup
- Roadmap
- About Concrete

Usage

At GumGum we build our web applications with React and built this design system to support most React applications. It works with create-react-app out of the box, but some applications may require additional webpack configurations.

$3

``bash
// Design system is built-in SCSS, so sass package is required for the build process.
$ yarn add sass gumgum-design
`

- GumGum NPM Package
- Sass NPM Package

Concrete Design System has only two dependencies:

- FontSource Public Sans ( font )
- FontAwesome ( icon font)

$3

`scss
// In the main SCSS file (e.g. index.scss)
@import '~gumgum-design/styles/scss/index';
`

$3

There are two simple ways to override design styles such as color variables. Override styles can be put into a different file or they can be placed above the import.

`scss
@import './override';
@import '~gumgum-design/styles/scss/index';

// or

$primaryColor: #bada55;
@import '~gumgum-design/styles/scss/index';
`

Running Design System Locally

The design system documentation is built using Next.js and is simple to get running.

`bash
// Install packages
$ yarn install

// Run locally
$ yarn dev
``

Roadmap

- ~~Main Docs~~
- ~~node-sass to sass~~
- ~~Main internal web app integrations~~
- ~~Font Awesome 6 Upgrade~~
- Detailed Doc Examples
- ~Deprecate Components~/Sizes/Colors
- Centralized Design Token System
- Mobile/Browser Fixes
- Figma Design File Update
- Synchronized Design Tokens (Figma ⟵⟶ Design System)
- Theme Modes
- Improved Version Control
- Animations
- Unit Testing and Optimization
- CSS Only Build
- Simplified UI inventory & build process
- Documentation Search and templates
- Light & Dark Theme Mode
- Improved Accessibility
- Unit Testing
- ~Improved Release Notes~

$3

Apache 2.0

Important Note: This project does not redistribute third-party libraries but identifies their availability. The libraries called by this project are subject to their creator licenses. Remember to consult and comply with all licenses in your uses.