Deutsche Bahn Connect Styleguide

This package is to store our colors and stylings for our products at Deutsche Bahn Connect Frontend Web team.

Here you will find Sass variables, Mixins, Helpers and also CSS custom properties which we use across different projets to have a clean and reusable styling of our components.

Installation

Install with npm install --save dbc_styleguide into your project.

Structure

The package has a folder structure where you can find different styling or variables.

/css

Here you will find all build final css files for our clients with all variables and stylings which are special for him.

/src/scss/client

Here you have the client Sass files with all imports and special stylings whch are needed for them. These files are later the ones which are in the final build process.

/src/scss/colors

Here you have files with different colors based for every client we have. These colors can be differnet for every client and also the naming. Here it is important to have variable names which based on the colors to have it clear later when we use it.

/src/scss/components

Here you will find Sass files for global components like the Button or input field. These Sass files can be included later in components or projects when needed.

/src/scss/layout

Here you find Sass files for layout stuff like global content classes, global spaces or header and footer. Also a reset file is there which you can use for minimialistic reset CSS.

/src/scss/transitions

Here you find transitions styles which are based on our company styleguide for emotional or functional transitions.

/src/scss/typography

here you find all Sass fiels for global typography like headlines or normal text.

/src/scss/variables

Here you find our CSS custom properties which are the basement for our components which we use. These are very specific varaibels which are control later the look and feel on the page or components. Also other Sass variables from other folders like /src/scss/colors you will find here.

For every client we have set these variables in a separated client file like cab.scss where all variables for our client CallaBike ist set for the portal later.

How to use it

You can include a ready to go file into your page or component and use only the build css from /css like

@import '/node_modules/dbc_styleguide/css/cab.css';

Or you can include the sass files which you needed direct into your project like

@import '/node_modules/dbc_styleguide/src/scss/components/button.scss';

Contributing

To contribute on the project please create a branch. The name of the branch should have a structure like this [type]/[Ticketdescription]. Examples for some case are:

• feature/New-Styling
• bugfix/Fix-bad-layout
• hotfix/Fix-bad-hidden-style

Commit Message strategy

Our commit strategy is to use the Conventional Commits specification where you start with a type(category): description [flags].

Type is one of the following:

• breaking
• build
• ci
• chore
• docs
• feat
• fix
• other
• perf
• refactor
• revert
• style
• test

Where flags is an optional comma-separated list of one or more of the following (must be surrounded in square brackets):

breaking: alters type to be a breaking change

And category can be anything of your choice. If you use a type not found in the list (but it still follows the same format of the message), it'll be grouped under other.

1. Clone the project
2. Create a feature/bugfix or hotfix Branch from 'dev-Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes with our Commit Message Srategy in mind.
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request your-branch -> dev

Deploy

To deploy a we use a package called generate-changelog to created automatically a changelog and update our styleguide with a valid SemVer semantic.

• push or merge everything to mainbranch
• call one of the following commands
  • release:patch for Patch release
  • release:minor for a minor release
  • release:major for a major release
• Check if you are logged in to npm to push the new version)
• push new package version to npm with npm publish

Contact

DB Connect Web Team - Email