codyhouse / codyhouse-framework

A lightweight front-end framework for building accessible, bespoke interfaces.
https://codyhouse.co/
MIT License
1.16k stars 171 forks source link

Spacing #10

Closed JABClari closed 5 years ago

JABClari commented 5 years ago

The grid class applies padding which gives a weird result. I don't know the notion behind it. Check it out in the image below. <div class='grid'>

Computed Result

padding : var(--space-md) 0 0 var(--space-md);

padding-top: var(--space-md); padding-right: 0; padding-bottom: 0; padding-left: var(--space-md);

What's the reason behind the 0 0 on the right and bottom ? screenshot 323

sebastiano-guerriero commented 5 years ago

The padding values applied to the grid elements are used to set the grid gap (you can overwrite it using one of the .grid-gap-- classes). They work in combo with the negative margins applied to the grid container (which make sure the grid is aligned with other layout elements). If you want to style a grid item, I'd suggest to create a new element inside the .col-- element (and use the grid classes only for setting layout rules). Cheers

sebastiano-guerriero commented 5 years ago

More info on the Grid & Layout page of our documentation: https://codyhouse.co/ds/docs/globals/grid-layout