12 ms·

Show HN: Picnic.css, a lightweight Bootstrap alternative

247 points by franciscop 12y ago

I've tried to make it as light as possible. It'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

mcintyre1994 12y ago
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 12y ago
  I have no idea of why this is happening, I will investigate further
  - mcintyre1994 12y ago
    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 12y ago
      Okay, it looks perfectly fine without it. I thought it might be a nice touch, but didn't see the bug until now.
franciscop 12y ago
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
- coppolaemilio 12y ago
  I would make the default grey button colour a little bit darker so it's easier to read the white labels.
  - franciscop 12y ago
    Changed it to #AAA now and it's more readable, thanks!
- SunShiranui 12y ago
  I would make the shadow inside the input boxes lighter when the box is selected. It doesn't fit well with the green outline. Or maybe change the outline to an outer glow?
  - franciscop 12y ago
    Thank you for the suggestion! It works great with that style!
- cnp 12y ago
  Small nitpick, but you should conform your html to something more idiomatic; non-idiomatic code just screams isolation and lack of experience and those spaces between your equal signs jump right out and could scare the user off. Its silly I know, but :/
  - Jgrubb 12y ago
    It's not silly, it's the first thing I noticed.
    - 12y ago
lauriswtf 12y ago
Buttons in top nav have incorrect line-height - https://www.dropbox.com/s/xqqg1hpovghk827/Screenshot%202014-09-14%2020.22.01.png?dl=0 https://www.dropbox.com/s/xqqg1hpovghk827/Screenshot%202014-... I added ``line-height: 1.4em;`` in dev tools and now they look ok - https://www.dropbox.com/s/ksxu15t9rrofxti/Screenshot%202014-09-14%2020.22.45.png?dl=0 https://www.dropbox.com/s/ksxu15t9rrofxti/Screenshot%202014-...
- franciscop 12y ago
  Should be fixed now, right? What browser was it?
ash 12y ago
Another lightweight Bootstrap alternative from Yahoo, 4.4KB: http://purecss.io http://purecss.io
- franciscop 12y ago
  That's what I based Picnic on! Read on the "Some love" in the last section, it's also a great library
  - ash 12y ago
    That section says "inspiration from". Seems different from "based on". How is your project different from purecss?
    - progx 12y ago
      Yes and why should i use it and not purecss (which i currently use)
      - franciscop 12y ago
        Besides of the comment above, please use the one you prefer and fits better your needs. Clean html and out of the box options are Picnic strengths, flexibility and browser support are PureCSS strengths.
        progx 12y ago
        Thanks for the short explanation.
    - franciscop 12y ago
      Picnic CSS sets the style of the default elements, while in Pure CSS you have to add them manually as classes. This means that Picnic just works out of the box while Pure is more flexible. There are some other smaller differences: - The <select> just looks nice with Picnic in Firefox. - Picnic relies in class combinations, while Pure relies in long specific class names. Compare <button class = "primary">Test</button> vs <button class = "btn btn-primary">Test</button> - Pure CSS is surely more solid; it's been created by Yahoo and tested by thousands of webs
dewey 12y ago
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 12y ago
  Well I knew the border hack for the <select> would pop up at some point for some reason. I'll fix it ASAP.
  - deleted 12y ago
    [deleted]
drinchev 12y ago
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 12y ago
  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.
  - deleted 12y ago
    [deleted]
  - jackmoore 12y ago
    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.
Kiro 12y ago
> Except for the grids and a bit of the nav How would this be fixed if you want it completely semantic?
- franciscop 12y ago
  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.
jnazario 12y ago
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.
eflowers 12y ago
How about static responsive breakpoints for the grid, instead of being 100% fluid? And with that, a maximum width?
- franciscop 12y ago
  I'm not completely sure of what you mean with static responsive breakpoints (I'm not English native), could you clarify please?
  - marcoms 12y ago
    I believe (s)he means absolute pixel breakpoints instead of percentages
