You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I just wanted to share a few CSS extras that I found work well together with the pure grids module to make layout easier, I hope someone else finds them helpful!:
This makes layout easier by using old IE's box-sizing
method of including padding in the width of an element,
so setting width: 100%; won't make an element overflow.
Set width: 100%; on .pure-u-1 elements:
.pure-u-1 { width: 100% }
By default Pure just sets display: block; on .pure-u-1 elements -nothing more.
Setting display:block; on an <input> element will not make it take up 100% of its width. width: 100%; fixes this safely, because we have our box-sizing set to border-box.
Super simple gutters minus the wrapper <div>:
.gutter { padding-right: 1em }
Use it by adding the gutter class to any .pure-u-# element.
This too can be done safely because we have set box-sizing: border-box.
The text was updated successfully, but these errors were encountered:
I just wanted to share a few CSS extras that I found work well together with the pure grids module to make layout easier, I hope someone else finds them helpful!:
Set
box-sizing
toborder-box
:This makes layout easier by using old IE's
box-sizing
method of including padding in the width of an element,
so setting
width: 100%;
won't make an element overflow.Set
width: 100%;
on.pure-u-1
elements:By default Pure just sets
display: block;
on.pure-u-1
elements -nothing more.Setting
display:block;
on an<input>
element will not make it take up 100% of its width.width: 100%;
fixes this safely, because we have ourbox-sizing
set toborder-box
.Super simple gutters minus the wrapper
<div>
:Use it by adding the
gutter
class to any.pure-u-#
element.This too can be done safely because we have set
box-sizing: border-box
.The text was updated successfully, but these errors were encountered: