Skeleton 2.0 CSS Framework • Hacker News Board

Re: Skeleton 2.0 CSS Framework

#111

Post by Aradalf » Wed, Dec 10, 2014, 5:44 PM UTC

dhgamache wrote: post #48

dkersten wrote: post #29

Earlier quoted context omitted.

I read a lot on my phone and I don't have great eyesight. If I cannot zoom the website I'm looking at, I often cannot read it.

I honestly hadn't considered this case. Let me dig into it and see if I can find a solution that works best all around.

>Sometimes you see all kinds of complicated workarounds for that, such as detecting an orientation change and temporarily blocking zooming, or detecting an attempt to zoom and then disabling the restriction temporarily so if the user repeatedly tries to pinch-zoom then subsequent ones work.

Chris_Newton's comment seems to have possible workarounds that can fix this issue. I'll trust your decision whatever you go with though, and thanks for Skeleton!

Re: Skeleton 2.0 CSS Framework

#112

Post by Aradalf » Wed, Dec 10, 2014, 5:48 PM UTC

ddoolin wrote: post #69

What's the reason behind not doing nested grid columns? Seems like a fairly common usage pattern as I've seen. What's the recommended way of doing something where something like Bootstrap would use nested columns?

I'm curious about this as well.

Re: Skeleton 2.0 CSS Framework

#113

Post by jonathanstark » Wed, Dec 10, 2014, 5:52 PM UTC

Very, very nice. Kudos DHG!

Re: Skeleton 2.0 CSS Framework

#114

Post by ArtDev » Wed, Dec 10, 2014, 6:15 PM UTC

I like simplicity but skeleton is missing a few essential things for me.

1) Vendor prefixing. Like "sk-columns sk-column-5". Uikit does this, but Foundation and Bootstrap do not. I really wish they did.

2) Preprocessor support in Sass and Less. They are so similar, it is easy to support both.

The grid class naming really really needs some cleanup! No one wants to automate something that has to output integers as integer names like "five" or "six". What is wrong with "sk-col-5" or "sk-col-6"?

Re: Skeleton 2.0 CSS Framework

#115

Post by pygy_ » Wed, Dec 10, 2014, 8:00 PM UTC

Phrodo_00 wrote: post #106

pygy_ wrote: post #100

Earlier quoted context omitted.

Have you looked at PocketGrid? It's one of these situations where less is more. The library weights 517 bytes minified, and it lets you write semantic markup. http://arnaudleray.github.io/pocketgrid/docs/ https://github.com/arnaudleray/pocketgrid ———— Edit: here's the pitch: * Lightweight: about 0.5kB! * Pure CSS-only (no CSS preprocessor needed) * Fluid (by default, but you can set a fixed width or max-width if you…

I've worked with Bourbon Neat and found it pretty nice, it's a series of mixins so you can use semantec classes however you want. http://neat.bourbon.io/

I don't have any hands on experience with SASS, but IIUC, you can `@include` and `@extend` PocketGrid as well.

Re: Skeleton 2.0 CSS Framework

#116

Post by jameshk » Wed, Dec 10, 2014, 10:49 PM UTC

Thanks for making this. A really awesome and minimal way to build sites. This will be perfect for my next project.

Re: Skeleton 2.0 CSS Framework

#117

Post by JohnTHaller » Thu, Dec 11, 2014, 1:14 AM UTC

This is a really solid framework. A couple of humble suggestions:

1. Package up your site itself on github as one of the examples. Mixing up some elements of your base site with some of the landing bits would make for a solid base for a lot of people.

2. Get a compatibility table together stat. To help you out, I did a quick test of both your main site and the landing page. Nothing in depth, just the basics. The following browsers worked properly:

On Windows (8.1 unless noted):

Firefox Stable 34.0.5

Firefox ESR 31.3.0

Opera 26.0.1656.32

Google Chrome Stable 39.0.2171.95

Internet Explorer 11

Internet Explorer 10 (Windows 7)

Internet Explorer 9 (Windows Vista)

On Ubuntu 14.0.4:

Firefox Stable 34.0

Chromium 39.0.2171.65

Google Chrome 39.0.2171.95

On Android 4.4:

Google Chrome 39.0.2171.93 (both landscape and portrait, phone and tablet)*

Firefox 34.0 (both landscape and portrait, phone and tablet)*

* Note that the UI navbar didn't stick on the phone for either browser despite the phone having a 1920x1080 resolution vs the tablet's 1024x768 resolution. I think this is by design on your end

The following browsers did not work properly:

Windows XP - Internet Explorer 7 and 8 - Failed to load custom images at top hero secion (custom CSS not contained in skeleton), alignment issues of buttons, full nav list visible (not part of skeleton issues), example grid completely broken (shows as full width divs), very broken visually but still usable

Windows XP - Internet Explorer 6 - issues above plus more visual issues. semi-usable

Re: Skeleton 2.0 CSS Framework

#118

Post by [deleted] » Thu, Dec 11, 2014, 9:33 AM UTC

[deleted]

Re: Skeleton 2.0 CSS Framework

#119

Post by milesg » Thu, Dec 11, 2014, 9:35 AM UTC

dhgamache wrote: post #6

Hey ya'll - I'm Dave the creator of Skeleton. Grateful to see it on HN. I wrote about why I created v2.0 in a weird format here: https://medium.com/@dhg/dear-skeleton-452f4bb07d69 I'm hoping the update really helps anyone who's been using Skeleton for a while or anyone trying to get into RWD. Thanks :)

Hi Dave, I love Skeleton, have been using it exclusively as a base for my web projects over the past 2 years and have it on around 20 client sites. Look forward to taking Skeleton 2.0 for a spin next week!

Re: Skeleton 2.0 CSS Framework

#120

Post by dhgamache » Thu, Dec 11, 2014, 11:49 PM UTC

JohnTHaller wrote: post #117

This is a really solid framework. A couple of humble suggestions: 1. Package up your site itself on github as one of the examples. Mixing up some elements of your base site with some of the landing bits would make for a solid base for a lot of people. 2. Get a compatibility table together stat. To help you out, I did a quick test of both your main site and the landing page. Nothing in depth, just the basics. The foll…

This is awesome! Browser chart more than just a quick list might be nice. Adding it as an outstanding issue to my long list of improvements. Appreciate the feedback!