mk4p 12y ago
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 12y ago
  I hope it's fixed now, I forgot to re-test that bit after a .1em change I did
SippinLean 12y ago
Couldn't you use Bootstrap's "customize" feature and just downloads the components found here? Doubt it would be much larger.
eflowers 12y ago
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 12y ago
  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.
wooptoo 12y ago
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 12y ago
  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 12y ago
    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.
ishener 12y ago
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 12y ago
  They look like nipples.
  - franciscop 12y ago
    That was totally not the point (; (will fix ASAP)
- franciscop 12y ago
  Yes, radio buttons and a <select> bug need to be fixed. They will be within the next day.
mplewis 12y ago
Those colors are way too bold.
k__ 12y ago
I like www.minfwk.com But it's a little more extreme.
- owenversteeg 12y ago
  Woo! Nice to see Min mentioned - I'm the creator of Min. Any suggestions or improvements you'd like?
  - k__ 12y ago
    Seems like the Bootstrap-plugin link is dead https://owenversteeg.com/min-bootstrap-plugin https://owenversteeg.com/min-bootstrap-plugin
    - owenversteeg 12y ago
      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.
egoodberry 12y ago
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?
- namidark 12y ago
  Can you explain what you mean 'fighting'? I've heard this argument before but haven't seen any concrete examples.
- FreakyT 12y ago
  My general take on it is: if you find yourself "fighting" the framework, then you probably shouldn't be using a framework. Many websites have a whole lot of overlap in terms of UI patterns (a nav bar, responsive grids, etc). Is it really necessary for every dev to hand-code that nav bar, or fight with CSS's terrifyingly bad grid support? Not really, which is why these frameworks are nice.
- purringmeow 12y ago
  Some of us like that you get cross-browser and device tested code that is super easy to use. You can choose what parts of Bootstrap to include in your app, so you don't bloat it. Would you elaborate what you mean by fighting? Bootstrap is extremely simple to customize and I am no front-end guru.
  - egoodberry 12y ago
    In my experience, the fighting comes in when the designer (who generally has less understanding of the Bootstrap modules' intended roles) extends an existing UI concept that came out of the box. This is a perfectly reasonable ask on their part- it's a component on our site, why shouldn't we be able to customize it? A specific example: Bootstrap expects dropdowns to be unordered lists with anchors as the top-level element, so having a fixed-position header as the first item while its children scroll is difficult. If this has been our CSS based on our markup, it would've taken fifteen minutes, because we could have gone in and done a bit of basic surgery on our module, making it more flexible. (This may not be the best example, but that's the general idea.)
deleted 12y ago
[deleted]
akx 12y ago
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 12y ago
  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.
pbhjpbhj 12y ago
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.
mdup 12y ago
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 12y ago
  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).
j79 12y ago
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).
fest 12y ago
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!
computerjunkie 12y ago
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 12y ago
  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 12y ago
    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 12y ago
      Cool. I will have a look at the frameworks suggested. Thanks
trevvvor 12y ago
Button depressed states on hover?! Your death will be the first
nagarjun 12y ago
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 12y ago
  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 12y ago
    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.
- subsection1h 12y ago
  > compile my own UI components [...] when you use the whole of Bootstrap (or just about any other framework) you just can't differentiate yourself. If a person isn't able to very easily customize Bootstrap with a minimal amount of CSS, I wonder if they're able to competently create their own front-end framework that works perfectly in every browser on every platform. As someone who navigates the web primarily with a keyboard, sites that use Bootstrap tend to be more usable than sites that use front-end frameworks that were built from scratch. For example, in my experience, most designers and developers don't use :focus selectors when using :hover selectors because they only think about mouse-based navigation.
  - 12y ago
DigitalSea 12y ago
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 12y ago
  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.less https://github.com/twbs/bootstrap/blob/master/less/bootstrap...
  - DigitalSea 12y ago
    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...
owenversteeg 12y ago
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?
- bnejad 12y ago
  Its always good to have options. As much as I'm supportive of promoting your own work its a little bit in bad taste to smash and promote your project one a submission like this.
  - owenversteeg 12y ago
    Whoops. I didn't mean it in a negative way - I was hoping that the creator could mention some other advantages of using Picnic.css that I missed. I've edited the comment to focus less on the downsides of Picnic and instead focus on the differences of Picnic and Min.
    - exodust 12y ago
      You mention IE5.5 support four times on your homepage. Nobody is using IE5.5 anymore, so that's not an attractive selling point, and slightly odd that you think it might be a selling point. The Picnic thing has "subtle animated buttons" which may be appealing to some looking for a certain design edge out of the box. Personally I roll my own everything, I don't use grids or bootstrap, so not sure why I'm even looking at this thread. I'm not the typical frontend developer though apparently. Div class="row" is not something you'll see in my code, ever. I'm not going back to table layouts by faking rows and columns with divs. That to me is working against the grain of HTML and CSS. When you start working *with" the grain, with the native behaviour of HTML elements, suddenly a lot more is possible and easier to accomplish when it comes to responsiveness and compatibility. But anyway.. carry on with your "not table based" layouts!
jjude 12y ago
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
danielnixon 12y ago
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-accessibility/ https://danielnixon.org/improving-bootstraps-woeful-accessib...
- uniclaude 12y ago
  I'm with you on the point that accessibility should be a concern of framework developers, but none of those issues should be too hard to tackle for them. Therefore, filing an issue on the Github project would help (at least, more than commenting here), especially because the project is still young.
- duncans 12y ago
  Have you submitted a pull request? There's plenty of accessibility related-stuff in Bootstrap so I think they care about it.
- franciscop 12y ago
  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).
