css - Expand Responsive Elements Outside of Grid System? -

I am building a responsive website using Foundation 5. Everything is going smoothly, but there is an issue which I am doing, the PSD designer sent me a large scale of 12 column grids, which is great though, there are some elements of the design that are left or far out of the grid Spread till Apart from this, two elements on one side will be located on one side, but each element will have 7 grid spaces.

Although it looks great in Photoshop, but with a responsive grid it is proving challenging for coding. Does anyone have the idea of ​​how to settle it?

I use two different approaches to close this type of layout:

Use negative margins to draw left / right. For example, if your element pulls out of the edge by 25px of the grid, then you will use it:

  .element {margin-left: -25px}  

As long as you are using a liquid grid, the elements will flow to fill the elements.

This is the easiest way and most commonly used in the implementation of bootstrap, so I do not know that the foundation is very different (for complete disclosure: I have not used the foundation). If you are trying to pull out using the measurement values, you will need to make sure that they work through different viewport / media-queries.

Extend on the grid

This is probably the most relevant where you get a 2x7 grid on the page. Where you find something in the design, which falls far beyond the grid you are using, then use a new class name and use it to modify how the grid behaves at that specific point in the page .

Remember that whatever framework you intend to use is to do only as a starting point: to modify it and make it consistent with your needs (and your designer's!) And must believe in making.