Components

Guidelines for how to code Modulz components.

Naming

Components use PascalCase. Use a single word where possible.

// Bad
.componentName { }
.component-name { }

// Good
.ComponentName { }

Default styles

Define your component's default styles inside the root declaration. Default styles include functional styles, default size styles, default prop styles and any styles necessary to render the component in its default state. All CSS properties should be declared in alphabetical order.

.Component {
  // Default styles
}

Size

Components often require a variety of sizes for various situations within a product. To define size variations, add a set of modifier classes based on a numeric scale—size1, size2, size3 etc. Most components work best with less than 3 sizes. Make sure to only declare size specific CSS properties inside a size modifier. Default size styles can be coded into the root component declaration.

.Component.size1 {
  // Styles specific to size 1
}

.Component.size2 {
  // Styles specific to size 2
}

Responsive sizes can be added by using the four responsive prefix classes: bp1-, bp2-, bp3- and bp4- and wrapping each declaration in a media query block. All component sizes should be immutable, which means, a component should never change size unless a responsive class is added.

.Component.size1 { }
.Component.size2 { }

@media (--breakpoint-1) {
  .Component.bp1-size1 { }
  .Component.bp1-size2 { }
}

@media (--breakpoint-2) {
  .Component.bp2-size1 { }
  .Component.bp2-size2 { }
}

@media (--breakpoint-3) {
  .Component.bp3-size1 { }
  .Component.bp3-size2 { }
}

@media (--breakpoint-4) {
  .Component.bp4-size1 { }
  .Component.bp4-size2 { }
}

Props

Most components demand slight functional, semantic or aesthetic variations in order to adapt to particular situations in a product. Where possible, stick the these 4 common prop types before defining a custom prop.

  • Color props apply an aesthetic/semantic theme—e.g. highlighting a "primary" button, an "owner's" Avatar or a "negative" Badge.

  • Alignment props alter the alignment of components—e.g. a left-aligned Context or a Button at the end of a group.

  • Expanded prop stretches a component horizontally or vertically to fill its container—e.g. expanding a Section to the height of the viewport.

  • Interactive prop applies hover effects to components where interactivity is optional—e.g. a clickable Card, Avatar or Label.

  • Custom props apply uncommon styles to components—e.g. a nested Avatar.

.Component.blue {
  // Primary prop styles
}

.Component.left {
  // Left-aligned prop styles
}

.Component.expanded {
  // Expanded prop styles
}

.Component.interactive {
  // Interactive prop styles
}

.Component.custom {
  // Custom prop styles
}

State

Components can change state based on an interaction elsewhere in a product or a specific set of criteria failing or passing. State classes are defined with an is- prefix. Where possible, stick to the 4 states listed below.

.Component.is-disabled {
  // Disabled state styles
}

.Component.is-active {
  // Active state styles
}

.Component.is-invalid {
  // Invalid state styles
}

.Component.is-valid {
  // Valid state styles
}