![]() The second option is to add borders and padding directly to a grid unit. The first option is to nest a inside each Grid unit and style the child container: To add borders and padding to Pure Grids, you have two options. Resize the page to see the grid collapse.Ĭontent marked with this class will be hidden below 768pxĬontent marked with this class will be hidden between 768px and 979pxĬontent marked with this class will be hidden above 980pxĪpplying Padding and Borders to Grid Units The second snippet replaces the pure-g with pure-g-r, thereby making the one-third columns collapse to width: 100% on lower screen widths ( 767px by default). They'll always be one-thirds, irrespective of the width of the screen. The first snippet below shows how regular Pure Grids are written. ![]() All elements with a classname of pure-u-*-* will automatically become responsive and collapse to width: 100% when the viewport's width is 767px or lower. You can use this instead of using pure-g as you normally do. It adds a single new classname called pure-g-r (the "r" stands for responsive, you see). Pure Responsive Grids builds on top of the base Grids. The first low-level tools, the Pure Grids Rework Plugin, is available to use today-we use this tool to generate Pure's built-in unit sizes. We are working on building tools to allow people to customize Pure Grids. For example the unit classname for 50% width is: pure-u-1-2. Depicted below are the available units that can be appended to the pure-u-* classname where * is one of the unit factions listed below. Pure ships with both a 5ths and 24ths based grid. When setting a font-family in your project, be sure to check out the section on using Grids with your font-family. This ensures that the content will be rendered properly. For example, pure-u-1-2 has a width of 50%, whereas pure-u-1-5 would have a width of 20%.Īll child elements of a grid must be unitsĬhild elements contained within an element with a pure-g classname must be a grid unit with a pure-u or pure-u-* classname.Īll content which is visible to people needs to be contained inside a grid unit. Units have various class names that represent their widths. Pure Grids consist of two types of classes: grid classes ( pure-g or pure-g-r) and unit classes ( pure-u or pure-u-*) There are a few simple concepts to keep in mind: Pure Grids are easy to work with, and very powerful.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |