

Show HN: Picnic.css, a lightweight Bootstrap alternative - franciscop
http://picnicss.com/
I&#x27;ve tried to make it as light as possible. It&#x27;s only tested with Firefox and Chrome, however I intend to test it in IE down to 9. What would you change? What would you add? Any feedback or pull request is greatly welcome! MIT Licensed
======
owenversteeg
First of all, I want to say that I like the vibrant colors, small size, and
checkable buttons. Smaller (and JS-less) CSS frameworks is something that I've
been crusading for for years now.

Secondly, I'm the creator of Min ([http://minfwk.com](http://minfwk.com)), a
fellow small CSS framework. Min is only 995 bytes - 5 times smaller. It also
is more widely used, has feature parity with Bootstrap through the Min
Bootstrap plugin, supports IE5.5+, is valid CSS, and doesn't have browser
bugs. There's also an easy way to migrate from Bootstrap to Min (the
Bootstrap->Min converter.)

Why would someone use Picnic.css rather than Min? I'd like to see the
advantages of Picnic.css straight from the creator, since it seems you're
answering questions in this thread. It seems one of the advantages you're
touting is the "invasive"ness, which is a cool approach (I don't see Min
taking that approach for various reasons but I think it can be a better choice
for many use cases.) Another seems to be the grid naming system. What other
things would make someone prefer Picnic.css for their project?

~~~
RegEx
This is extremely tacky. Of course you meant to put the framework down - your
first statement shows you think this is a competition, and you don't want to
"lose"

Your edit is just to try and convince others and yourself that you weren't
being a complete tool. (You were).

It seems you had no other intention in your comment than to belittle the
authors work and puff yourself up. If you actually thought you could learn
something from the author you would have treated them with some degree of
respect.

