5 ms·

SkyBlue – Small SASS framework

67 points by stankot 12y ago

deleted 12y ago
[deleted]
T3RMINATED 12y ago
lots of bad code - wouldnt recommend for production.
potatosareok 12y ago
Always nice to have more basic tools out there, esp. simple ones you can customize, and it looks nice. Thanks for putting it out there. One issue I have with table is on hover, they get a bit janky (hovered row resizes entire table a bit). I think it's b/c you are removing cell border on hover so everything shifts a pixel or two (or however many column - 1). Chrome on windows Version 41.0.2272.76 m. http://imgur.com/7B99Zu2,K1HwU5f http://imgur.com/7B99Zu2,K1HwU5f
- zniperr 12y ago
  I have the same issue on Chrome 40.0.2214.111 on Linux. Other than that I agree, it's nice to have multiple alternatives for different purposes. For example, there is also Skeleton (http://getskeleton.com/ http://getskeleton.com/) which has a very minimalistic design as well.
- stankot 12y ago
  Thank you, I'll take a look at it and fix it soon. EDIT: Fixed :)
ddoolin 12y ago
The main button linking to "Git-hub" should read "GitHub."
coderdude 12y ago
What license was this released under? Quick note: You can't distribute any of the free stuff available from Pixeden: http://www.pixeden.com/license http://www.pixeden.com/license You'd need to provide a link to the asset so that SkyBlue users can download the package.
- stankot 12y ago
  I updated the license and readme, it is under MIT license. As for Pixeden, thank you for noting this, I'll contact them about it.
  - coderdude 12y ago
    Great choice of license. Good luck with your project. Looks nice!
    - stankot 12y ago
      Thank you man! I want to add, that I contacted Pixeden and got their permission to use their icons in SkyBlue.
alexbecker 12y ago
Reminds me of http://960.gs/ http://960.gs/, which is what I use for every webpage (being a backend dev).
- dominotw 12y ago
  why not simply use flexbox?
  - ollysb 12y ago
    I'd love to use flexbox but haven't found a polyfill for IE. What are people using?
    - stankot 12y ago
      Same here. I used it on a couple of mobile-only projects. But 99% of the clients want IE support, and it is way easier to skip flexbox in that case.
      - actionscripted 12y ago
        I agree. I've actually taken to using table/table-cell for primary/container grids because it works in IE 8+ and with border-spacing I can set consistent grids with (fixed) sizes if needed to suit a design.
mosselman 12y ago
Thanks! I like the minimalistic style. I will definitely use this for a small test project soon. What I like less however, but it is a vice that bootstrap shares is that the grid system is a html driven one. As in: I have to define the classes on my html elements. I like http://neat.bourbon.io/ http://neat.bourbon.io/ for example in that it uses extends in sass to apply grid styles to elements from within the css. So my html isn't riddled with layouting. How well do your grid classes lend themselves to applying through css?
- antidaily 12y ago
  To do something similar with Bootstrap you just use the grid mixins within your classes: .left-side { @include make-md-column(3); }
allisterk 12y ago
Looks good - will take a peek. BTW, "CSS checkboxes"
itsbits 12y ago
This is great...very very simple one to be frank..
Brajeshwar 12y ago
I know this is pretty trivial but "Git-hub"! I think it "GitHub". Look at their copyright text.
desireco42 12y ago
Looks very convenient and practical, congrats. BTW, I would use flexbox for grid... then you kind of don't need grid anymore...
thejew 12y ago
Your radios buttons act like checkboxes right now in the demo.
- jpetersonmn 12y ago
  Except you can't uncheck them...
- stankot 12y ago
  Hehe true, just fixed it. Thank you all guys!
