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 thanMobilescreen: 40.0rem(640px)
Larger thanTabletscreen: 80.0rem(1280px)
Larger thanDesktopscreen: 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) {... }

Embed Font

Milligramuses thefont-familyRoboto,created byChristian Robertson,and provided by Google. Customize your projects usingGoogle Fonts.To embed your selected fonts into a webpage, copy this code into the

of your HTML document.

/* Embed Font */


/* Use the following CSS rules to specify these families */

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.

Default.button Outlined.button Clear.button

.button-black .button-black .button-black

.button-small .button-small .button-small

.button-large .button-large .button-large

/* 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 theserecommendations.

Tips

Examples

Contributing

Subscribe to our newsletter