Milligram - A minimalist CSS framework.

  • By Milligram
  • Last update: Jan 7, 2023
  • Comments: 14

Milligram - A minimalist CSS framework.

A minimalist CSS framework.

Travis Status AppVeyor Status Codacy Status Dependencies Status Version Status Download Status Gitter Chat Setup Automated

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!

Download

Install with Bower

$ bower install milligram

Install with npm

$ npm install milligram

Install with Yarn

$ yarn add milligram

Table of Contents

Contributing

Want to contribute? Follow these recommendations.

License

Designed with ♥ by CJ Patoilo. Licensed under the MIT License.

Github

https://github.com/milligram/milligram

Comments(14)

  • 1

    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?

  • 2

    isn't bold

    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:

    <!DOCTYPE html>
<html lang="en-US">

<head>
	<title>Milligram Strong Bug</title>
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
	<link rel="stylesheet" href="css/normalize.css">
	<link rel="stylesheet" href="css/milligram.min.css">
</head>

<body>
	<p>This paragraph should have <strong>strong</strong> text.</p>
	<p>This paragraph should have <b>bold</b> text.</p>
</body>

</html>

    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.css is setting the font-weight to bolder. But it doesn't show up. Changing this to bold makes 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.css is technically correct in that semantically the value bolder is 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 normalize.css and use bold unless 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. 😄

  • 3

    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 <h2> and <h3>, frankly. Chrome is telling me that <h2> is getting 4.2rem and that <h3> is getting 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

  • 4

    Framework Customization

    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.

    Ex: http://globocom.github.io/bootstrap/customize.html

  • 5

    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?

    Version info

    Milligram:

    Other (e.g. normalize.css, node.js, npm, bower, browser, operating system) (if applicable):

    Test case

    Steps to reproduce

    Expected behavior

    Actual behavior

  • 6

    144-responsive-grid

    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.

  • 7

    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.

    Martin

  • 8

    Added divider

    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?

  • 9

    Footer needs to be styled

    image

    These following Changes Could be performed, and I am willing to work on this issue.

    • space can be decreased and a
    • dark background color can be added in footer.
  • 10

    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.

    image

  • 11

    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.

  • 12

    Style for input time

    Input type for time should be styled like other date inputs. It's currently missing in the form file:

    https://github.com/milligram/milligram/blob/d895f179623b56f3a741854998649c6d0c354533/src/_Form.sass#L6-L8

    Version info

    Milligram: 1.4.1

    Test case

    <input type="time">
  • 13

    Cumulative Layout Shift

    https://gtmetrix.com/reports/milligram.io/0NobllyM/

    ELEMENT | CLS CONTRIBUTION -- | -- Lists The List is a very versatile and common way to display items. Milligram …

    | 0.13 Forms The Form has never been exactly fun, and it can be downright painful on …
    | 0.13

  • 14

    Page Design

    1. We can move the logo to the left side of the nav bar.
    2. Change the background colour from white to another light colour. Because this white colure kid of burning eyes.
    3. Add dark mode.
    4. Add some CSS to better the user experience .

Popular Tag

Related