6 ms·

Show HN: Wing – A minimal, responsive CSS framework

26 points by kbr 10y ago

timlyo 10y ago
This seems pretty similar to pure. Also 4kb with similar features, although pure can be broken down to load singular modules therefore even less than 4kb. Not sure if wing has that feature. http://purecss.io/ http://purecss.io/
- romanovcode 10y ago
  Aren't they all pretty similar?
  - Tiquor 10y ago
    Yes, this is like saying here is my slim if statement library for PHP.
- kbr 10y ago
  I'm going to implement a plugin feature soon, and you will be able to run a custom build with any plugin.
g_delgado14 10y ago
This framework looks like it was inspired by Skeleton [0], in particular the grid system and the documentation. [0] - http://getskeleton.com/ http://getskeleton.com/
- kbr 10y ago
  It is, but is updated more often and has more features.
matt4077 10y ago
This is no different than a few hundred CSS frameworks I have looked at over the last year. In fact it's actually worst than most: - The 12-column grid was a great tool when it was first used about 10 years ago, but it's limiting creativity and no longer necessary if... - ... you use flex, which this framework doesn't. Flex is now supported in 97% of installed browsers (http://caniuse.com/#search=flex http://caniuse.com/#search=flex) and I'd guess those 3% will actually be quite scared if any website actually worked for them. - Whenever someone sees a for-loop in a template they start a 10-paragraph rant about separation of concerns. But nobody bats an eye at <div class="col-md-2"> even though css was invented to separate content from presentation. It's really easy to do semantic markup these days and style it without repetition. Use semantic tags like <main>, <article>, <aside>, <nav>, etc. This is usually enough, especially using the power of targeting tags based on their position&context in the document tree, i. e. :first-child & friends. If unavoidable, use semantic class names (article class="editorial") and future-self will thank current-self for making the CSS so easy to read. Positioning happens with a display:flex on the container and a flex: x x x on the children. Stuff like class="col-s-4 offset-xs-3" was only invented because each of these rules required multiple lines of CSS hacks and workarounds. Even if that fails, use the 45-step build pipeline you've running anyway and use some preprocessing to pull those hacks into a class via @mixins.
- kbr 10y ago
  Sad to hear that its bad, thanks for the feedback! Wing is slowly transitioning into using Flexbox, I am well aware of it and the growing compatibility, but most people would like for it to work on IE 9+, which is why I use the normal grid. I'm not sure about you, but the grid comes in pretty handy sometimes, I agree that there are simpler solutions, and I'm implementing those in Wing. CSS is slowly evolving, Wing is meant to be there as a boilerplate, similar to Skeleton. As the features of CSS grow, such as Flexbox and the grid, Wing will slowly no longer be needed. If you would like, you can help make Wing better by contributing at https://github.com/KingPixil/wing https://github.com/KingPixil/wing It would be really helpful, and Wing can become better and better.
  - kbr 10y ago
    UPDATE: I have added basic flexbox usage in the utilities, such as vertical/horizontal align.
karakal 10y ago
It's interesting how my response to this changed from not another CSS framework to keep it up, after reading the author is 13 years old in one of his previous comments.
butz 10y ago
Small CSS framework is not good enough - you have to cut corners. Are there any light CSS frameworks with nicely themed form controls? E.g. <select> styled to look the same on all browsers. Or working list nesting? I don't mind loading additional 4kb just to have complete(er) implementation.
- kbr 10y ago
  Wing has options for <select>, and it looks the same on most browsers/operating systems. What other things would you like implemented?
stirner 10y ago
Isn't "minimal framework" an oxymoron?
- kbr 10y ago
  Minimal is referring to the variety of features in a relatively low file size.
- mtrpcic 10y ago
  Not necessarily. Django and Flask are both web frameworks, but I would still describe Flask as minimal because it has fewer built-in features, is a smaller package, and excels at doing a few things really well, rather than everything "pretty good".
  - kbr 10y ago
    Well, Wing doesn't necessarily do everything "pretty good", it doesn't have a lot of features you can implement yourself, such as a navbar. Django and Flask are frameworks for the backend, Flask is minimal, such as Koa or Express, but in the front end, file size matters. If you don't have a small framework, your website will take a long time to load, and I don't know about you, but I do not like long loading times.
ryanbertrand 10y ago
Why?
- FullMtlAlcoholc 10y ago
  I see this question often, especially in the context of the front-end. From my experience, the best way to improve your coding skills is to create something that one finds personally interesting, as that maintains your motivation. Open-sourcing it and posting to sites like HN is the best way to get honest, open feedback. Do you think it is counter-productive to follow the advice above? Should we all be submitting PR's for bug fixes on large open source projects? Or should we only be allowed to work on projects that have been vetted and added to some dev community's backlog? I'm serious because I see this question come up so often.
rhabarba 10y ago
When I was young, everyone wrote a text editor. Today, everyone writes a framework. 2036 will be awesome.
- deleted 10y ago
  [deleted]
diminish 10y ago
I'm about to start a side project with a desktop web site, a mobile site and a cordova based hybrid app . I'm searching for one single frontend framework * must be fast, * minimal, or customizable * touch-first, and mobile first * css framework * no or minimal javascript, no typescript, on js framework etc. I'm trying to find an alternative to Ionic2 to skip the angular and typescript parts, which I don't need. Any experience?
- kbr 10y ago
  This is a minimal framework, customizable to its core. Any declaration you make will override the current one, see the docs. It's super fast, and works great on mobile.
afshinmeh 10y ago
This is an exact copy of Skeleton, css transformed to scss, that's it.
- kbr 10y ago
  I really would wish you see the code carefully before making this comment. 1. Wing is NOT a copy of Skeleton, it is inspired by it, yes, but if you look at the code, it is extremely different code. 2. It doesn't even use SCSS.

