Building grids and responsive layouts using Premise WP

With the CSS class pwp-row you can build a grid by simply assigning it to the parent element of your columns. You can then use the classes col2 - col6 to build a “column” grid or span1 - span12 to build a “fluid” grid. On column grids, columns within a row are meant to have the same width, while on fluid grids they can have different widths within the same row. (more…)

Keep an element’s aspect ratio using only CSS

This class allows us to insert a block that grows or shrinks proportionately in relation with the width of its parent container. It stays proportionately sized based on a specific aspect ratio, 1:14:316:9 – so far these are the only aspect ratios available by default but it is very easy to add your own. (more…)

Setting equal heights for elements

Set elements to have the same height using the tallest element as the minimum height. This is very useful! There’s tons of scenarios where you want to apply the same height to certain elements. With this class you can do exactly that. Premise WP automatically checks to see if any elements in the DOM have this class assigned to them, if it finds any, then it calls the function premiseSameHeight() on those elements.

Here is a quick demo

Let’s take the following grid:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat

 

See how all our columns have different heights? Lets fix that by simply assigning each of those columns the class premise-same-height. Here is the difference..

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat

 

If you are thinking “why not assign the class to the parent element to make it easier?”, don’t worry, we thought about that too. We went this route because it gives you more flexibility, but learn more about the premiseSameHeight function to see other ways you can use it in your project.

We hope you find this helpful!