A minimalist CSS framework.
Why it's awesome
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!
Install with Bower
$ bower install milligram
Install with npm
$ npm install milligram
Install with Yarn
$ yarn add milligram
Table of Contents
- Getting Started
- Browser Support
Want to contribute? Follow these recommendations.
Nav bar as part of milligram?
Love the look of this framework, great job!
Upon trying it out I realised that the nav bar that's part of the homepage isn't actually part of milligram. Actually, a few things of the homepage aren't part of milligram. It was easy for me to add it to my project, but are there plans to incorporate it as part of milligram?
Wow, I just realized that
<strong>doesn't get bold by default. In fact it doesn't seem to have any style.
I'm about to give up on Milligram for a "reasonable defaults out of the box" CSS library. I welcome recommendations for something else.
Take for example the following HTML5 file:
Obviously, substitute your own paths for your local Normalize and Milligram copies. (I didn't see any CDN URLs for Milligram or I would have used them in this example.)
Now open it up in Chrome or Firefox (the two browsers I tested this in). You'll see that there is no bold text. There should be.
The cause? This gets interesting. It looks like
normalize.cssis setting the
bolder. But it doesn't show up. Changing this to
boldmakes the bold show up.
The problem seems to be that the Roboto font doesn't support varying degrees of bold.
(At first I said to see http://stackoverflow.com/q/39405766/421049 , but that reference looks unrelated --- although that is a different different issue that presents a problem.)
normalize.cssis technically correct in that semantically the value
bolderis better in this case. See https://www.w3.org/Bugs/Public/show_bug.cgi?id=12154
However because Milligram knows that it is using a font that doesn't support varying degrees of bolder, I think that you must override
boldunless you have a better idea. Otherwise if the font does not show up in bold this is a Milligram --- even if you claim that it's Roboto's fault (and it may be).
That's my opinion at the moment until presented with a better explanation. 😄
Heading sizes need adjustment.
I started using Milligram 1.2.0 primarily for a nice stylesheet for generating documentation. Compared to a lot of CSS frameworks, it looks great on paper.
But the headers! I can't tell the difference between
<h3>, frankly. Chrome is telling me that
3.6rem, but you couldn't tell it by looking at it.
Could Milligram switch to heading sizes that actually look gradually smaller? Or maybe you could point me to a CSS framework that already provides good styling oriented towards documents. Thanks
Since the large differential of framework is to be as light as possible, it would be convenient to have a customization tool. So, the developer can choose which items from framework they need to download separately (Buttons, Typography, Codes, Tables, Blockquotes ...). Therefore, framework would be more objective and, consequently, faster.
Hello- I am brand new to programming and I am stuck on how to use milligram. I tried to follow the outlined steps, but nothing happens. Why is milligram not getting applied to my styling?
Other (e.g. normalize.css, node.js, npm, bower, browser, operating system) (if applicable):
Steps to reproduce
Code Pen: http://codepen.io/csuttie/pen/BWQMwM Per Issue 144: https://github.com/milligram/milligram/issues/144
Adds _ResponsiveGrid.sass loaded after _Grid.sass extending the class. .row is extended with .row.row-responsive to generate flex-wrap: wrap;
new classes specify column percentages and offsets with bootstrap-styled class definitions extending .column when used inside .row.row-responsive: .column-XX-YY, .column-offset-XX-YY
YY is the percentage, ie 10, 33, 50, 90 XX is the breakpoint, ie xs, sm, md, lg
.column-offset-XX-0 is available to remove offsets from smaller breakpoints.
This follows the mobile-first definitions established by the app.
Styling Rows and Columns
I would like to do some simple styling such as top/bottom margin, borders etc. to these. The styles I am adding are having no effect when I put them where I think they should go. Any help would be much appreciated.
I added style for divider in _Divider.sass And I have a question about this commit. After edit changed other style in style.css with "watch" task, is it correct?
Footer needs to be styled
These following Changes Could be performed, and I am willing to work on this issue.
Weird select style on Firexox
Firefox doesn't show the down arrow and also presents a border inside the input.
This happens on the latest version of firefox (52.0.2 (64-bit)) for macos.
remove dist/ from repo. add Travis-CI
As i see a lot of PR changing dist/ css files. I suggest to simply drop them from the repository.
You could also a continuous integration like Travis-CI so it could automatically create a release (using gulp or grunt) you could automatically get that release overwritten with every commit on your master branch.
Just a suggestion.
Style for input time
Input type for
timeshould be styled like other date inputs. It's currently missing in the form file:
Cumulative Layout Shift
ELEMENT | CLS CONTRIBUTION -- | -- Lists The List is a very versatile and common way to display items. Milligram …
Forms The Form has never been exactly fun, and it can be downright painful on … | 0.13