26 points by kbr 10y ago

This seems pretty similar to pure. Also 4kb with similar features, although pure can be broken down to load singular modules therefore even less than 4kb. Not sure if wing has that feature. http://purecss.io/ http://purecss.io/

romanovcode 10y ago
Aren't they all pretty similar?
- Tiquor 10y ago
  Yes, this is like saying here is my slim if statement library for PHP.
kbr 10y ago
I'm going to implement a plugin feature soon, and you will be able to run a custom build with any plugin.

g_delgado14 10y ago

This framework looks like it was inspired by Skeleton [0], in particular the grid system and the documentation. [0] - http://getskeleton.com/ http://getskeleton.com/

kbr 10y ago
It is, but is updated more often and has more features.

matt4077 10y ago

This is no different than a few hundred CSS frameworks I have looked at over the last year. In fact it's actually worst than most: - The 12-column grid was a great tool when it was first used about 10 years ago, but it's limiting creativity and no longer necessary if... - ... you use flex, which this framework doesn't. Flex is now supported in 97% of installed browsers (http://caniuse.com/#search=flex http://caniuse.com/#search=flex) and I'd guess those 3% will actually be quite scared if any website actually worked for them. - Whenever someone sees a for-loop in a template they start a 10-paragraph rant about separation of concerns. But nobody bats an eye at <div class="col-md-2"> even though css was invented to separate content from presentation. It's really easy to do semantic markup these days and style it without repetition. Use semantic tags like <main>, <article>, <aside>, <nav>, etc. This is usually enough, especially using the power of targeting tags based on their position&context in the document tree, i. e. :first-child & friends. If unavoidable, use semantic class names (article class="editorial") and future-self will thank current-self for making the CSS so easy to read. Positioning happens with a display:flex on the container and a flex: x x x on the children. Stuff like class="col-s-4 offset-xs-3" was only invented because each of these rules required multiple lines of CSS hacks and workarounds. Even if that fails, use the 45-step build pipeline you've running anyway and use some preprocessing to pull those hacks into a class via @mixins.

kbr 10y ago
Sad to hear that its bad, thanks for the feedback! Wing is slowly transitioning into using Flexbox, I am well aware of it and the growing compatibility, but most people would like for it to work on IE 9+, which is why I use the normal grid. I'm not sure about you, but the grid comes in pretty handy sometimes, I agree that there are simpler solutions, and I'm implementing those in Wing. CSS is slowly evolving, Wing is meant to be there as a boilerplate, similar to Skeleton. As the features of CSS grow, such as Flexbox and the grid, Wing will slowly no longer be needed. If you would like, you can help make Wing better by contributing at https://github.com/KingPixil/wing https://github.com/KingPixil/wing It would be really helpful, and Wing can become better and better.
- kbr 10y ago
  UPDATE: I have added basic flexbox usage in the utilities, such as vertical/horizontal align.

karakal 10y ago

It's interesting how my response to this changed from not another CSS framework to keep it up, after reading the author is 13 years old in one of his previous comments.

butz 10y ago

Small CSS framework is not good enough - you have to cut corners. Are there any light CSS frameworks with nicely themed form controls? E.g. <select> styled to look the same on all browsers. Or working list nesting? I don't mind loading additional 4kb just to have complete(er) implementation.

kbr 10y ago
Wing has options for <select>, and it looks the same on most browsers/operating systems. What other things would you like implemented?

stirner 10y ago

Isn't "minimal framework" an oxymoron?

kbr 10y ago
Minimal is referring to the variety of features in a relatively low file size.
mtrpcic 10y ago
Not necessarily. Django and Flask are both web frameworks, but I would still describe Flask as minimal because it has fewer built-in features, is a smaller package, and excels at doing a few things really well, rather than everything "pretty good".
- kbr 10y ago
  Well, Wing doesn't necessarily do everything "pretty good", it doesn't have a lot of features you can implement yourself, such as a navbar. Django and Flask are frameworks for the backend, Flask is minimal, such as Koa or Express, but in the front end, file size matters. If you don't have a small framework, your website will take a long time to load, and I don't know about you, but I do not like long loading times.

ryanbertrand 10y ago

Why?

FullMtlAlcoholc 10y ago
I see this question often, especially in the context of the front-end. From my experience, the best way to improve your coding skills is to create something that one finds personally interesting, as that maintains your motivation. Open-sourcing it and posting to sites like HN is the best way to get honest, open feedback. Do you think it is counter-productive to follow the advice above? Should we all be submitting PR's for bug fixes on large open source projects? Or should we only be allowed to work on projects that have been vetted and added to some dev community's backlog? I'm serious because I see this question come up so often.

rhabarba 10y ago

When I was young, everyone wrote a text editor. Today, everyone writes a framework. 2036 will be awesome.

deleted 10y ago
[deleted]

diminish 10y ago

I'm about to start a side project with a desktop web site, a mobile site and a cordova based hybrid app . I'm searching for one single frontend framework * must be fast, * minimal, or customizable * touch-first, and mobile first * css framework * no or minimal javascript, no typescript, on js framework etc. I'm trying to find an alternative to Ionic2 to skip the angular and typescript parts, which I don't need. Any experience?

kbr 10y ago
This is a minimal framework, customizable to its core. Any declaration you make will override the current one, see the docs. It's super fast, and works great on mobile.

afshinmeh 10y ago

This is an exact copy of Skeleton, css transformed to scss, that's it.

kbr 10y ago
I really would wish you see the code carefully before making this comment. 1. Wing is NOT a copy of Skeleton, it is inspired by it, yes, but if you look at the code, it is extremely different code. 2. It doesn't even use SCSS.