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:

<span class="com">/* Mobile First Media Queries */</span><span class="pln">

</span><span class="com">/* Base style */</span><span class="pln">
</span><span class="pun">{</span><span class="pln"> </span><span class="pun">...</span><span class="pln"> </span><span class="pun">}</span><span class="pln">

</span><span class="com">/* Larger than mobile screen */</span><span class="pln">
</span><span class="lit">@media</span><span class="pln"> </span><span class="pun">(</span><span class="pln">min</span><span class="pun">-</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">40.0rem</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">...</span><span class="pln"> </span><span class="pun">}</span><span class="pln">

</span><span class="com">/* Larger than tablet screen */</span><span class="pln">
</span><span class="lit">@media</span><span class="pln"> </span><span class="pun">(</span><span class="pln">min</span><span class="pun">-</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">80.0rem</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">...</span><span class="pln"> </span><span class="pun">}</span><span class="pln">

</span><span class="com">/* Larger than desktop screen */</span><span class="pln">
</span><span class="lit">@media</span><span class="pln"> </span><span class="pun">(</span><span class="pln">min</span><span class="pun">-</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">120.0rem</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">...</span><span class="pln"> </span><span class="pun">}</span>

Embed Font

Milligram uses the font-family Roboto, created by Christian Robertson, and provided by Google. Customize your projects using Google Fonts. To embed your selected fonts into a webpage, copy this code into the of your HTML document.

<span class="pln"><!-- Embed Font -->
</span><link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto+Slab"><span class="pln">

<!-- Use the following CSS rules to specify these families -->
</span><style><span class="pln">
body {
  font-family: 'Roboto Slab', serif;
}</span></style>

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.

<span class="com">/* Extending The Inheritances */</span><span class="pln">

</span><span class="com">/* Custom color */</span><span class="pln">
</span><span class="pun">.</span><span class="pln">button</span><span class="pun">-</span><span class="pln">black </span><span class="pun">{</span><span class="pln">
  background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> black</span><span class="pun">;</span><span class="pln">
  border</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> black</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="pun">.</span><span class="pln">button</span><span class="pun">-</span><span class="pln">black</span><span class="pun">.</span><span class="pln">button</span><span class="pun">-</span><span class="pln">clear</span><span class="pun">,</span><span class="pln">
</span><span class="pun">.</span><span class="pln">button</span><span class="pun">-</span><span class="pln">black</span><span class="pun">.</span><span class="pln">button</span><span class="pun">-</span><span class="pln">outline </span><span class="pun">{</span><span class="pln">
  background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> transparent</span><span class="pun">;</span><span class="pln">
  color</span><span class="pun">:</span><span class="pln"> black</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="pun">.</span><span class="pln">button</span><span class="pun">-</span><span class="pln">black</span><span class="pun">.</span><span class="pln">button</span><span class="pun">-</span><span class="pln">clear </span><span class="pun">{</span><span class="pln">
  border</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> transparent</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

</span><span class="com">/* Custom size */</span><span class="pln">
</span><span class="pun">.</span><span class="pln">button</span><span class="pun">-</span><span class="pln">small </span><span class="pun">{</span><span class="pln">
  font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="pln"> </span><span class="pun">.</span><span class="lit">8rem</span><span class="pun">;</span><span class="pln">
  height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">2.8rem</span><span class="pun">;</span><span class="pln">
  line</span><span class="pun">-</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">2.8rem</span><span class="pun">;</span><span class="pln">
  padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">1.5rem</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

</span><span class="pun">.</span><span class="pln">button</span><span class="pun">-</span><span class="pln">large </span><span class="pun">{</span><span class="pln">
  font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1.4rem</span><span class="pun">;</span><span class="pln">
  height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">4.5rem</span><span class="pun">;</span><span class="pln">
  line</span><span class="pun">-</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">4.5rem</span><span class="pun">;</span><span class="pln">
  padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">2rem</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span>

Examples

You can view more examples of using Milligram.

• Getting Started
• Typography
• Blockquotes
• Buttons
• Lists
• Forms
• Tables
• Grids
• Code
• Utilities
• Tips
• Browser Support
• Showcase

Contributing

Want to contribute? Follow these recommendations.