Skip to content

gumgum/design-system

Repository files navigation

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

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.

Install Design & Sass Packages

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

Concrete Design System has only two dependencies:

Import Design Styles

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

Overriding Design Styles

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.

@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.

// 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





License

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.