Milligram for CSS Layouts and Default Styles

Ever use Bootstrap? Of course you have. It's the most popular CSS framework on the market, and it's one of the best ways to prototype a web application. You can focus on the programming, and let Bootstrap handle the heavy-lifting on the design elements.

Bootstrap is great, but when you start to venture into larger applications with greater web components, you often end up with nested divs upon nested divs in an almost unmanageable condition, and the various xs,sm,md, and lg size variations for responsive design--although effective for maximum configuration of different screens/devices--can clutter larger applications, and sometimes read in an unintuitive manner.

Sometimes you don't need everything Bootstrap has to offer, and that's where Milligram comes in:

Milligram provides a minimal setup of styles for a fast and clean starting point. Just it! Only 2kb gzipped! It's not about a UI framework. Specially designed for better performance and higher productivity with fewer properties to reset resulting in cleaner code. Hope you enjoy!

Minimal is the truth. There are no navbars or modal dialogs. Milligram gives you default styling based on rem units so you can easily style elements based on the units of the root element. It also gives you default styles for important components you don't want to have to constantly style like form elements and tables.

Just like with Bootstrap, the most important ability of Milligram rests with its handling of layouts:

The Grid is a fluid system with a max width of 70.0rem (1120px), that shrinks with the browser/device at smaller sizes. The max width can be changed with one line of CSS and all columns will resize accordingly. Milligram is different than most because of its use of the CSS Flexible Box Layout Module standard. The advantage is the simplicity, and we know that a functional code is very important for maintainability and scalability.

Milligram's layout system follows a row/column naming convention that is a lot easier to intuit when viewed in a complex application. Here's the layout example from the Milligram web site:

<div class="container">
      
        <div class="row">
          <div class="column">.column</div>
          <div class="column">.column</div>
          <div class="column">.column</div>
          <div class="column">.column</div>
        </div>
      
        <div class="row">
          <div class="column">.column</div>
          <div class="column column-50 column-offset-25">.column column-50 column-offset-25</div>
        </div>
      
      </div>
      

Each row has a class of row and each column has a class of column. If you want to specify the span of a column, you add another class that includes the percentage, such as the column-50 class. To handle column offsets, you simply insert a column-offset-* class where * represents the offset percentage (in this case, 25).

It doesn't get much simpler than that. I recently reworked my personal web site to use Milligram. It's a one page web site with almost no styling, meant to just be a short introduction, but working with Milligram was a nice feel. I can definitely see using it in larger projects where I need some no-fuss styling to forms and layouts, but without the bulk that can often be associated with a Bootstrap design.