yellowapple 12y ago
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 12y ago
  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-the-viewport-meta-tag--webdesign-5972 http://webdesign.tutsplus.com/articles/quick-tip-dont-forget... * Is it related to the last point? Can you share an screenshot, please?
rangav 12y ago
Interesting framework, might be useful for mobile or email templates.
mvkel 12y ago
Overall, this speaks more to an engineer's obsession with size reduction than true design principles. The animated buttons are a distraction, especially.

247 points by franciscop 12y ago

mcintyre1994 12y ago

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 12y ago
I have no idea of why this is happening, I will investigate further
- mcintyre1994 12y ago
  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 12y ago
    Okay, it looks perfectly fine without it. I thought it might be a nice touch, but didn't see the bug until now.

franciscop 12y ago

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

coppolaemilio 12y ago
I would make the default grey button colour a little bit darker so it's easier to read the white labels.
- franciscop 12y ago
  Changed it to #AAA now and it's more readable, thanks!
SunShiranui 12y ago
I would make the shadow inside the input boxes lighter when the box is selected. It doesn't fit well with the green outline. Or maybe change the outline to an outer glow?
- franciscop 12y ago
  Thank you for the suggestion! It works great with that style!
cnp 12y ago
Small nitpick, but you should conform your html to something more idiomatic; non-idiomatic code just screams isolation and lack of experience and those spaces between your equal signs jump right out and could scare the user off. Its silly I know, but :/
- Jgrubb 12y ago
  It's not silly, it's the first thing I noticed.
  - 12y ago

lauriswtf 12y ago

Buttons in top nav have incorrect line-height - https://www.dropbox.com/s/xqqg1hpovghk827/Screenshot%202014-09-14%2020.22.01.png?dl=0 https://www.dropbox.com/s/xqqg1hpovghk827/Screenshot%202014-... I added ``line-height: 1.4em;`` in dev tools and now they look ok - https://www.dropbox.com/s/ksxu15t9rrofxti/Screenshot%202014-09-14%2020.22.45.png?dl=0 https://www.dropbox.com/s/ksxu15t9rrofxti/Screenshot%202014-...

