Styleguide is a project that is based around keeping a living list of styles that various Sugar App projects have used to help other developers and partners to style things “the Sugar Way.” Styleguide does not create nor maintain components for devs to use. It simply allows devs to add mixins to their LESS code to make a button “Sugar Red” or other specific styles like colors, paddings, borders, margins, etc.
This project should allow other developers to import Sugar Styleguide and easily be able to make their creation look like it was something actually created by Sugar devs; The Sugar App should show up inside Sugar looking looking like something that should actually be in Sugar.
If you are using CSS Modules it’s important to take note that all base element overrides should be nested within a class or an id. This is to avoid any Sugar App styling overriding any base Sugar styles.
Don’t
// yourComponent.less
h1 { font-size: 25px; }
Do
// yourComponent.less
.yourComponent {
h1 { font-size: 25px; }
}