Tachyons
v4.12.0
Debugging Debug Grid Box sizing Spacing Floats Clearfix Display Widths Basic Grid Flexbox Max Widths Heights Position

Debug Grid

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.

The debug module is commented out at the bottom of the src/tachyons.css file. If you uncomment it a 1px outline will be placed on every element on the page. Each element has a different color outline. The purpose of this is to help distinguish elements that are close together by giving them different colors. This has been helpful at times when the outlines are overlapping by 1 or 2 pixels and it’s hard to tell where one element ends and the other begins.

Examples

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

Sign up form

Previous

Debug

Next

Grid

Reference

MDN - Outline

tachyons-debug-grid

v1.2.4 1.87 KB
Declarations
4
Selectors
4
Max. Specificity Score
10
Size of Avg. Rule
1
src/_debug-grid.css 

            /*

   DEBUG GRID
   http://tachyons.io/docs/debug-grid/

   Can be useful for debugging layout issues
   or helping to make sure things line up perfectly.
   Just tack one of these classes onto a parent element.

*/

.debug-grid {
  background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAFElEQVR4AWPAC97/9x0eCsAEPgwAVLshdpENIxcAAAAASUVORK5CYII=) repeat top left;
}

.debug-grid-16 {
  background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMklEQVR4AWOgCLz/b0epAa6UGuBOqQHOQHLUgFEDnAbcBZ4UGwDOkiCnkIhdgNgNxAYAiYlD+8sEuo8AAAAASUVORK5CYII=) repeat top left;
}

.debug-grid-8-solid {
  background:white url(data:image/gif;base64,R0lGODdhCAAIAPEAAADw/wDx/////wAAACwAAAAACAAIAAACDZQvgaeb/lxbAIKA8y0AOw==) repeat top left;
}

.debug-grid-16-solid {
  background:white url(data:image/gif;base64,R0lGODdhEAAQAPEAAADw/wDx/xXy/////ywAAAAAEAAQAAACIZyPKckYDQFsb6ZqD85jZ2+BkwiRFKehhqQCQgDHcgwEBQA7) repeat top left;
}