dingdingdang 12y ago
Its still 96KB in base CSS format.. hardly "small" by any standard. Never tried it but at least Min ( http://mincss.com http://mincss.com ) is proper small: 995 bytes to be exact, or 96 times smaller than SkyBlue if you will (which I'm sure is in another league feature wise, but I digress).

67 points by stankot 12y ago

deleted 12y ago

[deleted]

T3RMINATED 12y ago

lots of bad code - wouldnt recommend for production.

potatosareok 12y ago

Always nice to have more basic tools out there, esp. simple ones you can customize, and it looks nice. Thanks for putting it out there. One issue I have with table is on hover, they get a bit janky (hovered row resizes entire table a bit). I think it's b/c you are removing cell border on hover so everything shifts a pixel or two (or however many column - 1). Chrome on windows Version 41.0.2272.76 m. http://imgur.com/7B99Zu2,K1HwU5f http://imgur.com/7B99Zu2,K1HwU5f

zniperr 12y ago
I have the same issue on Chrome 40.0.2214.111 on Linux. Other than that I agree, it's nice to have multiple alternatives for different purposes. For example, there is also Skeleton (http://getskeleton.com/ http://getskeleton.com/) which has a very minimalistic design as well.
stankot 12y ago
Thank you, I'll take a look at it and fix it soon. EDIT: Fixed :)

ddoolin 12y ago

The main button linking to "Git-hub" should read "GitHub."

coderdude 12y ago

What license was this released under? Quick note: You can't distribute any of the free stuff available from Pixeden: http://www.pixeden.com/license http://www.pixeden.com/license You'd need to provide a link to the asset so that SkyBlue users can download the package.

stankot 12y ago
I updated the license and readme, it is under MIT license. As for Pixeden, thank you for noting this, I'll contact them about it.
- coderdude 12y ago
  Great choice of license. Good luck with your project. Looks nice!
  - stankot 12y ago
    Thank you man! I want to add, that I contacted Pixeden and got their permission to use their icons in SkyBlue.

alexbecker 12y ago

Reminds me of http://960.gs/ http://960.gs/, which is what I use for every webpage (being a backend dev).

dominotw 12y ago
why not simply use flexbox?
- ollysb 12y ago
  I'd love to use flexbox but haven't found a polyfill for IE. What are people using?
  - stankot 12y ago
    Same here. I used it on a couple of mobile-only projects. But 99% of the clients want IE support, and it is way easier to skip flexbox in that case.
    - actionscripted 12y ago
      I agree. I've actually taken to using table/table-cell for primary/container grids because it works in IE 8+ and with border-spacing I can set consistent grids with (fixed) sizes if needed to suit a design.

mosselman 12y ago

Thanks! I like the minimalistic style. I will definitely use this for a small test project soon. What I like less however, but it is a vice that bootstrap shares is that the grid system is a html driven one. As in: I have to define the classes on my html elements. I like http://neat.bourbon.io/ http://neat.bourbon.io/ for example in that it uses extends in sass to apply grid styles to elements from within the css. So my html isn't riddled with layouting. How well do your grid classes lend themselves to applying through css?

antidaily 12y ago
To do something similar with Bootstrap you just use the grid mixins within your classes: .left-side { @include make-md-column(3); }

allisterk 12y ago

Looks good - will take a peek. BTW, "CSS checkboxes"

itsbits 12y ago

This is great...very very simple one to be frank..

Brajeshwar 12y ago

I know this is pretty trivial but "Git-hub"! I think it "GitHub". Look at their copyright text.

desireco42 12y ago

Looks very convenient and practical, congrats. BTW, I would use flexbox for grid... then you kind of don't need grid anymore...

thejew 12y ago

Your radios buttons act like checkboxes right now in the demo.

jpetersonmn 12y ago
Except you can't uncheck them...
stankot 12y ago
Hehe true, just fixed it. Thank you all guys!

dingdingdang 12y ago

Its still 96KB in base CSS format.. hardly "small" by any standard. Never tried it but at least Min ( http://mincss.com http://mincss.com ) is proper small: 995 bytes to be exact, or 96 times smaller than SkyBlue if you will (which I'm sure is in another league feature wise, but I digress).