{"id":28358,"date":"2019-11-05T18:19:55","date_gmt":"2019-11-05T10:19:55","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=28358"},"modified":"2023-03-31T17:32:55","modified_gmt":"2023-03-31T09:32:55","slug":"milligram-css","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/milligram-css\/","title":{"rendered":"Milligram.css – Minimalist Frontend Library for Developers"},"content":{"rendered":"

From Bootstrap<\/a> to Foundation<\/a> there\u2019s no shortage of custom CSS libraries. But what if you need a very simple lightweight option for new web projects? Many existing CSS libraries are heavy and brimming with excessive features<\/strong>.<\/p>\n

But Milligram<\/a> is a super lightweight alternative totaling about 8KB in a minified .css file<\/strong>. It can be installed via Bower, NPM, or direct download hosted locally or through a CDN.<\/p>\n

\"milligram<\/figure>\n

By default the library is built on Normalize so you\u2019ll need to include this library too<\/strong>. But there\u2019s a handy getting started guide<\/a> on the Milligram homepage that can help you get moving quickly.<\/p>\n

If you\u2019re just testing it out then try adding the files directly from a live CDN<\/a> instead of downloading them locally.<\/strong> This way you can setup a sample project on CodePen or another cloud-based IDE<\/a>.<\/p>\n

Also the library uses the free Roboto font<\/a> hosted by Google for all its typography. You can use Milligram without Roboto but you won\u2019t get the same sleek font designs.<\/p>\n

The extra Normalize library & Google Font can feel like a burden. But they can all be hosted on external CDNs<\/strong> so you don\u2019t need to worry about HTTP load times from your server<\/strong>. And Milligram comes with default formatting for all the basic page elements:<\/p>\n

    \n
  • Headers & paragraphs<\/li>\n
  • Ordered & unordered lists<\/li>\n
  • Blockquotes<\/li>\n
  • Tables<\/li>\n
  • Form fields<\/li>\n
  • Images with captions<\/li>\n
  • And quite a bit more!<\/li>\n<\/ul>\n

    Take a peek at the Milligram.css homepage<\/a> to find source code samples and to grab the CDN links. You can also see a kitchen sink demo<\/a> embedded below featuring all the custom-styled Milligram page elements.<\/p>\n

    \n<\/p>