franciscop 12y ago
Should be fixed now, right? What browser was it?

ash 12y ago

Another lightweight Bootstrap alternative from Yahoo, 4.4KB: http://purecss.io http://purecss.io

franciscop 12y ago
That's what I based Picnic on! Read on the "Some love" in the last section, it's also a great library
- ash 12y ago
  That section says "inspiration from". Seems different from "based on". How is your project different from purecss?
  - progx 12y ago
    Yes and why should i use it and not purecss (which i currently use)
    - franciscop 12y ago
      Besides of the comment above, please use the one you prefer and fits better your needs. Clean html and out of the box options are Picnic strengths, flexibility and browser support are PureCSS strengths.
      - progx 12y ago
        Thanks for the short explanation.
  - franciscop 12y ago
    Picnic CSS sets the style of the default elements, while in Pure CSS you have to add them manually as classes. This means that Picnic just works out of the box while Pure is more flexible. There are some other smaller differences: - The <select> just looks nice with Picnic in Firefox. - Picnic relies in class combinations, while Pure relies in long specific class names. Compare <button class = "primary">Test</button> vs <button class = "btn btn-primary">Test</button> - Pure CSS is surely more solid; it's been created by Yahoo and tested by thousands of webs

dewey 12y ago

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 12y ago
Well I knew the border hack for the <select> would pop up at some point for some reason. I'll fix it ASAP.
- deleted 12y ago
  [deleted]

drinchev 12y ago

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 12y ago
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.
- deleted 12y ago
  [deleted]
- jackmoore 12y ago
  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.

Kiro 12y ago

> Except for the grids and a bit of the nav How would this be fixed if you want it completely semantic?

franciscop 12y ago
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.

jnazario 12y ago

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.

eflowers 12y ago

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

franciscop 12y ago
I'm not completely sure of what you mean with static responsive breakpoints (I'm not English native), could you clarify please?
- marcoms 12y ago
  I believe (s)he means absolute pixel breakpoints instead of percentages

mk4p 12y ago

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 12y ago
I hope it's fixed now, I forgot to re-test that bit after a .1em change I did

SippinLean 12y ago

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

eflowers 12y ago

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 12y ago
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.

wooptoo 12y ago

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 12y ago
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 12y ago
  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.

