owenversteeg / min Goto Github PK

Hi, great framework!

However, from looking at the source I am not 100% sure about what would be the best way to add one or two additional breakpoints for media queries and still keep compatibility with the grid and future updates. Would you like to explain in a few sentences what is the recommended method of adding, say at 320 and 720 pixels witdth? This would be very appreciated!

Thanks!

Mostly hindered by IE4's apparent lack of color, spacing, and positioning abilities.

Also a major roadblock is that conditional comments only work in IE 5 and above.

IE4 is 15 years and 7 months old as of today (5/19/2013)

If I recall correctly, there is a hackish alternative to conditional comments for extremely early IEs.

In Firefox 40, if you shrink the screen horizontally until you see the mobile menu at the top:

1. the "x" close button shows underneath the menu expansion button
2. the "x" close button isn't bottom-aligned with the rest of the menu, ie. it's lower than the menu
3. if you click "Min" in this menu, it briefly shows the menu but then the browser reloads the page and it goes away; I believe your intent is to merely show the menu (this happens in Chrome too, but Chrome doesn't have the other issues)

Love your tiny framework, wondering if you're planning to integrate flex grid.

Min's LESS part is at the point where I can tag it as 2.0 and shipit, but the Sass version is still stuck in the dark ages in many places.

I'll do what I can now, but since Sass is more your specialty I think you (@scottaohara) should also take a look at it.

Desktop or mobile chrome, if you're viewing mincss.com in a small screen such that you see the mobile top menu, and you try to click a link in that menu, it simply collapses the menu and doesn't go anywhere.

Remove comma (,) from last item on $grid-list.

Some people have criticized the current button styles, so this thread is where people can vote on button styles.

Current buttons:

New button design A:

New button design B:

New button design C:

Please vote (with comments) for which button design you like.

Hey! Is there any way to create a multicolum listing with ul, li tags? Thanks.

12 columns is more of an industry standard. Pure+Bootstrap use a 12 column grid as well.

If anyone has any reasons against this, please comment!

It would be nice to have min available through Bower registry.

Some people mentioned how they disliked the input styles. Thus, I propose a vote similar to that of the buttons.

Current style (choice A):

Rounded borders (choice B):

Rounded borders and a shadow (choice C):

Shadow (choice D):

Rounded borders are made with the code .addon-front + input { 0 5px 5px 0; } textarea, input { border-radius: 5px; } - unfortunately, we can't put a combinator inside a negation selector to save space.

A shadow is made with the code input[type='text'], textarea { box-shadow: inset 0px 2px 2px 0px rgba(0,0,0,.075); }

For some reason, Chromium on Arch Linux displays addon-fronts weirdly (depending on the fonts installed.)

After digging deeper, I found out that this is caused by Chrome specifying

input {
    font: -webkit-small-control;
}

This happens due to the fact that Gnome only installs some of the fonts that Chrome likes by default. Thus, addon-fronts are displayed in the default sans-serif font and inputs are displayed in the default -webkit-small-control font. With Gnome installed, this is an issue as these are two different fonts, with two different line-heights. This makes the whole thing look screwy - the top of the addon-front not match up with the top of the input.

A fix is simple: just change the code in the "general" file to be body, textarea, input instead of body, textarea. This raises the specificity of the font: 16px sans-serif rule enough to override the useragent stylesheet.

Of course, this only affects users of Arch Linux with Gnome installed that are running Chromium, so there are probably about seven people affected in total.

I'm targeting this for Min 2.5 because I really don't feel like refactoring an extra 5 bytes out of Min for the minimal benefit of a few Arch+Gnome+Chromium users.

Currently Min is at 988 bytes (caused by removing -front from the addon-front class (it didn't make sense to have there, as addon-front can be used on the back and front of an input) and reordering some stuff) so we have 7 bytes to do something with. Any ideas?

Adding messages (from the min+ plugin) adds 20 bytes, so that's probably not feasible. Maybe add some feature from Bootstrap?

@scottaohara Any ideas?

GRAAAH

I'm going to put this off to Min 2.5 as it's an extremely small visual bug that affects a very small number of people. Plus I can't find a fix that doesn't take up a lot of space. Any suggestions?

When I first tried the Customized Download feature, it didn't work. I attempted several more times, and it still didn't work. I eventually had to go to IE to finagle it into working, which it did on the first try. Using Win8/FF Latest.

Hi, I like the simplicity of the project since you commented on HN on a thread on Picnic CSS. I added it to my README.md as an alternative to Picnic, but apparently it has even since changed the domain name as per this pull request.

But as I search the web, there are many references to minfwk.com. So it'd be appropriate to make a permanent redirect from minfwk.com to mincss.com, so future visitors to the first can reach the second. This would make the website retro-compatible with the hundreds of articles on the internet that are now pointing to the wrong domain and in exchange gain a bit more of traffic that now it's ending on a 404.

Keep it up, Min CSS rocks 😄

Currently, Min is missing many features that Bootstrap has.

Features that may be implemented in Min core:

• Blockquotes: blockquote { padding: 10px 20px; border-left: 5px solid #ccc; }
• Blockquote citations: blockquote footer:before { content: '\2014 \00A0'; } blockquote footer { color: #888; margin-top: 10px; }
• Pre elements for code

Features that exist, but need to be documented:

• Italics with em and i
• Bold text with b
• the address element
• Lists with <ol> <li> </li> </ol> and <ul> <li> </li> </ul>

Bootstrap features that are uncommonly used, so they will be created in min-bootstrap-plugin:

• the small element, but only for headings: h1 small, h2 small, h3 small, h4 .small, h5 .small, h6 .small { font-size: 65%; color: #999; }
• the .lead class: .lead { font-size: 1.5em; }
• the attr element: attr { cursor: help; }
• the .initialism class, but only for attr elements: attr.initialism { font-size: 90%; text-transform: uppercase; }
• Text-aligning classes: .text-left { text-align: left; } .text-right { text-align: right; } .text-center { text-align: center; } .text-justify { text-align: justify; }
• the list-inline class: .list-inline { padding-left: 0; } .list-inline>li:first-child { padding-left: 0; } .list-inline>li { padding: 0 5px; }
• Description lists: dl { margin-top: 0; } dt { font-weight: bold; }
• Horizontal description lists: .dl-horizontal dt { float: left; width: 160px; clear: left; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dl-horizontal dd { margin-left: 180px; }
• Inline code blocks with the code element: code { padding: 2px 4px; background: #eee; border-radius: 4px; }
• Keyboard user input in pre elements (code blocks): kbd { padding: 2px 4px; color: #fff; background: #333; border-radius: 3px; font-family: monospace; }
• Pre-scrollable classes added to pre elements: pre.pre-scrollable { max-height: 340px; overflow-y: scroll; }
• Bordered tables: table.bordered, table.bordered td { border: 1px solid; }

All the table, button, image, helper class, and responsive helper class shenanigans have not yet been added. Please feel free to contribute in the comments. I left off at http://getbootstrap.com/css/#tables

Currently, the Bootstrap to Min converter is broken due to recent changes. Try out the 1st or 3rd examples to see what I mean.

Also, there should be some way to export HTML.

When trying to add min to https://rails-assets.org, as a component, I get the following two messages:

• min has no versions defined. Please create an issue in component's repository.
• No tag found that was able to satisfy 1.5

This seems odd, since https://github.com/minfwk/min-bower does have a tagged version of min (v1.5). However, I noticed that bower.json is available in the Master branch, but NOT in the v1.5 tag, maybe that is causing the issue?

It would be nice to get this working under rails-assets, as the service is a neat way to use min under Rails. Could you try to move the bower.json file into the v1.5 release?

I tested the new icons on a Mac and noticed that a few looked screwy and a few didn't show up; I remember that the keyboard icon specifically was messed up.

I'll check the icons tomorrow and see if the font-size needs to be bumped up; however, I think the Unicode font also isn't getting applied for some reason.

Min should have a support chart like the ones at caniuse.

On the download page, the generated CSS has

[...] "undefined.nav,.nav .current,. " [..]

It seems the "css" global (from compiledcss.js) lacks the "inputs" value.

Min's current website is quite outdated, and the source is kind of hideous in places. It's also slightly buggy.

The example page for Min 2.0 will be here: http://pasteht.ml/3M94h (the URL will still be minfwk.com, this is just a demo.)

This also features the new responsive navbar styling I hope to implement soon. Resize your browser window to test it out - it's entirely CSS-based, unlike Bootstrap.

Please leave feedback!

I'm trying to emulate navbar-right class in bootstrap to right align some menu items. The following appears to work, but is there a better way to do this?

@media screen and (min-width: 500px) {
  .nav-right {
    float: right;
    padding-top: 7px;
  }
}

<span class="nav-right">
  <a href="#">Register</a>
  <a href="#">Log in</a>
</span>

Maybe that's something to consider, even if it's gonna eat a few more bytes :)

CSS Shrink is able to reduce the CDN version of min to 941 bytes gzipped.

You should consider using it instead.

min.less is not loading on http://minfwk.com/beta.html

IE5.5 only for some weird reason; IE5, 5.01, and 6 all work fine.

Suggest adding .ie class; however, this'll likely take up a few extra bytes.

Also, put all things relating to forms back in there. (Practically what you said to do in #33)

I'll either do this sometime later or if you want to do it now that's fine.

Currently, there is absolutely no documentation to speak of.

This will be fixed by adding an example of each type of element underneath each element.

It should presumably read "Pages built with Min can load faster than a blink of an eye."

Hi guys. This is more of a request than a bug.
Would it be possible to update the CDN version of min.css to something a bit more current. As it seems the webpage is already ahead of the CDN and, due to that, some of the examples from the "docs" section do not work with the CDN version of min.css.

For instance the button styling has changed a lot. The version of min.css used and described on the webpage uses only the "btn(-*)" classes, while the CDN version still needs the <button> element.

Currently, when someone reads through the codebase it's occasionally difficult to distinguish between a property intended for positioning and a property intended for visual effect.

For example:

• the first few lines of grid.less
• most places where padding is involved, the situation is ambiguous (especially for newcomers)
• a large portion of navbar.less

This could be fixed by marking positioning properties with ALL CAPS, a Capitalfirstletter, CamelCase or camelCase (as CSS is case-insensitive in property names)

See the screenshot below:

Probably due to the quirks mentioned in:

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Gecko_notes
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Notes
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#Gecko_notes

box-sizing: border-box; has become the industry standard because it gets the developer more precise results on the code they're working on. I don't think I've seen a boilerplate framework that doesn't use it. I just threw a min navbar into a site using

*, *:before, *:after {
    box-sizing: border-box;
}

and the nav bar is ruined--the background doesn't strech the full length. Making the framework fully compatable with box-sizing: border-box; seems important in a general sense to me, as, going forward, almost all sites are going to be using it. It's an immediate turn off that Min doesn't work with it.

http://www.scottohara.me/article/abcss.html

Although I'm currently using something close to property group ordering, it's not really consistent and ABCSS is much simpler. It's now a full month and a half after I swore I'd do this first thing in the morning, so I'm opening an issue.

It looks like @scottaohara's already done this for the Sass part so all I need to do is the LESS part.

adding this issue as a reminder to myself to continue to update the Sass files to fall in line with the additional changes that have been made to the Less branch.

Someone suggested that we use mincss.com instead of minfwk.com, as it's much more readable. I liked this idea, so I snapped up mincss.com.

Min will still be named min, the only change will be everywhere we use minfwk to change to mincss. This also goes for the organization name - I reserved the mincss name, now I only have to change all the URLs and whatnot to point to the new URL.

As I'm discovering (thanks partially to @cvrebert) Min may have a few browser/OS bugs still left to work out. Hopefully #26 was the last, but I'll be checking on different platforms with the help of @saucelabs and their generous donation of an unlimited Sauce account.

I'm currently using min to build a website. For previous projects using min I downloaded min myself because it was the only client side asset I needed to handle. For this project I'm using Bower because I have a bunch of client side assets. I set up my classes and stuff the same way I always did, but when I loaded up the page it looked awful.

Bower min is missing the following classes:

1. btn-close
2. btn
3. btn-sm

It also does not allow the user to give button styling to anchor links as one familiar to the min framework may be used to.

Decided to break this out of the pull request so as not to deter from that topic.

Now, as for a potential Sass version.

You're obviously right in that it would add double work to Min. With that in mind, I completely understand why you wouldn't want to take this on, which is why I wanted to bring your attention to it, rather than just creating a pull request for it.

I personally prefer Sass to LESS. And maybe it's because of that bias, but I perceive there to be a faster growing community around Sass than LESS. Most of the big frameworks are built in Sass, and even Bootstraps has recently released an official port of it as a Sass library.

The obvious value in providing both is that Min would then be available to those that prefer one language to the other.

Min is a small enough framework that updating both, while it would be extra work, would be relatively simple. Most of the syntax is the same between the two languages, and updating would likely be no worse than having to copy and paste an update from one into the other --- (converting this over to Sass really only took about 30 minutes and that was mostly due to adding the build customization into the Sass version, as opposed to having it be a separate build page -- which cuts down on additional build updates that are separate pages/JS in the Less version).

I would be happy to help you maintain the Sass version as part or your repo, or alternatively as a separate repo (either as the fork I've created or an actual new repo) that I would update based on your direction from the official Less branch.

I guess that's a good enough place to end this for now. Whatever you decide is cool by me. Again, thanks for being open to the suggestion.

Screenshot of part of the docs website in Chrome on Mac OS X:

Remove % on .table { @extend %w-100; }

This is a hell of a lot easier than copying and pasting your into the text field.

I'd like to see those list-groups in min :)

http://getbootstrap.com/components/#list-group

In the index.html file that's part of the repo (as well as on http://minfwk.com/) when scaling the browser down to a smaller width, the documentation runs off the side of the page, creating a horizontal scroll bar.

If that's intended, due to the sample code being in pre tags, then disregard.

However, I don't imagine the code sample, in the Grid section, should be behaving the way it does as seen in the attached screenshot.

Currently at 1114 bytes minified and gzipped.

Probably achievable by shortening of the input jumble that currently exists.

• Fix #15
• Finish the Min Bootstrap plugin
• Finish the Min Navbar plugin
• Final (no, really final this time guys) browser testing