Live data from Hacker News

Show HN: Picnic.css, a lightweight Bootstrap alternative

picnicss.com

11–20 of 149 posts

Re: Show HN: Picnic.css, a lightweight Bootstrap alternative

#11
post #9

Earlier quoted context omitted.

That's what I based Picnic on! Read on the "Some love" in the last section, it's also a great library

That section says "inspiration from". Seems different from "based on". How is your project different from purecss?

Yes and why should i use it and not purecss (which i currently use)

Re: Show HN: Picnic.css, a lightweight Bootstrap alternative

#12
post #9

Earlier quoted context omitted.

That's what I based Picnic on! Read on the "Some love" in the last section, it's also a great library

That section says "inspiration from". Seems different from "based on". How is your project different from purecss?

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 just looks nice with Picnic in Firefox.

- Picnic relies in class combinations, while Pure relies in long specific class names. Compare Test vs Test

- Pure CSS is surely more solid; it's been created by Yahoo and tested by thousands of webs

Re: Show HN: Picnic.css, a lightweight Bootstrap alternative

#13
post #11
post #9

Earlier quoted context omitted.

That section says "inspiration from". Seems different from "based on". How is your project different from purecss?

Yes and why should i use it and not purecss (which i currently use)

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.

Re: Show HN: Picnic.css, a lightweight Bootstrap alternative

#14
post #10

Chrome Version 37.0.2062.120 + Mac OS Mavericks Weird border: http://i.imgur.com/mLxx8gy.png Not centered: http://i.imgur.com/edMfAMC.png

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

Re: Show HN: Picnic.css, a lightweight Bootstrap alternative

#15
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 :

    
    
    
And also for links

    Link
    
And then I can easily switch

    
    
without touching my code.

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

Re: Show HN: Picnic.css, a lightweight Bootstrap alternative

#17

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…

While it's true that sometimes you want a link to act as a button ( Looks like button ), 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.

Re: Show HN: Picnic.css, a lightweight Bootstrap alternative

#18
post #16

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

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 would compensate for those 2 extra lines of code.

Post reply on HN