dbc_styleguide v5.1.0
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
.
- Clone the project
- Create a feature/bugfix or hotfix Branch from '
dev
-Branch (git checkout -b feature/AmazingFeature
) - Commit your Changes with our Commit Message Srategy in mind.
- Push to the Branch (
git push origin feature/AmazingFeature
) - 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
main
branch - call one of the following commands
release:patch
for Patch releaserelease:minor
for a minor releaserelease: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
5 months ago
6 months ago
10 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago