kbrsh / wing

:gem: A beautiful CSS framework designed for minimalists.

Wing

A minimal CSS framework.

Features

Everything you need to create a basic project is included, all in a 2kb file (minified + gzipped). On top of that, almost everything is styled automatically, without the need for learning specific classes. This allows for an intuitive experience developing with Wing, as it's designed to be a boilerplate stylesheet for any project.

Installation

npm

$ npm install --save wingcss

Link to It

<link rel="stylesheet" href="https://unpkg.com/wingcss"/>

Documentation

Find a bug?

Submit it in the issues

License

Licensed under the MIT License by Kabir Shah

wing's Issues

Bower and CDN?

Any thoughts on registering your project to bower?

Also there are some of free CDNs out there so usage could be even easier and/or faster.

• jsdelivr
• cdnjs

Optimize/Reduce File Size

To make room for more styling, there needs to be optimizations made. For example, if there are rules that look like this:

h1 {
   font-size: 2rem;
}

h1 {
    font-family: 'Quicksand';
}

Combine them into this:

h1 {
    font-size: 2rem;
    font-family: 'Quicksand';
}

This helps to add new features, such as new input elements in #8

If you would like to submit a PR, please refer to CONTRIBUTING.md

input & textarea have browser-defined font in Chrome

Please override them by using

input, textarea {
    ...
}

Thanks

Normalize/ css reset?

On firefox I noticed spurious margins on block elements like body, headings, figure and perhaps many others. In the code I don't see any css reset or normalization. Is this by design or an omission?

Grid's column width values may be incorrect

Hello,

I've spotted some inconsistencies with the grid's percent-based column class' width values like .col-1, .col-2, .col-3 etc., as they just doesn't add up well. When I combine two, or more 'equal-width' columns with simple .col class assigned to each, margin is four percent, which is all right. However when I combine two 'not-equal-width', or more columns e.g. .col-2 with .col-10, or .col-3 with .col-4 and .col-5, just more margin remains. It's because width values may be incorrect – there is always four percent 'extra' margin remained – distributed equally because of justify-content: space-between styling applied. I guess, margin was meant to be consistent with all column-combinations, so I think they'd be worth checking.

If I'm right, here are the correct values, recalculated for a consistent four-percent-margin:

.col-1 {
  width: 4.666666666666667%;
}

.col-2 {
  width: 13.333333333333333%;
}

.col-3 {
  width: 22%;
}

.col-4 {
  width: 30.66666666666667%;
}

.col-5 {
  width: 39.33333333333333%;
}

.col-6 {
  width: 48%;
}

.col-7 {
  width: 56.666666666666667%;
}

.col-8 {
  width: 65.33333333333333%;
}

.col-9 {
  width: 74%;
}

.col-10 {
  width: 82.66666666666667%;
}

.col-11 {
  width: 91.33333333333333%;
}

.col-12 {
  width: 100%;
}

I've tested this, seems to be working as expected. Please let me know if the above is correct, or I just don't get something!

Maybe shall I've created a pull request instead?

Thank you in advance!

Kind regards,
Márton Lente

Grid's column width values are still incorrect

Hello,

There may be a problem with the grid system's logic. Column widths are only correct in evenly distributed columns with .col class, as padding right values are always subtracted from other columns' widths, except of course last childs. You can easily spot the issue on the test screenshot, where the two colums with .col-6 class shall be equal in width, but theye aren't – as the last child is wider with the padding right value.

This issue basically is present in all column-combinations, making the grid inaccurate. Let me know if I'm wrong!

Thank you in advance!

Kind regards,
Márton Lente

Textarea has Outline on Focus

When focusing on inputs, there is no outline, but on textarea, there is.

Overly Rounded select

You can see how round this is on OSX (and probably on iOS as well). You can remove this using -webkit-border-radius: 0; or using -webkit-appearance: none; and rebuilding a select from "scratch"

Move to Flexbox, Plugins

Wing will be moving to flexbox, give your opinion here.

Reasons for moving to flexbox

• Cleaner code
• Less file size (more features can be added now)
• 97% of browsers support flexbox

Now, utility classes like .center and .vertical-align are easily implemented. The grid will be given a revamp, with simpler classes and shortcuts.

You will be able to do

<div class="row">
    <div class="col">Automatically Sized</div>
    <div class="col">Automatically Sized</div>
</div>

While still having compatibility for col-1 through col-12, so you don't have to edit all of your existing code.

There will be grid offsets, this is a very much requested feature.

Other things will be added in a plugin system, where extra modules such as:

• Navbar
• Alert messages
• Full screen hero

Let me know what you think, and if you have any ideas, comment them below as well, this will all happen in Wing v0.2.0. And all of these changes will lead up to v1.0.0.

NPM version is not up to date

