Pocketgrid versus Skeleton

[pwired]

Hi,

I have always used pocketgrid as my favorite css grid but started to try out the skeleton css crid. After playing around a bit with skeleton, besides the included buttons and forms I dont see much advantage over pocketgrid. Can anyone confirm this ?

[pwFoo]

I like pocketgrid, too. No need for bloated css frameworks with endless features.

 

Searched for alternatives (based on flexbox), but haven't really used one...

http://leejordan.github.io/reflex/docs/index.html

http://progressivered.com/fla/?d=0&v=1&h=1&s=0&i=000&a=000#features

 

And a simple one (table based css grid). 

https://github.com/chrisnager/ungrid/

[pwFoo]

forked from ungrid and changed to work with flexbox:

https://github.com/Eroica/unflex

[Christophe]

On my list to try one day: http://lostgrid.org/

PostCSS and Lost video tutorials: https://goo.gl/7Nxkhw

[pwired]

Would be interesting to know how many of us here are using pocketgrid instead of bootstrap or foundation.

[AndZyk]

On 19.11.2016 at 5:34 PM, Christophe said:

On my list to try one day: http://lostgrid.org/

PostCSS and Lost video tutorials: https://goo.gl/7Nxkhw

PostCSS looks indeed interesting, especially the Autoprefixer plugin.

I am thinking about switching my current workflow (CodeKit + Sass + Compass) to Gulp + Sass + PostCSS, but have to evaluate if it is worth the hustle. 

[Marek]

But pocket grid doesnt contain column classes, does it? Then dont you find yourself needeing it? it can be nice to specify width for main block and aside sidebar without using unsemantic classes for columns. But when i need to put 2 text inputs next to each other i really like to use classes like .column-6 . What other name would i give to those classes anyway?

Now i have been developing my own kind of framework strongly influenced be style of basscss . I really like this functional/atomic approach. Something to try if you have not already. But start with open mind, because it may not follow common "best practices"

[pwired]

Quote

But pocket grid doesnt contain column classes, does it?

Pocketgrid is so flexible, you can make and define your own column classes with it

Quote

But when i need to put 2 text inputs next to each other i really like to use classes like .column-6 . What other name would i give to those classes anyway?

Example how pocketgrid lets you do it:

   <div id="some id" class="w20 block">

Blocks are semantic in pocketgrid so here I named it simply w20. The w stands for width and the 20 for 20%. It doesnt have to be w20, you can use any semantic value or description you want, I used w20 because it makes sense and works for me.  Then you simply define these values in your main css file like in my example:

.w20 {width: 20%; min-height: 1px;}

The min-height: 1px is necessary to avoid columns from starting to float when they are empty (no output in a column)

Isnt pocketgrid just wonderful

 

 

[Marek]

So do you always start with pocket grid only? Or you have your base stylesheet with styles that u often reuse? If so, what is in it?

For example I for some reason hate styling form elements... that would be a reason for me to use something bigger than pocketgrid. But other than that, i think another advantage of bigger frameworks is that they have base styles for html, body, typography, box-sizing and stuff like that. However , i also dont like these big ones that come with js plugins... i rather like to choose/make plugins myself. But there are some people that like to throw every possible jquery plugin on top of bootstrap... and then make it a wordress theme .... and throw some more js scripts by wp plugins... i hate those slow ugly websites  

And if you like naming conventions like .w20 you might like atomic frameworks. And then, you could run some task in grunt for example, that would read all html files and delete all the classes and stuff in css that you dont use in html. There should be something that does that.

 

[pwired]

About atomic frameworks you mentioned, I googled and took a look at http://acss.io/guides/atomizer.html and also at basscss.

I dont know what to think about it actually, it looks like styling going into smaller units and pieces.

 

[AndZyk]

On 20.11.2016 at 8:08 PM, AndZyk said:

PostCSS looks indeed interesting, especially the Autoprefixer plugin.

I am thinking about switching my current workflow (CodeKit + Sass + Compass) to Gulp + Sass + PostCSS, but have to evaluate if it is worth the hustle. 

Sorry for being off-topic again, but I just saw that CodeKit also supports the Autoprefixer plugin. No need for compass anymore. 

[SiNNuT]

@AndZyk Compass and Autoprefixer don't do exactly the same thing. 

[AndZyk]

That is right. I mainly used it for CSS3 so far. But maybe it has some other uses. 

[pwFoo]

I try to get around bloated frameworks. Pocketgrid is great. At the moment I looking for a lightweight flexbox grid solutions... Maybe something like:

/* flexbox container */
.grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

/* flexbox item */
.cell {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    box-sizing: border-box;
    border: solid 1px silver;
}

/* fixed width, item will not grow / shrink to fill the row */
.fixed {
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;

    -ms-flex-preferred-size: auto;
    flex-basis: auto
}

 

Code above is quickly tested with Chrome, Firefox, Edge and IE. 

Offset (margin), fixed width (class fixed above) and column width (simply css width) seems to work fine.
Forced line break before / after a cell doesn't work, but shouldn't be a problem.

 

So pocketgrid or a simple flexgrid (unflex, custom) or maybe css table layout (ungrid) wil be fine, but I have to find a lightweight framework with stylings / themes for elements like forms, buttons, ...

[AndZyk]

UIkit provides a flex, form and button component. 

And if you are using Sass or Less, you can install UIkit for example with Bower and import only the partials you need. Here is what the import would look like in Sass:

@import "../../bower_components/uikit/scss/uikit-mixins.scss";
@import "../../bower_components/uikit/scss/uikit-variables.scss";

@import "../../bower_components/uikit/scss/core/flex.scss";
@import "../../bower_components/uikit/scss/core/form.scss";
@import "../../bower_components/uikit/scss/core/button.scss";

That way you still would have a lightweight framework.

Regards, Andreas

[microcipcip]

If you want you can try my flexbox grid. It is configurable and based on Sass. Only issue (I guess) is that it hasn't been used by many users yet so you may find some bugs, I am using it on live websites with great results though. Note as well that you need at least IE10 for this grid.

https://microcipcip.github.io/gridy/#!/

Quote

I am thinking about switching my current workflow (CodeKit + Sass + Compass) to Gulp + Sass + PostCSS, but have to evaluate if it is worth the hustle.

If you are using Sass with Ruby, it definitely is worth the hustle! Node Sass uses LibSass that is a C++ implementation of Sass, and it is extremely fast. Usually on big websites it doesn't take more than few milliseconds to compile.

My workflow is Gulp + Sass + Autoprefixer, then I install thoughtbot Bourbon and Bitter plus a custom made mixin for the media queries