By beckyjohnson on

I am using the skeleton drupal theme right now and I like it but I have a problem. My layout is for a site that is 1024px width....and skeleton is a 940 width grid.....how can I do the math to convert it to 1024 width OR is there a better responsive theme to use to get 1024 px width? I looked into bootstrap, omega and some other things but I don't really understand less/ sass.....Are there any suggestions about how I could best handle this?

Rebecca

⋅ Categories: Drupal 8.x

Comments

VM’s picture

VM commented

you don't have to use less or sass with omega and bootstrap.

I'm not quote sure what you mean by math. You would have to alter the containers from 940 to 1004 assuming you want to maintain the 20 pix of spacing. you would also have to set the 960 pixel overall container to 1024.

paean99’s picture

paean99 commented

The math conversion is really a simple case of proportion.
For example, lets say that you have an element in 960-skeleton theme with a size 'SkelSize' that you want to convert to your new 1024-layout. Call it 'newSize'. It then gives us a simple relation:

newSize/1024 = SkelSize/960
and from that:
newSize = SkelSize*1024/960

So the conversion value is 1024/960. You can apply that value to any size in the Skeleton theme.

There is already an issue with a link to the calculated values for 1024 and 1280 at Wide layout (1280px).

Some cautions: i have taken a look at the values given there and they have been rounded. It is not a best practice, since it can give you some weird behaviors. But on the other hand the file given there will give you a good idea of how to do it.

beckyjohnson’s picture

beckyjohnson commented

Thanks guys! I didn't realize there was already an issue, as well. I had searched and didn't see it. I agree the math is not 100% on as you have to round. I found zurb's Foundation last night and I am going to try using that css and see how it goes. I used foundation 4 a really long time ago and I'm going to try five now. They have a thing that let's you set the max container width and it's handy. http://foundation.zurb.com/develop/download.html#customizeFoundation

Jeff Burnz’s picture

Jeff Burnz commented

Use something with a fluid grid and set any width you want.

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.