Debugging
There are a couple of useful CSS debugging utilities built into the system.
.debug
The debug_children module allows you to use a class called "debug" on any element. That element along with any child node will have an outline of 1px solid gold placed on it.
Alternatively you can use the Pesticide.io Chrome Plugin
.debug_grid
.debug_grid_16
The debug grid module allows you to put a background grid on any element which can help you line elements up vertically and horizontally with eachother. Sometimes across large amounts of whitespace it can be tough to see if things are aligned. The background
grid comes in both 8 and 16px columns.
Alternatively you can use the Tachyons X-Ray Chrome Plugin
Grid at 8px
The Grid
& the Graphic Designer
For us Graphic Design is “organization of information.” There are other types of graphic design more concerned with illustration or of a narrative nature.
Nothing could be more useful to reach our intention than the Grid. The grid represents the basic structure of our graphic design, it helps to
organize the content, it provides consistency, it gives an orderly look and it projects a level of intellectual elegance that we like to express.
ahere are infinite kinds of grids, but just one - the most
appropriate - for any problem. Therefore, it becomes important to
know which kind of grid is the most appropriate. The basic
understanding is that the smaller the module of the grid the least
helpful it could be. We could say that an empty page is a page with
an infintesimal small grid. Therefore, it is equivalent to not
being there. Conversely a page with a coarse grid is a very
restricting grid offering too few alternatives. The secret is to
nd the proper kind of grid for the
job at hand.
Grid at 16px
Image Title
Image description