The version of wing obtained from NPM here: NPM is not up to date and was last updated a year ago.

I like the css framework

but it does not style tables, and without css it tables look bad. example

<table>
    <caption data-variable="*level">Table Title</caption>
    <thead>
      <tr>
        <th>Player</th>
        <th>Score</th>
      </tr>
    </thead>
    <tbody data-list="*scores-d-score">
      <tr>
        <td data-variable="*player">Sac</td>
        <td data-variable="*score">994</td>
      </tr>

      <tr>
        <td data-variable="*player">A</td>
        <td data-variable="*score">995</td>
      </tr>
    </tbody>
</table>

Add navbar component

Hello,

Is there a way to add a simple navbar (like that but more simpler, of course: http://bootsnipp.com/snippets/featured/navbar-search-add-on-bs-3 ) in wing?

Or is there a way to have a invisible navbar menu which can collaspe for mobile using wing 0.1.7?

Thanks

'fixed' class but still in sequence (enhancement)

hi,

I was thinking the 'fixed' class can be used for a floating top menu bar.
but it seems like it fixed to a specific position (usable for side menu).

it will be good if there is another class that is fixed but still in sequence in term of the row element of the grid - in the screenshot, Row 2 should be under FIXED TITLE.

(not sure if it's doable, I'm new to css)

Improve .full-screen for mobile devices

when you assign the class "full-screen" to an element, it works well in desktop and medium screens but then when you see it on mobile displays it gets a little different. I am talking about google chrome on mobile now. when you start scrolling the page, the top bar hides and that makes the layout re adjust it's height causing more of an unpleasant way to navigate throw the page.

CDN not pulling in card styles

I am working here using the CDN (https://unpkg.com/wingcss) for wing.css but the styles for card(s) in not being pulled in. I think this might be related to #60. If you point me in the right direction I can probably pick this up and create a PR.

Fix non-standard property

Thank you very much for this good CSS framework.

I open this issue because I see that you use a lot of non-standard property for CSS3.0 (the -moz and -webkit property)
Here a CSS validation from W3C.

Can you fix it?
Moreover, this help to fix #10!

Add disabled button styles

Col-x with more than one class

It seems, like it's required to add additional classes behind the col-x class.
If you write a col-div this way:

<div class="myclass col-6">
Some content
</div>

the grid is destroyed and doesn't work as intended.

If you switch the classes everything works fine.

<div class="col-6 myclass">
Some content
</div>

BR

Grid system's 'uneven' columns don't work anymore

Hello,

I've just started a new project with the most recent version of the framework, and noticed, that the grid system unfortunately doesn't work anymore, as 'uneven' columns start on a new line. So that when I create a div with a .row class, and put two or more 'uneven' columns e.g. two divs with class .col-7 and .col-5, the latter jumps onto a new line.

After our last conversation in February, and commit on the 15th of February (fix #77 ), Wing worked just perfectly in terms of the grid system! Is there a way the 'rollback' to that correct version?

(I still can use that version of course with no problem, just thought to report the issue.)

Thank you in advance,
Márton Lente

Additional Flexbox Components

I'm not sure what, if anymore, components/plugins you'd like added, but I've rolled a lot of my own flexbox layouts, cards, panels, etc..

Depending on what you'd like to add I could give a few of them a shot.

Is the framework's development still active?

Hello,

Wing is an amazing, easy to use CSS framework – truely one-of-a-kind. However its grid system is simply broken, since the last commit, made last year in June, as described in #82.

Do you plan fixing this in future, so that the development is still active? I don't expect 'big' updates since Wing is a simple product, but fixing its grid system seems essential.

Thanks in advance,
Márton Lente

Implement Dark/Inverted style

I would love to use the css styles but with inverted color scheme, would it be hard to implement?

Not Working With Secure https

I tried to link wing on to my https ssl lock secured site�,� and when it is on https, it won't work. I�t says hat it is an insecure stylesheet. I recommend that you get ssl for wing so that it is secure. I also did the same for https://custommarkup.ml, and it still won't work(Even though I don't want to use it, I was just testing it out�). Thanks.

Errors on Splash Page

See bottom right

Example Section

If you guys use Wing in your projects, send me the link by commenting below.

Please use the format of
Name - (http://link.com) - Description

I will make an examples section of people using Wing!

Card classes are not included in the npm download

Ran npm i wingcss which downloaded wing 1.0.0-beta which did not include any of the card classes

Cards not loading properly on Internet Explorer

The cards feature of Wing does not load properly on Internet Explorer (any version). The text ends up overlapping and it unreadable.

Bad display, fieldset

For the code

Here the display

I've test the 36263ca version and the tag version https://github.com/KingPixil/wing/releases/tag/v1.0.0-beta

Size of default and outline buttons are different

I love the simple styles of Wing. It's such a great and minimal library. I wanted to raise an issue which might be a non-issue. The size of the default button and the outline button are a ~ pixel different in size because the default does not have a border and the outline does. I added a 1.5px size border to the default and now both buttons have close to the same size. Is their difference something intentional? I would love to help with this issue and make a contribution to the project but just want to know if this is really something to fix or this was an intentional design decision.

Can't use .card when I use npm

Hi, I use npm to include wingcss, but .card class can't be used. I find the source code in node_modules/wingcss/dist/wing.css, I can't see any class about .card.

Outlined buttons have different height

If you use both buttons side by side they don't align perfect, because the outlined buttons has +6px of height.

unpkg link pointing to nonexistent js

https://unpkg.com/wingcss/ points to a nonexistent js file, @kbrsh can you make it go back to https://unpkg.com/[email protected]/dist/wing.min.css?

Grids aren't working

Grids aren't working :(
I have Wing included via unpkg.

XMP instead of code?

In your framework, you are using code tags to display code, although this works for CSS and JS, it doesn't work for HTML. I recommend to use xmp which still can use a pre tag but will also show HTML.

Add .alert (or .message) class

Hello,

Is there a way to add .alert or .message at wing css?

For example, here a reference from Siimple CSS framework:

http://usewing.ml/ leads to spam and ads

Hi,

I guess your domain expired or something, because this is something else... ;)

Can't find border-box

in base.styl

• box-sizing border-box

Also add style for other input elements

Currently there is only [type="text"] and [type="button"] styled. But there are so many more: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes

So I've already tried some tweaks, but there is no perfect solution without having a selector that contains all this types (or at least the most common)

Like this (messy & not classy 😅):

input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=reset]), select
/* or this */
input[type=text], input[type=password], input[type=email], input[type=number], input[type=search], input[type=url], input[type=tel], input[type=datetime], input[type=color], input[type=date]

in forms.css#L6

So the other point is, this framework should cover this (or at least some of the most common types) in my opinion - but it would make also the filesize bigger.

gist of the screenshot

Website not loading?

Hey,

Wing is one of the best framework in the market... But the website isn't working for me anymore. Do you know why?

Inverted Button Example Wrong Class

Example on the website says <button class="btn btn-outline">outline-inverted</button>

It should be <button class="btn btn-outline-inverted">outline-inverted</button>

Ip

Browser Testing

Hi Kabir,

I used Wing in one project, a simple one page site. I left it for a while and just tested it yesterday in iPad's browser. Not sure if it's the problem in my code or wing's.

Appreciate that this framework is lightweight but gets everything basic. I tried this framework because sometimes when I use bootstrap I just need the html reset, grid system and couple of variables and mixins. It's good to have less predefines and keep the most frequent use features.

But seems like the grid system is not work properly in iPad devices. What I saw is each col col-*, first one is. col col-9 filled 100% width of the row, and the 2nd one col col-3 is started to be overflowed.

It's important to note that the browser I was using is out of date. But I don't find any documentations about the browser compatibility.

Will browser testing be in the schedule? Or shall we make a browser compatibility list by checking the modern features we are using especially flex?

Cheers,

Wing Him

Visited links have same colors

Visited links have same colors

I think you need a:visited { color: SOME ; } to src/links.css

select

Can you style the select tag do not be default (ugly) one? :)

Lack of proper browser support documentation

It seems like Wing is not designed to work everywhere. Some of our products requires more browser support and some requires less.

Testing, defining and displaying the browser support is essential to choose whether it can be used for production.

Hopes @kbrsh will look into this.

Column Margins

Margins for columns, specifically with width: 100% elements (such as an input) is not applied, instead, the elements are shown right next to each other.

inner column overflow during resize

hi,

I was testing responsiveness and encountered this.
what I was trying to achieve is items inside div 'col' content should not touch the edge

before

after

link to the testing code if required
http://www.cssdesk.com/BC8ku

cheers

Cards drop shadow are clipped

The drop shadows applied to card components are clipped due to overflow: hidden on the cards component.

Here's the line that's causing this to happen.
https://github.com/KingPixil/wing/blob/master/src/cards.css#L5

I'll create a PR with a fix - feel free to discard it though.

Wing doesn't work on secure https

This framework doesn't work on Secure http. Hopefully you will fix this instead of closing it like you did with talon.

Utilities could be at end of stylesheet

Hello,

I've just started working with Wing, which I really enjoy because of its simplicity and good logic! However my suggestion is that utilities may be better at the end of the stylesheet – so that you could better use them to combine with other built-in classes (e.g. for horizontally align cards, etc.).

This way you could spare some more custom css on your projects.

Note: It's not an issue, but a tip – it's good as it is now.

Kind regards,
Márton Lente