⚠️ DEPRECATION WARNING – Use waffles.datacamp.com instead!
Codename: Cluster

This app runs the style guide first approach that DataCamp uses for implementing UI. It contains real markup that can be copied and brought into the app that you are building in. The SCSS will already be present in the app and the JavaScript is on a per-app basis.

Version: 10.0.0 — Please use #engineering-frontend in Slack for any questions or suggestions.

Initial Setup

npm install @datacamp/styleguide

The package contains the SCSS (and optional JavaScript) for all of the existing sections. Imports vary per app, but should be Core, applicable Core Components, and the section related to the app.

In an existing app, there is potential for rendering issues from existing CSS. Related imports and CSS that is overriding the style guide items should be removed.


npm update @datacamp/styleguide

Releases will include instructions for necessary updates. For the time being updates should be implemented by the front-end team.

Current Status current version: 10.0.0

App v Core Core Components Custom No Legacy Marketing Learn Teach Enterprise
main-app 9.7.0 - - -
campus-app 5.4 - - -
teach-app 8.0 - - -
teach-editor-app-v2 7.8 - - -
enterprise-app 1.3 - - - -
enterprise-frontend 8.3 - - - -
challenges-frontend - - - -
projects-frontend - - - -

Implementation Roadmap

App Goal When
enterprise-app Upgrade to 7.x TBD (depending on managed solution)
campus-app Upgrade to 7.x, Import Core Components Q2 2018
campus-app and teach-app Add React Components Q2/Q3 2018
challenges-frontend Add Core, Add Learn, Reorganize Custom Q3 2018
projects-frontend Add Core, Add Learn, Reorganize Custom Q3 2018