Creating a GridFramework for Skeleton
Permalink
I'm putting together a very basic 5.7 theme using the grid part of Skeleton: (http://getskeleton.com/)
I've not had any issues getting the creating the GridFramework, but when it comes to editing it I'm finding that the handles to change the grid don't sit where they should. Some of them just aren't set at the same percentages as the actual grid columns. See attached for this.
I'm been able to create a custom grid for Susy grids without having this happening, and with Skeleton being pretty simple in terms of how it works I'm a bit stuck as to its cause. I've not got any other styles in play for this, it's simply the grid portion of Skeleton. I changed the .contain and .row classes in Skeleton to something unique, as to not intefere with c5's bootstrap interface.
I'm fairly certain I've got the actual GridFramework class set up correctly, as it's outputting the grid related code as I'd expect. I'm wondering if it needs some extra little tweak CSS wise. This in 5.7.4.2.
Has anyone set this up before and encountered this? Any tips?
I've not had any issues getting the creating the GridFramework, but when it comes to editing it I'm finding that the handles to change the grid don't sit where they should. Some of them just aren't set at the same percentages as the actual grid columns. See attached for this.
I'm been able to create a custom grid for Susy grids without having this happening, and with Skeleton being pretty simple in terms of how it works I'm a bit stuck as to its cause. I've not got any other styles in play for this, it's simply the grid portion of Skeleton. I changed the .contain and .row classes in Skeleton to something unique, as to not intefere with c5's bootstrap interface.
I'm fairly certain I've got the actual GridFramework class set up correctly, as it's outputting the grid related code as I'd expect. I'm wondering if it needs some extra little tweak CSS wise. This in 5.7.4.2.
Has anyone set this up before and encountered this? Any tips?
I have a couple of themes that do the same thing. I hacked out the Skeleton grid & replaced it with Gumby as the class names are all the same and I didn't want to have to go back over all of my templates. I'm getting the same issue too. Is it down to there being 16 columns at work & there's just not enough space?
I've just gone back and checked one of my Sass/Susy based themes... although it's usable, it still has some of the handles in the wrong places when adding a layout. Editing an existing layout is fine though. I'm pretty sure that this worked correctly in earlier versions of 5.7 - I haven't changed my grid code since I first created it sometime during 5.7.2/3.
Maybe they're an issue with the layout code, I might have to dig a bit deeper to see how it works...
Maybe they're an issue with the layout code, I might have to dig a bit deeper to see how it works...
Same here. Did a little skeleton package just for fun and the handles are wonky. Attached an image.
Will be great to have a Skeleton framework for 5.7.....thanks Ryan! Hopefully the problems can be overcome.
I've worked out a fix for this.
The way skeleton works out its column margins is by adding on margins to the _left_ side of columns, setting a margin left of zero for the first column (first-child).
I found that if I simply swapped this behaviour over, so that margins are applied on the right, and it's the last column that has a margin right of zero (last-child), the grid continues to work correctly AND the handles show in the right spots.
This is something that can be changed in Skeleton without having to re-code anything else, it's a few minutes work (I've using a Sass based version which makes it even easier).
I'll put something up on Github soon.
The way skeleton works out its column margins is by adding on margins to the _left_ side of columns, setting a margin left of zero for the first column (first-child).
I found that if I simply swapped this behaviour over, so that margins are applied on the right, and it's the last column that has a margin right of zero (last-child), the grid continues to work correctly AND the handles show in the right spots.
This is something that can be changed in Skeleton without having to re-code anything else, it's a few minutes work (I've using a Sass based version which makes it even easier).
I'll put something up on Github soon.
have you put something to github already?
