Tips

Tips, techniques, and best practice on using Cascading Style Sheets.

Mobile First

The Mobile First is the design strategy that takes priority development for mobile devices like smartphones and tablets. It means all styles outside of a media queries apply to all devices, then larger screens are targeted for enhancement. This prevents small devices from having to parse tons of unused CSS. Milligram use some breakpoints like these:

  • Larger than Mobile screen: 40.0rem (640px)
  • Larger than Tablet screen: 80.0rem (1280px)
  • Larger than Desktop screen: 120.0rem (1920px)
/* Mobile First Media Queries */

/* Base style */
{ ... }

/* Larger than mobile screen */
@media (min-width: 40.0rem) { ... }

/* Larger than tablet screen */
@media (min-width: 80.0rem) { ... }

/* Larger than desktop screen */
@media (min-width: 120.0rem) { ... }

See more examples of tips here.

Extending The Inheritances

The style of an element can be defined in several different locations, which interact in a complex way. It is this form of interaction makes CSS powerful, but it can make it confusing and difficult to debug.

/* Extending The Inheritances */

/* Custom color */
.button-black {
  background-color: black;
  border-color: black;
}
.button-black.button-clear,
.button-black.button-outline {
  background-color: transparent;
  color: black;
}
.button-black.button-clear {
  border-color: transparent;
}

/* Custom size */
.button-small {
  font-size: .8rem;
  height: 2.8rem;
  line-height: 2.8rem;
  padding: 0 1.5rem;
}

.button-large {
  font-size: 1.4rem;
  height: 4.5rem;
  line-height: 4.5rem;
  padding: 0 2rem;
}

Examples

You can view more examples of using Milligram.

Contributing

Want to contribute? Follow these recommendations.