~~~
sequoia
Oh go soak your head. Commenter points out what they likes about OP's tool,
describes their own, and asks for a sales pitch from OP about why someone
should use their (OP's) tool. There's nothing wrong with any of this-- why do
you think OP posted their framework here if not to receive feedback & have an
opportunity to sell their tool?

People complaining that bringing up an alternate CSS framework for
compare/contrast in a thread on a new CSS framework need to chill.

~~~
RegEx
Their edited-edited post is much more approachable. Bringing up alternatives
is great, that's why I generally bookmark threads like this. Passive
aggressive rhetorical questions are not nearly as conducive to productive
conversation. I commend them for changing the tone of their post.

------
danielnixon
Lots of accessibility issues here.

* Keyboard accessibility is completely busted (other comments have pointed this out).

* Color contrast doesn't meet WCAG 2.0 AA (Bootstrap is bad here too).

* The <label class="button"> should have aria-role="button", tabindex="0" and a bit of JavaScript to trigger a click event when the space or enter keys are pressed while it has focus. This is for keyboard _and_ screen reader accessibility.

* The checkboxes and radio buttons need similar ARIA, tabindex and keydown tricks (because the inputs themselves are hidden [stupidly, in my opinion]). Again, this is for both keyboard and screen reader users.

Bootstrap commits a lot of the same mistakes with their button.js component
(although it looks like it's improving). See this post [0] for details
(disclaimer: I wrote it).

I wouldn't use this if I were you.

[0] [https://danielnixon.org/improving-bootstraps-woeful-
accessib...](https://danielnixon.org/improving-bootstraps-woeful-
accessibility/)

~~~
franciscop
1\. I opened the issue, this definitely needs fixing.

2\. Can you share a tool (preferably online) where we can see the color
contrast problem, please? How did you check that they didn't meet WCAG 2.0 AA
(so I can check it and fix it).

3\. Not really CSS problem

4\. Not a CSS problem. Anyway, I think that something can be done with CSS
though.

This is a _pure_ CSS tool, so the html and javascript problems should be
addressed by the people using the tool, not by the css itself.

So please, don't use it, or help me improve it until it can be used. If you
see any other problem, don't hesitate to comment, open an issue in Github (
[https://github.com/picnicss/picnic](https://github.com/picnicss/picnic) ) or
just send a small push request fixing a problem at a time (I'm trying to
address every problem by myself, which is daunting).

~~~
danielnixon
For contrast, maybe check out either HTML_CodeSniffer [0] or Vision
Australia's Colour Contrast Analyser [1]. Also this Bootstrap issue [2], which
references a couple more.

The problem with being pure CSS is that you're hiding inputs and styling their
labels to appear (visually) as their replacements (against the labels'
semantics).

If you're going to hide the inputs (in the three cases of labels with class
"button", "radio" and "checkbox") and style labels against their semantics,
you need to use JavaScript to fix the accessibility issues this introduces. I
don't think there's a non-JavaScript, non-ARIA solution to the accessibility
issues (other than not hiding the inputs in the first place).

So I think there are three options:

1\. Hide inputs, style labels (status quo) and use JavaScript, ARIA, tabindex,
etc to fix accessibility issues.

2\. Don't hide inputs, remain pure CSS, avoid accessibility issues in the
first place.

3\. Ignore accessibility issues.

[0]
[https://squizlabs.github.io/HTML_CodeSniffer/](https://squizlabs.github.io/HTML_CodeSniffer/)

[1] [http://www.visionaustralia.org/digital-access-
cca](http://www.visionaustralia.org/digital-access-cca)

[2]
[https://github.com/twbs/bootstrap/issues/3572](https://github.com/twbs/bootstrap/issues/3572)

------
DigitalSea
In my opinion, the only great thing about Bootstrap is the grid system and
form styling, the rest is just useless cruft. As a front-end developer, I see
the value in Bootstrap and I have used it before, but when installing it as a
Bower component, it makes it harder to filter out the crap you don't need like
button styling, header styling and other stuff Bootstrap includes that just
bloats your CSS. To me, I find Bootstrap TOO opinionated, I spend a lot of my
time overriding styles than I do setting them. In the real world unless it is
your own project, you are being given designs and fitting the style of a PSD
file into Bootstrap can be more trouble than it is worth.

These days I actually use Foundation by Zurb which I think is arguably one of
the best front-end CSS libraries out there, it allows greater control and
offers some awesome Javascript components. Not only that, it has a great grid
system like Bootstrap, but it is by far, the least opinionated and most
powerful front-end library out there.

Cudos for trimming the fat and offering an alternative for those who use
Bootstrap. My only nitpick is those bevelled buttons don't look very nice and
the classes for the grid system using fractions might be a little confusion
for some who are bad at maths and fractions (like me). I prefer having the
option of putting the number in the class like in Bootstrap: col-md-6 as
opposed to using a class called "half"

~~~
illicium
The best thing about Bootstrap is that it's ubiquitous -- every frontender has
heard of it and can easily jump on a project that uses it -- and that there
are a lot of integrations with frameworks, like angular-bootstrap or react-
bootstrap, that don't tie you to using the stock jQuery plugins.

This framework doesn't have anything that relies on JS magic, like button
dropdowns, collapsing panes, etc, which are useful in real-world apps. I
certainly wouldn't want to reimplement my own versions for every project.

Bootstrap's cruft is a non-issue if you use the customizer [0], or, better
yet, selectively import the components using LESS or SCSS [1].

[0] [http://getbootstrap.com/customize/](http://getbootstrap.com/customize/)

[1]
[https://github.com/twbs/bootstrap/blob/master/less/bootstrap...](https://github.com/twbs/bootstrap/blob/master/less/bootstrap.less)

~~~
DigitalSea
The JS components are a non-issue, I agree. However, the one problem with
customising Bootstrap is if you're using a front-end dependency manager like
Bower, as far as I am aware, you cannot easily customise the dependencies in
Bootstrap if using Bower or Component. Sure, I could use a custom generated
and downloaded version of the compiled CSS files, but then I loose the ability
to change colours, fonts and whatnot using variables or the internal helper
functions...

~~~
illicium
Not at all. If you use LESS/SASS, you can use your own variables and mixin
overrides stored in a file outside bower_components. e.g.
[https://github.com/apigee/ui-
framework/blob/master/less/core...](https://github.com/apigee/ui-
framework/blob/master/less/core/bootstrap.less)

------
franciscop
I've tried to keep it as tiny as possible with just under 3kb when gzipped.
What would you change? What would you add? Any feedback or pull request is
greatly welcome! MIT Licensed

~~~
desireco42
Here is the thing I would like and maybe I could fork your and just try it and
see how it looks. I really like attribute based properties for grid, I think
this is great idea. Check it here. I think this could make your framework
different from me-too frameworks. I think you could improve on it quite a bit,
add optional modules for modal for example, maybe some other elements.

[http://glenmaddern.com/articles/introducing-am-
css](http://glenmaddern.com/articles/introducing-am-css)

~~~
franciscop
I don't really like the style. However, I take a note about it, thank you for
the suggestion.

------
nagarjun
Honestly for most "real" projects, I just use the Bootstrap LESS source files
for the normalizer, grid etc. and just compile my own UI components. I believe
that for any app to be unique, it has to have its own visual style and when
you use the whole of Bootstrap (or just about any other framework) you just
can't differentiate yourself. Don't get me wrong, I love these frameworks. I
just think they're good for quick and dirty prototypes / open source hacks.

~~~
keithwarren
I am still waiting for a customer to tell me they don't like my application
because it uses a common UI framework. Not holding my breath. Tech people care
about this, but only barely and only very few.

A fresh and engaging UI with groundbreaking ideas and techniques could
possibly win you lots of fans but for the vast majority of applications
(especially lob or ent) this does not make sense.

~~~
wuliwong
Yes, I think web developers are inundated with bootstrap sites but if I am
making a site for non-tech people, the odds of them having any clue what
bootstrap is, let alone being able to identify its use is very unlikely. At
least, that is my calculation.

------
dewey
Chrome Version 37.0.2062.120 + Mac OS Mavericks

Weird border: [http://i.imgur.com/mLxx8gy.png](http://i.imgur.com/mLxx8gy.png)

Not centered: [http://i.imgur.com/edMfAMC.png](http://i.imgur.com/edMfAMC.png)

~~~
franciscop
Well I knew the border hack for the <select> would pop up at some point for
some reason. I'll fix it ASAP.

------
computerjunkie
I tried using Bootstrap and other CSS frameworks and (as mentioned in the
comments) I felt like I was fighting the frameworks to get it to do what I
wanted to do.

The problem with CSS frameworks is that they are invasive when it comes to
writing semantic HTML. As someone who is working on developing semantic HTML
and improving the skill, its annoying when you use a CSS framework which it
encourages you to perform inline styling.

Layout should be _separated_ from content.

Bootstrap and others is are great for making something quick and dirty.
Semantic UI[1] is onto something decent but the issue of inline styling
irritates me. Its good that Picnic is taking an approach to use better naming
conventions for classes. I think this is a preference thing but I find writing
_button-one_ better than writing _btn-1_. I think its readable, can be
understood quickly , easy to pick up if you have been away from development
for a while, looks maintainable even for novice developers.

Shorthand has never been my thing, it just adds more complexity and nuisance
by wasting time digging into someones documentation to understand whats going
on. I would rather spend an extra two seconds writing out a full name rather
than using shorthand knowing that its going to make my life easier in the
future.

Great work, I'll definitely play with this when I get time.

1\. [http://semantic-ui.com/](http://semantic-ui.com/)

~~~
snarkyturtle
I think you'd like the bourbon framework, which is basically a way to
structure your css and doesn't get in your way. See their grid framework:
[http://neat.bourbon.io/](http://neat.bourbon.io/) and their default style
package akin to bootstrap:
[http://refills.bourbon.io/](http://refills.bourbon.io/)

~~~
notastartup
I also recommend [http://purecss.io/](http://purecss.io/) from Yahoo. I agree
that bootstrap is quite heavy and there's a learning curve. I liked purecss
because it is simple and does what you set out to do.

~~~
computerjunkie
Cool. I will have a look at the frameworks suggested. Thanks

------
drinchev
I tried this kind of selectors for styling and I don't like it. I can explain
why with a question :

What if you want a button that looks like a like and a link that looks like a
button. In your case you will have to overwrite "button" selector, which is
with very high specificiy and to override the main selector styles.

    
    
        button.link { color: white; border: 0; background: none... }
    

and then copy the relevant for only a link styles to your link selector ( a ).

This works good for small code base, but once you go to several pages and need
specific links it starts to make a lot of problems.

I stopped using this way of styling buttons not so long ago and I switched it
to :

    
    
        <button class='button'></button>
        <button class='button button-primary'></button>
        <button class='button button-danger'></button>
    

And also for links

    
    
        <a class='link'>Link</a>
        <a class='link link-primary'></a>
    

And then I can easily switch

    
    
        <button class='link link-primary'></button>
        <a class='button button-danger'></a>
    

without touching my code.

Same applies for input[type='...'] rules. I just add class name.

~~~
franciscop
While it's true that sometimes you want a link to act as a button ( <a class =
"button">Looks like button</a> ), I cannot think of the case when you want a
button to look like a link.

May I ask, in what situation did you encounter this? I still think this is way
too specific (I have never had to do something like that). Picnic lets buttons
be buttons, and links be links OR buttons, just buttons cannot be links.

I think in this way you can achieve less bloated classes and better
readability. I value that higher than allowing buttons to be links. That's
just my preference. Thank you for the insight though, it's a clear and good
explanation of Picnic limits.

~~~
jackmoore
I second drinchev's comment. You have no way of knowing what all potential
contexts people are going to want to use buttons for. Applying styling to the
bare element means frequently resetting those styles. It's always better to
extend than to reset. I use button elements for any control that is handled
via JavaScript. Only a minority of buttons I use are actually for form
submission.

------
mcintyre1994
The bit with the checkbox then 2 radios is a bit confusing
(chrome/android/nexus 5) - at the start there's no check in the checkbox, I
tap and it checks, I tap to uncheck and it changes to a light grey check. That
gives the impression this checkbox has 3 States and is really confusing.
Worse, when I then tap, say a radio button, it goes back to unchecked. My
guess is this is just a focus issue but it's definitely confusing as it is.

~~~
franciscop
I have no idea of why this is happening, I will investigate further

~~~
mcintyre1994
I'm reasonably sure this is because of the light grey check hover effect you
have. I can reproduce on Nexus 7/Chrome in exactly the same way. I get the
same effect on my laptop by leaving the cursor over the checkbox after
unchecking - although then it's obvious because I've already seen the hover
state.

My guess is mobile Chrome is using the hover effect to denote selected - which
I guess kinda makes sense. I'd probably just disable that hover style
altogether to be honest, Bootstrap doesn't use one and I think that's better.

~~~
franciscop
Okay, it looks perfectly fine without it. I thought it might be a nice touch,
but didn't see the bug until now.

------
ash
Another lightweight Bootstrap alternative from Yahoo, 4.4KB:
[http://purecss.io](http://purecss.io)

~~~
service
I'm a big fan of Min: [http://minfwk.com/](http://minfwk.com/)

995 bytes!

~~~
owenversteeg
Thanks! I'm the creator of Min. Are there any suggestions or improvements you
have?

~~~
jbail
My first impression of min is that it looks nice. Really, for it's goals, it's
pretty tight.

As a branding thing, I'd change that URL. I get that it's short but minfwk.com
doesn't really look like "Min Framework" to me. It just looks like a bunch of
letters. A domain like mincss.com, getmin.com, minframework.com or something
more legible would be better.

~~~
owenversteeg
> My first impression of min is that it looks nice. Really, for it's goals,
> it's pretty tight.

Thanks! You have no idea how good that feels.

> As a branding thing, I'd change that URL. I have had minframework.com for a
> while and still do, but it seems too long (Right now it redirects to
> minfwk.com) but I just got mincss.com and I prefer it quite a bit. I'll
> update Github accordingly. Thanks for the suggestion!

------
mdup
Just a comment about the buttons: It feels weird that they kinda "pre-press"
themselves when hovering. I guess ergonomically speaking, a button shouldn't
move down while it's not pressed. On the other hand, maybe a glow or a subtle
coloring could do the trick?

~~~
franciscop
Thats right and also fix a .1em bug that is bothering me when hover. So glow
whiter when hover and move when pressed. They are now the way they are because
it was based on
[http://tympanus.net/Development/CreativeButtons/](http://tympanus.net/Development/CreativeButtons/)
, but I will also improve it (I just opened the issue in Github).

------
yellowapple
I really like this, and am considering incorporating it in quite a few sites
at this particular moment; so far so good implementation-wise.

A _huge_ plus that makes up for the lack of pre-IE9 Internet Explorer support
is the fact that this seems to fail gracefully; since it's "invasive", it
leaves behind a relatively-normal-looking site should it not load (tested on
lynx and Firefox). This makes me less nervous about deploying it on sites
where the target demographic is more likely to use old IE versions (like my
own hometown, unfortunately...).

A couple oddities:

* It would be really nice if the hamburger-mode menu pulled its background colors from the non-hamburger-mode menu and/or navbar; that was a bit of a hiccup when trying to change the navigation colors.

* I still can't figure out how to change the color of the hamburger icon. Where is that defined so I can override it and match the rest of a page's text? With a dark navbar background, it's kind of hard to see.

* The thresholds for hamburger v. non-hamburger seem too low; while my testing in Firefox resulted in proper responsiveness to the window width, the page loads as if it's a desktop site on my phone (HTC One M8, any browser), probably because of the high (1080x1920) screen resolution. I ended up manually editing picnic.css in order to adjust the thresholds accordingly (to 1100px for phones and 1200px for whatever's supposed to be the next one; the narrowest desktop monitor width in somewhat-common use nowadays is 1280, so I don't expect there to be very many issues caused by this...).

* Weirdness with font sizes on actual phones (as opposed to resized desktop windows) when font-size is set to 1em (probably a mobile browser quirk, not necessarily something wrong with Picnic); I added a max-width conditional to set these bigger on phone widths (while leaving them at 1em for desktops/laptops, where the screens are bigger and can handle the smaller text).

All in all, not bad. It's already likely going to see use in a couple of my
own sites. For someone like me who cringes at the thought of trying to wrangle
Bootstrap into doing something useful, this is a breath of fresh air.

~~~
franciscop
Thank you for the interest. I am using it for rapid prototyping and for
websites where personalization is not top priority.

* I know... I don't think that's achievable with the structure I'm using though

* In line 690, where it says `border-color: #333;` within `.burgermenu:before,.burgermenu:after{}`. This is due to lack of Android support for the font.

* Did you remember to set the viewport meta tag? [http://webdesign.tutsplus.com/articles/quick-tip-dont-forget...](http://webdesign.tutsplus.com/articles/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972)

* Is it related to the last point? Can you share an screenshot, please?

~~~
yellowapple
Yeah, forgot the viewport thing. Thanks for that.

As for the burgermenu, I'll take a look at that; thanks for the pointer. I'm
currently playing with this alongside Pure (which I'm also interested in for
many of the same reasons - namely, the lack of JavaScript, the small
footprint, and not being some giant clusterfsck like Bootstrap and Groundwork
tend to be), and one advantage of Picnic in comparison to that is that the
menu actually shrinks down to a burgermenu without the need for Javascript (as
far as I can tell; with Pure, that doesn't seem to be the case).

------
fest
CSS/HTML frameworks like these are very well suited for web interfaces running
on embedded microcontrollers, where storage comes at premium and design
requirements are moderate.

Looking forward to actually trying this in near future!

------
j79
One thing I noticed missing (or that you should consider) is keyboard
accessibility. If I tab through the page, I quickly get lost where I'm at
(until I focus on an text input element).

------
lauriswtf
Buttons in top nav have incorrect line-height -
[https://www.dropbox.com/s/xqqg1hpovghk827/Screenshot%202014-...](https://www.dropbox.com/s/xqqg1hpovghk827/Screenshot%202014-09-14%2020.22.01.png?dl=0)

I added ``line-height: 1.4em;`` in dev tools and now they look ok -
[https://www.dropbox.com/s/ksxu15t9rrofxti/Screenshot%202014-...](https://www.dropbox.com/s/ksxu15t9rrofxti/Screenshot%202014-09-14%2020.22.45.png?dl=0)

~~~
franciscop
Should be fixed now, right? What browser was it?

------
ishener
Very nice. Only one thing really bothered me: it's really hard to tell when
the radio buttons are selected. I much prefer a full circle when selected

~~~
canadev
They look like nipples.

~~~
franciscop
That was totally not the point (;

(will fix ASAP)

------
SippinLean
Couldn't you use Bootstrap's "customize" feature and just downloads the
components found here? Doubt it would be much larger.

------
egoodberry
An even lighter-weight alternative: forgetting about CSS "frameworks"
altogether. Aside from propping up prototypes really quickly (an exercise made
trivial with these help of these little style collections) I just don't
understand why anyone would want them in a real app. I've spent hours upon
hours fighting the likes of Bootstrap and its copycats. And to what end?

~~~
collyw
OK, and where do I start? How do I make a pretty blue border around a text
input to subtly indicate focus? What's the best gradient / padding to use in
such circumstances? What fade in time will looks good? There are so many
questions I could ask just about the text input highlighting.

As a back end developer who needs to do bits and pieces of front end stuff, I
can see this taking me months (at least) to learn JavaScript CSS, and design
to make something as anywhere close to bootstrap. Or I could just use what
they have done (and thousands have tested) and save myself a whole lot of
effort. And if you have other developers joining the team, at least they will
be familiar with whatever framework you are using, rather than some in house
crap that someone wrote ages ago, and has now left the company.

I have not looked at the source code for Bootstrap, but if it was crap I
assume there would be a ton of articles ranting about like there are for PHP.

So (with Bootstrap at least) I am getting pre-written, tested, understood
code, documented code, probably of at least "reasonable" quality, with a
community online to help with problems. Does you own code have that? I
certainly don't have time to write that stuff myself .

The more experienced I get as a developer, the less code I try to write.
People with the "code everything yourself" attitude remind me of when I was
fresh out of university, and didn't realise how incompetent I was at the time.

~~~
egoodberry
If you're designing sites yourself, I completely agree with you. I haven't
much of an eye for design myself and always rely on foundational CSS to take
care of these kinds of decisions when I build pet projects; however, I've
always worked on teams that have designers who hand me high-fidelity mocks (or
at least high-level style guides) that answer these questions. The
implementation itself is simple enough once you've worked with CSS long
enough.

~~~
collyw
I think you have answered your own question there then:

simple enough _once you 've worked with CSS long enough_

------
jjude
I have been using Cardinal CSS [1], a mobile first framework on my site[2].
Minified version is only 15kb. It also has support for LESS.

[1]: [http://cardinalcss.com/](http://cardinalcss.com/) [2]:
[http://www.jjude.biz](http://www.jjude.biz)

------
wooptoo
Semantic UI is also a great alternative. [http://semantic-
ui.com/](http://semantic-ui.com/)

But again, in a professional setting I would prefer Bootstrap any day. It
looks well done, it's easy to customize, and it has a lot of pre-built
components.

~~~
franciscop
I really like it! It's more with the Picnic philosophy of naming classes.

The only problem with bootstrap is the weight, it's way too heavy for most
part of the world's mobile internet.

~~~
notduncansmith
Weird, I have the whole Bootstrap kitchen sink on one site and the total CSS
weight (including Bootstrap and my own styles) is a hair over 24k. If I
actually took the time to optimize out the stuff I don't need, I could
probably get it down even further - but I'd have to be in a serious yak-
shaving mood.

------
mk4p
Nice work; I dig the not-having-to-do-anything approach.

One thing -- hovering the demo button seems to affect elements underneath:
[http://goo.gl/9vD0D2](http://goo.gl/9vD0D2)

~~~
franciscop
I hope it's fixed now, I forgot to re-test that bit after a .1em change I did

------
pbhjpbhj
There's a problem with the options on the dropdown [select] box so that the
bottom border is missing when the dropdown is active. FF31.0 Kubuntu; didn't
test/investigate further.

------
mvkel
Overall, this speaks more to an engineer's obsession with size reduction than
true design principles.

The animated buttons are a distraction, especially.

------
eflowers
Also, what about a Less/Sass version so the HTML can be even cleaner by using
just mixins in the Less/Sass to build the grid.

~~~
franciscop
I don't have experience with CSS preprocessors, it's just after Laravel in the
list of things I want to learn. Sorry about that.

------
akx
I'm not very okay with the checkbox and radio button styling. I don't think
you actually would need to touch those at all...

~~~
franciscop
They look too out of place in some browsers while in others they look okay. So
I tried to make them the same but apparently fail horribly. Now I'll try to
fix it within 24hours or revert to default.

------
eflowers
How about static responsive breakpoints for the grid, instead of being 100%
fluid? And with that, a maximum width?

~~~
franciscop
I'm not completely sure of what you mean with _static responsive breakpoints_
(I'm not English native), could you clarify please?

~~~
marcoms
I believe (s)he means absolute pixel breakpoints instead of percentages

------
jnazario
neat! i use bootstrap as a "go to" CSS for new web apps i develop, this is a
welcome alternative. thanks!

i'm not a web dev (i'm a backend guy), i need to make some front end PoCs
sometime, so i don't stay up on CSS packages and kits.

------
Kiro
> Except for the grids and a bit of the nav

How would this be fixed if you want it completely semantic?

~~~
franciscop
I have been looking for a fix and the current grid system is the best I could
do. Instead of `pure-u-1-3` from Pure or `col-md-4` from Bootstrap I went for
a _clearer_ naming from my point of view: `third` to mean a third. There's no
inherent grid system in html since grids are a presentation structure. To make
it semantic you should use your own elements/classes and then give them the
style, plus the responsive bit.

About the nav, you could make it completely semantic by using some JS or not
making it responsive, however I thought the benefits of having a responsive
<nav> would compensate for those 2 extra lines of code.

------
rangav
Interesting framework, might be useful for mobile or email templates.

------
k__
I like www.minfwk.com

But it's a little more extreme.

~~~
owenversteeg
Woo! Nice to see Min mentioned - I'm the creator of Min. Any suggestions or
improvements you'd like?

~~~
k__
Seems like the Bootstrap-plugin link is dead [https://owenversteeg.com/min-
bootstrap-plugin](https://owenversteeg.com/min-bootstrap-plugin)

~~~
owenversteeg
Works fine for me, weird.

[edit] nvm, it just doesn't work over HTTPS. [http://owenversteeg.com/min-
bootstrap-plugin](http://owenversteeg.com/min-bootstrap-plugin) works. I'll
have to look at setting up https for that.

------
mplewis
Those colors are way too bold.

------
trevvvor
Button depressed states on hover?!

Your death will be the first

