milligram / milligram Goto Github PK

Hi there, I need to align column content to the right and wondering if there is any class to do it. Tried with float-right class for my column div with no luck.

thanks

Hello, i worked with grid and i have members page which have 100+ profile cards. I created one row with column-25 but all goes in one line.

Is there any solution for that? i need them like 4 in row then next below, now they are all in one line, my code goes like this

<div class="row">
  <div class="column column-25"></div>
  <div class="column column-25"></div>
   <div class="column column-25"></div>
  <div class="column column-25"></div>
   <div class="column column-25"></div>
  <div class="column column-25"></div>
   <div class="column column-25"></div>
  <div class="column column-25"></div>
</div>

Hello!
I am here just to say that .outline-button selector on example buttons page isn't really outlined:

But if I zoom-in browser, it's come back:

Safari Version 9.0.2 (11601.3.9)
OS X 10.11.2

Shouldn't there be a column-100 as well. In case you want to specify that you indeed want an element to take the entire width. If you just specify column and you put in another it won't take the entire width.

Found the framework linked through the HTML5 Weekly newsletter, and it looks pretty great. However, I found one issue with the media query documentation (http://milligram.github.io/tips.html).

rem units in media queries are relative to the initial value of font-size on the html element, not the declared value (http://www.w3.org/TR/css3-mediaqueries/#units). So in essence, em and rem units in media queries behave the same, and are based on 16px. 40rem, in this instance, doesn't equal 400px; it equals 640px.

You can see an example here: http://codepen.io/acordova/pen/LGmNGP

Under each section in the documentation is a link that says "See more examples of {section} here.". In some of these sections multiple implantations are discussed but not showcased, for instance the Codes section. Please can we either provide more examples or remove the link as it is quite frustrating to the user: landing on a page showing an isolated view of the section you just clicked on, on its own page.

Contributing

for real-time discussion

The original code is:

<a title="Share Milligram on Twitter" href="http://twitter.com/intent/tweet?text=Milligram | A minimalist CSS framework&amp;url=https://github.com/milligram/milligram" target="blank">
  <i class="icon fa fa-twitter share-icon"></i>
</a>

I think that the | is breaking the url, but if we change the | to %7C (url-encode), the issue will be fixed.

<a title="Share Milligram on Twitter" href="http://twitter.com/intent/tweet?text=Milligram %7C A minimalist CSS framework&amp;url=https://github.com/milligram/milligram" target="blank">
  <i class="icon fa fa-twitter share-icon"></i>
</a>

My question is basically this question that is too opinionated for SO:

Why do the element <button> need the class .button to have that style?

I understand that .button is useful to style, say, anchor tags as buttons <a class="button">, but why didn't you design the element <button> from the ground up to have the same style? Like this:

button, input[type="submit"], .button {
  /* button styles */
}

I noticed when viewing the 'Building' notes that the first sentence contaisn Portuguese;

"First install Node.js, em seguida Grunt e Sass for the build process."

This should be;

"First install Node.js, then Grunt and Sass for the build process."

I noticed several rendering issues on the most recent version of Windows Phone 8.1 (8.10.15148.160 on a Lumia 830). Screenshots attached :) Thanks!

Why is that when I wrap my row's columns in a nav tag, they stack each other... it works when I unwrap them.

It is better to have utilities when developing a frameworks, we can have more utilities like center, ellipsis, textNoWrap, textTruncate and much more. looking to give a pull request.

Please update the root font-size to 100% so 1rem will be 16px (instead of 1.5rem=16px) for a more easy calc

Good evening,

I am running a website using Bootstrap 3 (yawn) which displays some data in tables pulled from an API. I am really keen to revamp this website with something more minimal such as Milligram or Skeleton. The one thing that is preventing me from doing so is that, to my knowledge, Milligram nor Skeleton has the table functionality I can achieve using Bootstrap Table. The key functionality I need is to be able to inject the contents of multiple .json files that have been pulled using a php file.

Is there any intention from the Milligram developers to make these kind of functions available for the tables?

Thanks very much in advance.

Pre code blocks with long lines break out of their containers, seen here on the milligram site

Would be good to ship the source files with npm so they can be easily imported into existing projects. 😄

I not found option in flexbox grid to set position and another options exists, I'm testing with https://github.com/matthewsimo/scss-flex-grid to integrate this functions.

It has 11% marketshare on mobile devices.

I created a Scss port because I wanted to import the files in my project.

I'm not sure if we should merge the project into one or not. I can provide a script that automatically converts all the Sass files to Scss when building the project.

Link to fork: https://github.com/TimonVS/milligram-scss

Just wanted to point out that the < ol > and < ul > tags are backwards in the list description (http://milligram.github.io/#lists)

"The unordered list use < ol > element will be marked with a outline circles, the ordered list use < ul > element"

The typography web page has a typo.
I believe:

Archor

should be
Anchor

I don't think I can edit the actual doc pages-maybe I'm wrong.

Textarea is being applied a monospace user agent style for font-family, looking in chrome, using v1.1.0.

I believe it should use the same font applied to body.

hello, I made µg (microgram), a simple customizer for milligram as suggested on #5.

Simply choose the modules that you want to include on your custom build and hit Download. It also comes with normalize to save you time. I know its pretty basic and lacks other options such as live preview, color picker, font family editor, etc. but it does the job.

Is there any reason for ignoring the "src" folder in package.json and bower.json?
I am a beginner, but I thought it is common to include the source files (Sass) in the bower/npm package.
E.g. Bootstrap: https://github.com/twbs/bootstrap/blob/master/bower.json

I hope you can help me.

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

there is a missing semicolon in _Lists.sass

I have just organized and released your code as meteor package. Don't worry I have credited you properly and I'm looking forward to keeping up with this package for your future releases. If you would like to take control and tackle this project I understand. contact me.

I didn't just make a pull request and add the package.js file because I do not want the version people install on there projects cluttered with files like that. It won't be shown but it'll be there. I hope you like this and maybe just maybe you could add something in the readme. That tells you how you would install it in a meteor project just so people know it's a thing that they can do.

install with Meteor

meteor add noahvlncrt:milligram

https://atmospherejs.com/noahvlncrt/milligram

As @fabienwang on another thread, talking about form controls:

"I would add:
an hover effect on the select: with a light background like rgba(64,64,64,0.2)
an hover effect on the input , like a lighter border color"

I do believe it will be a good idea too.

I think the whole project could benefit from transition: all 0.3s ease 0s; on the animations to make it look smoother.

I designed a simple button and a link that looks like a button with these transitions. I called the classes fancy-button and fancy-link in the demo. Hope you like the idea.

buttons for milligram.zip

Hey, having a great time using milligram...really lightweight.

Coming from bootstrap's grids i'm used to having say <div class="col md-7"> going full width on mobile devices. Is this possible with milligram? At the moment I am using <div class="column column-70"> but when it goes down to small screen sizes the with is still 70% not 100%.

Cheers!

Scott

Great work guys, milligram is fantastic.
Here is few suggestions:

• when select element is open, default browser color is used, it can be fixed:

option:checked
    background: linear-gradient($color-primary, $color-primary)

• onclick effect:

.button:active, button:active, input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active
    transition: none
    opacity: 0.7

• some transitions:

.button, button, input, textarea, select
    transition: border 0.3s, background-color 0.3s, color 0.3s

• responsive img:

img
    height: auto
    max-width: 100%

• media query to reset max-width on small screen devices:

// Smaller than mobile screen
@media (max-width: 40.0rem)
    .row
        flex-direction: column
        .column
            max-width: 100%

        .column
            &.column-10, &.column-20, &.column-33, &.column-34, &.column-40, &.column-50, &.column-60, &.column-66, &.column-67, &.column-75, &.column-80, &.column-90
                max-width: 100%

here is example:
http://codepen.io/vujovichigor/pen/NxvoOR
(try resizing browser)

Thank you for milligram :)

Within links we should add the focus state for accessibility reasons.

a
  color: $color-primary
  text-decoration: none

  &:hover,
  &:focus
    color: $color-secondary

https://24ways.org/2009/dont-lose-your-focus

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.

In the demo, the grid items collapse on one another. Only seeing this in IE11.
Also, there is no full list of supported browsers in the docs.

You used clearfix, but perhaps you should go with clear-fix to be consistent with your other classes.

Everything looks very similar to Skeleton (http://getskeleton.com/).

Did you take some inspiration from them?

Hey,

Maybe just me. But I believe column padding should be optional on columns. Just so you can have bumper to bumper grids and nesting becomes easer too.

Happy to do a PR. Thoughts?

Hi CJ,

good job on the visuals! 👏

Unfortunately, all links that should open in a new tab/window have the attribute target=blank instead of target=_blank. For something that is concerned with professional web development this is a bit odd. In case you're wondering what I'm talking about have a look at this page explaining the meaning of _blank.

As I said, love the visuals and minimalist style, this is just meant as a "heads up" 👍

Currently the bower package does not include the src folder. This means that we can't use sass + gulp to customise the milligram output. For example, I might want to ditch grid and code to get a smaller output and I might want to make changes to the colour variables. This is currently not possible because the only two avenues I have to play with are css via bower or css via CDN.

good on desktop browser:

but on mobile device:

Does anyone know what is the problem? I have spent all day, and can not make it work well.

infomations:

The html is like this:

  <body>

    <header>
      <a href='#' class="brand">simple-cms</a> &nbsp
      <a class="item" href='#pages/about.md' class="float-right" >about</a> &nbsp
    </header>

    <div id='container'>
      <main id='contentContainer'>
<div id="container">
      <main id="contentContainer">
         <ul>
           <li>
                <a href="#posts/2016-01-25-Flex-布局.md"><b><big>Flex 布局</big></b></a> &nbsp;
                <small>2016-01-25</small>
              </li>
            <li>
                <a href="#posts/2016-01-25-hi-ddd.md"><b><big>hi ddd</big></b></a> &nbsp;
                <small>2016-01-25</small>
              </li>
            <li>
                <a href="#posts/2016-01-24-tim-is-good.md"><b><big>tim is good</big></b></a> &nbsp;
                <small>2016-01-24</small>
              </li>
             <li>
                <a href="#posts/2016-01-day$-hi-there"><b><big>$ hi th</big></b></a> &nbsp;
                <small>2016-01-da</small>
              </li>
         </ul>
      </main>
    </div>

    <footer>
      <a href='#compose' id='composeLink' style='display:none'><small>compose</small></a>
      <a href='#edit' id='editLink' style='display:none'><small>edit</small></a> &nbsp
      powerd by &nbsp<a href='https://github.com/timqian'>simple-cms</a>
    </footer>

    <script type='text/javascript' src='./dist/bundle.js' charset='utf-8'></script>
  </body>

I add these code into milligram.sass

body
  margin: 0 auto
  display: flex
  flex-direction: column
  min-height: 100vh          // (viewpoint height) 设置 body 最小高度
  max-width: 80rem

#container
  margin-top: 2rem
  flex-grow: 1               // 因为其他 item 的 grow 默认为 0， 所以它占满剩余屏幕

header
  background: linear-gradient(to bottom, white, #f8f8f8)
  padding-left: 1rem
  padding-right: 1rem
  border-bottom: 1px solid #dddddd
  display: flex
  flex-flow: row wrap
  align-items: baseline

// header > a
//   flex: 1 0px

header a.brand
  font-size: 3rem
  margin-right: 1.8rem

header a
  font-size: 2rem

The website is currently here: http://www.timqian.com/simple-cms/

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

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?

The default select styles get removed by appearance: none but no custom styles are in place.

By making the body text color #606c76 you have a contrast ratio of 5.4 (dangerously close to the 4.5 minimum for WCAG AA), which you then reduce further by using font weight 300 by default from a very spindly font, Roboto.
Body text should meet AAA (7.5 contrast ratio) at minimum; if it's going to be viewed on a mobile screen with ambient light, you will fail to be legible very rapidly.
I'd suggest you adjust the default $color-secondary to something much darker - ideally #000 but if you want a slight tint, at least pick something that won't make mobile users in daylight or older people curse you as they try to read your text.

Is there any future plan to support RTL?

in homepage
http://milligram.github.io/index.html
the menu Docs works great, since anchors do exist in the page.

But when you go in any example page, let's say typography.html,
then the Docs menu fails since it tries to go to an anchor that is NOT in that page.

Hence, links in the Docs menu should always be related to index.html
like /index.html#typography instead of #typography

Hi, when I pull in Milligram via npm, I don't have a src directory which is far from ideal. Can you publish the src directory to npm please? Thanks.