HN Explorer

148 comments

[ 3.5 ms ] story [ 245 ms ] thread
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
coppolaemilio
I would make the default grey button colour a little bit darker so it's easier to read the white labels.
franciscop
Changed it to #AAA now and it's more readable, thanks!
SunShiranui
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
Thank you for the suggestion! It works great with that style!
cnp
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
It's not silly, it's the first thing I noticed.
franciscop
Fixed? I've always written code that way, even when working with more people. I'll try to correct it to adapt to the standard though. Thanks for the tip.
joshvm
The checkbox bugs me, it's not in line with the radio buttons and it's very slightly smaller. I'd make it square, but that's a personal preference.
sleazebreeze
Is it on purpose that the radio button "dot" that shows when selected is not in the center?
franciscop
No, it looks fine in the versions of Chrome and Firefox that I'm testing, but not in every browser since this is the #1 issue I've received. I'll fix it within the next 24 hours.
sleazebreeze
I'm running Chrome "37.0.2062.120 m" on Windows 7 64 if that helps.
wuliwong
I wanted to hate on it but I dunno, I might give it a spin. :) I'm mainly interested in your grid naming conventions, as the become very cumbersome in bootstrap.

One thing I didn't see was the ability to add offsets to a grid item?

wuliwong
Also, and mind you this is JUST my opinion but I don't think the buttons look very attractive. That might be something worth "sprucing up"? Anyway, definitely a cool project and I hope to give it a try.
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

ldng
Ok, looks interesting for an organisational stand point but I have my doubts perf-wise. Has it been benchmarked a little ?
franciscop
I don't really like the style. However, I take a note about it, thank you for the suggestion.
gioele
My suggestion is to make picnic work with `label` elements that are outside the `input` they related to.

In other words, the CSS should work for this HTML

    <input type="checkbox" id="checkable" />
    <label class="button" for="checkable">Checkable</label>
instead of the unidiomatic (and broken from the POW of accessibility)

    <label class="button">
      <input type="checkbox" />
      <span>Checkable</span>
    </label>
franciscop
This was considered, but I decided against it in the end. However, I've found a solution that would work with both html and will upload it soon.
ash
Another lightweight Bootstrap alternative from Yahoo, 4.4KB: http://purecss.io
franciscop
That's what I based Picnic on! Read on the "Some love" in the last section, it's also a great library
ash
That section says "inspiration from". Seems different from "based on".

How is your project different from purecss?

progx
Yes and why should i use it and not purecss (which i currently use)
franciscop
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
Thanks for the short explanation.
franciscop
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

service
I'm a big fan of Min: 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!

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.

[deleted]
(comment deleted)
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.
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.

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.

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

franciscop
I hope it's fixed now, I forgot to re-test that bit after a .1em change I did
SippinLean
Couldn't you use Bootstrap's "customize" feature and just downloads the components found here? Doubt it would be much larger.
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.
wooptoo
Semantic UI is also a great alternative. 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.
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)

franciscop
Yes, radio buttons and a <select> bug need to be fixed. They will be within the next day.
mplewis
Those colors are way too bold.
k__
I like www.minfwk.com

But it's a little more extreme.

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?
namidark
Can you explain what you mean 'fighting'? I've heard this argument before but haven't seen any concrete examples.
FreakyT
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
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
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.)

mau
A framework is not only a good way to start. It's also a good way to uniform code, make things easier for new comers (larger projects usually have lots of new people that eventually write code), solve multiple common issues you'd fight by your own (e.g. browsers compatibility), community support and documentation. If you write your own you need to document well all things and things very careful how to arrange css classes to make code reusable and flexible.
[dead] stevo111
I immeditely giving this a fail for not namespacing|prefixing css classes. I mean "error" class, "warning" class - FTFY seriously guys? Yeah - noone else gonna have a splendid idea for using those exact names anywhere ever.
cnp
Code normalization: that's the key. Once you've got everything working everywhere via a base scaffold -- the hard part -- then you can very quickly iterate on design changes, or design in general. Bootstrap et al are generally quite easy to tweak once you understand how all of the components fit, and i'm sorry but CSS just isn't fun to have to write from scratch, especially on bigger projects.

IMO, if I were to arrive on a new project and saw the front-end devs reinventing the wheel, it would immediately set off a red flag.

egoodberry
"i'm sorry but CSS just isn't fun to have to write from scratch"

That may be your problem. Maybe I'm a glutton for punishment, but I especially enjoy this type of work.

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

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

The thing is, if you actually designed web UIs professionally and didn't rely on these toolkits, you could immediately make a reasonable first guess at all of those things and you'd be doing it in the context of your specific project. The total time to refine everything over the entire development cycle might be a few minutes, and most of that would be cross-browser testing, which obviously for professional work you should be doing even if you're using a toolkit.

I've nothing against toolkits. They can be useful for quick prototypes. They do a competent basic job for in-house tools written by people who aren't front-end developers and just need something that works. But for high-end UI work? I have never written a major professional project that still used any of these toolkits in the final production code.

Most toolkits aren't sufficiently reliable that you can trust them without testing, so you've still got one of the biggest and most tedious jobs to do whether you use one or not.

Often attention to detail is lacking in significant areas. Using a big name toolkit is no guarantee of quality; many of them have absolute howlers on their own demo pages that are immediately obvious in at least one major browser, often just in the visuals before you even start interacting.

But more than any of that, for real projects, you're often going to have branding requirements that will mean extensive customisation. All those default colour and typography schemes aren't worth much. And some all-things-to-all-people toolkit that works great if you use its defaults might be hiding all kinds of limitations if you're not using a flat design, or if your layout requirements are more demanding than "simple responsive grid", or if you want something that works right on mobile or supports proper keyboard navigation or meets accessibility requirements or...

Toolkits are great for basic work, and for a lot of projects that really is all you need, but you don't design a Rolls Royce by picking wheels and bodywork from a catalogue.

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.

Code everything myself? Unlikely. Code things myself when quality matters and off-the-shelf isn't good enough? Always.

hhandoko
It's fine when you are targeting one browser with a specific version (e.g. developing an internal web application with IE8 baseline). However, when you are building a web application targeting various browsers and versions, there will be subtle differences that may 'break' your UI.

CSS frameworks like Bootstrap provides you with a tested baseline, so you can be confident that the front-end you created will look the same across a wide range of browsers.

Certainly Bootstrap won't be suitable for all scenarios, but starting from a framework is generally a good idea.

[deleted]
(comment deleted)
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.
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.
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/ , but I will also improve it (I just opened the issue in Github).
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).
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.
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!

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/

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/ and their default style package akin to bootstrap: http://refills.bourbon.io/
notastartup
I also recommend 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
DigitalSea
Minor nitpick with your comments regarding the use of classes for the grid system making your mark-up non-semantic. If you use the LESS or SASS version of Bootstrap and not the pre-compiled version of Bootstrap, you can use the internal grid system functions in place of classes on elements instead, thus making your markup semantic.

I like the intent behind the Semantic UI project, but I feel like CSS preprocessors like LESS and SASS allow for semantic markup through the use of mixin functions out of the box without needing to use anything else.

trevvvor
Button depressed states on hover?!

Your death will be the first