ishener 12y ago

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 12y ago
They look like nipples.
- franciscop 12y ago
  That was totally not the point (; (will fix ASAP)
franciscop 12y ago
Yes, radio buttons and a <select> bug need to be fixed. They will be within the next day.

mplewis 12y ago

Those colors are way too bold.

k__ 12y ago

I like www.minfwk.com But it's a little more extreme.

owenversteeg 12y ago
Woo! Nice to see Min mentioned - I'm the creator of Min. Any suggestions or improvements you'd like?
- k__ 12y ago
  Seems like the Bootstrap-plugin link is dead https://owenversteeg.com/min-bootstrap-plugin https://owenversteeg.com/min-bootstrap-plugin
  - owenversteeg 12y ago
    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.

egoodberry 12y ago

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?

namidark 12y ago
Can you explain what you mean 'fighting'? I've heard this argument before but haven't seen any concrete examples.
FreakyT 12y ago
My general take on it is: if you find yourself "fighting" the framework, then you probably shouldn't be using a framework. Many websites have a whole lot of overlap in terms of UI patterns (a nav bar, responsive grids, etc). Is it really necessary for every dev to hand-code that nav bar, or fight with CSS's terrifyingly bad grid support? Not really, which is why these frameworks are nice.
purringmeow 12y ago
Some of us like that you get cross-browser and device tested code that is super easy to use. You can choose what parts of Bootstrap to include in your app, so you don't bloat it. Would you elaborate what you mean by fighting? Bootstrap is extremely simple to customize and I am no front-end guru.
- egoodberry 12y ago
  In my experience, the fighting comes in when the designer (who generally has less understanding of the Bootstrap modules' intended roles) extends an existing UI concept that came out of the box. This is a perfectly reasonable ask on their part- it's a component on our site, why shouldn't we be able to customize it? A specific example: Bootstrap expects dropdowns to be unordered lists with anchors as the top-level element, so having a fixed-position header as the first item while its children scroll is difficult. If this has been our CSS based on our markup, it would've taken fifteen minutes, because we could have gone in and done a bit of basic surgery on our module, making it more flexible. (This may not be the best example, but that's the general idea.)

deleted 12y ago

[deleted]

akx 12y ago

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 12y ago
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.

pbhjpbhj 12y ago

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.

mdup 12y ago

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 12y ago
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).

j79 12y ago

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).

fest 12y ago

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!

computerjunkie 12y ago

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 12y ago
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 12y ago
  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 12y ago
    Cool. I will have a look at the frameworks suggested. Thanks

trevvvor 12y ago

Button depressed states on hover?! Your death will be the first

nagarjun 12y ago

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 12y ago
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 12y ago
  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.
subsection1h 12y ago
> compile my own UI components [...] when you use the whole of Bootstrap (or just about any other framework) you just can't differentiate yourself. If a person isn't able to very easily customize Bootstrap with a minimal amount of CSS, I wonder if they're able to competently create their own front-end framework that works perfectly in every browser on every platform. As someone who navigates the web primarily with a keyboard, sites that use Bootstrap tend to be more usable than sites that use front-end frameworks that were built from scratch. For example, in my experience, most designers and developers don't use :focus selectors when using :hover selectors because they only think about mouse-based navigation.
- 12y ago

DigitalSea 12y ago

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 12y ago
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.less https://github.com/twbs/bootstrap/blob/master/less/bootstrap...
- DigitalSea 12y ago
  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...

owenversteeg 12y ago

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?

bnejad 12y ago
Its always good to have options. As much as I'm supportive of promoting your own work its a little bit in bad taste to smash and promote your project one a submission like this.
- owenversteeg 12y ago
  Whoops. I didn't mean it in a negative way - I was hoping that the creator could mention some other advantages of using Picnic.css that I missed. I've edited the comment to focus less on the downsides of Picnic and instead focus on the differences of Picnic and Min.
  - exodust 12y ago
    You mention IE5.5 support four times on your homepage. Nobody is using IE5.5 anymore, so that's not an attractive selling point, and slightly odd that you think it might be a selling point. The Picnic thing has "subtle animated buttons" which may be appealing to some looking for a certain design edge out of the box. Personally I roll my own everything, I don't use grids or bootstrap, so not sure why I'm even looking at this thread. I'm not the typical frontend developer though apparently. Div class="row" is not something you'll see in my code, ever. I'm not going back to table layouts by faking rows and columns with divs. That to me is working against the grain of HTML and CSS. When you start working *with" the grain, with the native behaviour of HTML elements, suddenly a lot more is possible and easier to accomplish when it comes to responsiveness and compatibility. But anyway.. carry on with your "not table based" layouts!

jjude 12y ago

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

danielnixon 12y ago

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-accessibility/ https://danielnixon.org/improving-bootstraps-woeful-accessib...

uniclaude 12y ago
I'm with you on the point that accessibility should be a concern of framework developers, but none of those issues should be too hard to tackle for them. Therefore, filing an issue on the Github project would help (at least, more than commenting here), especially because the project is still young.
duncans 12y ago
Have you submitted a pull request? There's plenty of accessibility related-stuff in Bootstrap so I think they care about it.
franciscop 12y ago
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).

yellowapple 12y ago

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 12y ago
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-the-viewport-meta-tag--webdesign-5972 http://webdesign.tutsplus.com/articles/quick-tip-dont-forget... * Is it related to the last point? Can you share an screenshot, please?

rangav 12y ago

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

mvkel 12y ago

Overall, this speaks more to an engineer's obsession with size reduction than true design principles. The animated buttons are a distraction, especially.