Mini.css – Minimal, responsive, style-agnostic CSS framework
minicss.org
minicss.org
Compare mini.css (https://github.com/Chalarangelo/mini.css/blob/master/src/min...) to Milligram (https://github.com/milligram/milligram/blob/master/src/_Form...).
Unless you're planning on inlining your CSS in the head tag, IMO the network difference between 7kb and 20kb of CSS is just splitting hairs. I've gotten far more out of optimizing my CSS for programmer understanding than network size (though the two tend to be correlated!).
Are there any examples of sites(gallery) of sites built with milligram? I'd like to see some real-world examples.
background: url('data:image/svg+xml;utf8,<svg ...I personally love http://basscss.com/ for a minimal and side-effect free (the real goal) CSS framework, as it has one of the best class naming schemes I've seen.
Each component is focused on doing one thing and one thing well. You basically build up the styles with each class you add to an element. Composed via a combinations of smaller pieces, unix style, rather than complex multi-layered components with deep nesting. Which is an interesting approach when you try to apply the same idea to your own CSS. See the Design Principles for more: http://basscss.com/v7/docs/reference/principles/
The code is also very readable and integrates perfectly with PostCSS. They also have a React version.
Regardless, I know managing OSS is tough but I hope JXNBLK keeps active on the project and other people help him out.
This question would have to be answered by https://twitter.com/jxnblk though
Edit: I asked him on Twitter
> I'd consider it feature-complete, but not unmaintained. Most of the open issues are minor and just need to be triaged https://twitter.com/jxnblk/status/860208848359088129
<h2 class="h1">Larger than default h2 style, but semantically correct</h2>
I also don't see how
<p class="bold text-decoration-none caps">Bold</p>
<p style="font-weight: bold; text-transform: uppercase; text-decoration: none">Bold</p>
.paragraph--emphasize {
@extend .bold, .text-decoration-none, .caps;
}
Because the HTML tags you choose affect document structure and SEO. CSS classes don't; they only affect aesthetics.
wow, i just threw up in my mouth
<h2 class="larger">
Are there any rough guidelines about how often can one submit something?
PS: Only asking for my own education for my future submissions.
https://news.ycombinator.com/item?id=14255809
https://news.ycombinator.com/item?id=14244693
https://news.ycombinator.com/item?id=14227177
No, that's not ok.
(Things that don't get attention can be reposted, but 5 times within a week feels a bit much to me)
Fantastic work so far to the developers that said. I will be keeping an eye on this. Good luck!
IE11 13.62% IE8 2.25% IE9 1.32% IE10 1.06%
Wikimedia global all-device browsing for April says:
IE11 4.8% IE7 3.0% IE9 0.43% IE6 0.38% IE8 0.25% IE10 0.23% IE4 0.22% (! I don't know what this is about, maybe an old mobile version?)
[0] https://www.netmarketshare.com/browser-market-share.aspx?qpr...
[1] https://analytics.wikimedia.org/dashboards/browsers/#all-sit...
It's all about your own users. I'm doing UX and front-end for a company that deals with a lot of IE8 users... -_-
The ongoing theory is that they are on hacked XP copies since that traffic is coming out of China.
[0] https://hashnode.com/post/the-legacy-support-conundrum-or-wh...
On another note, we had a great blast using http://tachyons.io/ It was a game changer for me, and made me remarry CSS. And spoiler alert, it was way smaller after a build step than 7KB, while not feeling like working in tight pants.
Tachyons is where you go when you finally want to be happy with CSS.
I ported it for react-native, so you can style mobile-apps with it as well: https://github.com/tachyons-css/react-native-style-tachyons
It's a CSS switcher for previewing minimal frameworks, which you can drop in to any page or site to quickly preview what it would look like in 50 or 60 different CSS frameworks (including mini, pavilion, basscss, milligram, and others mentioned in this thread). There's even a bookmarklet to preview switching the css on any site.
When using a framework, you want it to just work on all platforms. When I look at bootstrap issues, I see so many issues of the form X does not work on Y and then it gets fixed. These little kinks are hard to get right and I am not sure its worth reinventing the wheel unless there is a clear benefit other than size.
For users with high-speed connections on computers or newer phones. In normal first-world conditions. Your users are not everyone else's users.
What's important is how much you need to download to be able to do the first meaningful interaction. Downloading 5mb of JavaScript and CSS for your cool dashboard graph might be fine, but you should not need to download that much just to get some reasonable layout or have a look at the possible menu alternatives.
1. It actually loads very slow, takes me 5 seconds for the site to become usable on 100Mbit/s and a new fast i7, compared with google.com or hacker news which takes fractions of a second.
2. It is not the first site you go to with a shitty connection as the reason you go there is to watch heavy bandwidth videos.
3. It is essentially a single page app, once loaded, you will stay on the page for the duration of the video and the next video will be played on the same page without reloading.
(Edited to be nicer/more-helpful).
Edit: examples
https://github.com/greenriver/boston-cas/blob/master/app/ass...
https://github.com/greenriver/boston-cas/blob/master/app/ass...
However, the framework says its responsive, yet the navigation menu doesn't resize on small screens. That's a bit disappointing. I'd like to have something that will give a chevron or hamburger navigation menu without resorting to Javascript.
Full disclosure: I've created Min. It's the world's smallest CSS framework and it has a hamburger menu that works without Javascript (which took a lot of work to make.)
Even without that, though, Min is really exactly what I think of when I need a lightweight framework that gets out of my way.
Maybe some better sea monster repellent? ;-)
Option three is likely to fall on deaf ears as the decision of how much time is worth spending on compatibility testing has already been made, so unless you can give a really compelling reason the won't want to. Option two is only viable if you (or your team more generally) have both relevant experience and time, which is often not the case. So this library may not be for you...
Not supporting at least IE11 is rare currently in my experience but I suspect it is a condition that will steadily grow more widespread. You may find that everything in the library works well enough in IE11 and the developers try to not intentionally do something that would change this, but don't feel they have the time to test (and fix as needed) sufficiently be able to make such guarantees.
Of course existing libraries that support IE11 are generally expected to keep doing so at very least least up to the next major release.
- "The Grid", which at this point has migrated to the browsers with Flexbox and (soon) Flex Grids
- A pretty skin replacing the browsers' default rendering of elements. These have improved, albeit only slightly. CSS has also become easier and you can easily do this yourself in 50 lines or so
- Fixing browser bugs/inconsistencies, which have diminished to a fraction of where we used to be
- "Components", which may the last remaining use case, but which have also become much easier to do yourself due to sane grid layouts
If you mean CSS Grid, and you can afford to target only modern browsers (with usable fallback CSS for the others) then you're good to go right now. Even Edge is working on bringing their implementation up to the spec right now[2].
I agree with your other points too. CSS frameworks don't bring that much, and end up clouding your ability to write and understand raw css IMO.
[1] http://caniuse.com/#search=grid [2] https://wpdev.uservoice.com/forums/257854-microsoft-edge-dev...
Consider stuff like wordpress, and other large programs that need an easy to re-use styling language. When you use something like bootstrap, and others know bootstrap, then you're making it easier for you and your customers down the line to build on something.
You can always write your own thing, and in many cases this will work, but then someone else is going to have to learn all of the quirks of your system before they can get up to speed and start using it at scale.
It's minimal indeed, but almost too minimal. In my experience working with CSS frameworks, the "there's a class for that" pattern is almost always not enough and it's much easier to write rules to handle customization. That leaves out both developers that aren't designers and designers that develop.
Applications aside, the semantics of some of the content is not up to date (for example <section> vs <div class="section">).
A week of genuine effort in learning the small nits and bits of CSS will go a long way.
It's probably not a good idea to focus an entire week on CSS alone. It's more economical and practical to spend a week's worth of hours in an otherwise broader project. That gives you real, practical experience in building real-world UI.
Good luck!
Tyson, one of the contributors, helped me get setup.
My css is now a compressed 4k for the entire project.
Exploiting `radio` input for things like Tabs and Accordions [0] is surely a sweet trick, but I don't think it's a great idea to use it where more than a few people would maintain the code.
Not only that, it also breaks completely in anything below "modern browsers". I get that this framework doesn't target those browsers, but I think these are the kind of things Javascript is for. It shouldn't be done by CSS.
How does it compare to the above and the other css frameworks mentioned here?
why?
People tend to start with bootstrap, and move from there to a more specific framework with minimal code.
Also i don't trust w3schools, they just took advantage of the name w3 and people often thing they are related to w3 but they are not.
That skullduggery aside, their css seems comparable to the rest discussed here.
I created a little screencast of the core concepts of Mini.css here, in case anyone is interested in quickly grasping how it works:
https://scrimba.com/casts/cast-1945
[Edit: there was an issue with the audio in the previous screencast, so I created a new one]
Having some styles provided by default, instead of having more classes to remember would be nicer. That's just my style.
Overall, it looks great!
It's not a great first impression for a layout framework.
By the way, that is a problem in the implementation of the site, not Wing :)
BS4 seems to include everything here and more (I can comment out what I don't need before building). BS4 also supports IE10+, where a non-trivial amount of my conversions come from. The flexbox grid/naming convention seems identical at a glance.
Most sites I've made in the past few years use Bootstrap—specially the grid, so I'd image this will really ease adoption if I'm not the only one who's used Bootstrap extensively.