Debug

Tachyons comes with two convenient modules to help debug layout issues you might be having.

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.

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.

This debug module is commented out by default in src/tachyons.css. To use it, uncomment out that line and then run node run build from the root of the project.

Examples

Debug Children

Note how in the below example there is white space rendered in between the elements because they are set to inline-block

This element is set to inline-block and width: 25%
This element is set to inline-block and width: 25%
This element is set to inline-block and width: 25%
This element is set to inline-block and width: 25%

Note how in the below example the elements are flush with no white-space rendered between the elements.

This is a floated element set to width: 25%
This is a floated element set to width: 25%
This is a floated element set to width: 25%
This is a floated element set to width: 25%
This is a form legend

Debug All

The largest difference here between the two methods is that every element on the page is outlined in a different color.

Note how in the below example there is white space rendered in between the elements because they are set to inline-block

This element is set to inline-block and width: 25%
This element is set to inline-block and width: 25%
This element is set to inline-block and width: 25%
This element is set to inline-block and width: 25%

Note how in the below example the elements are flush with no white-space rendered between the elements.

This is a floated element set to width: 25%
This is a floated element set to width: 25%
This is a floated element set to width: 25%
This is a floated element set to width: 25%
This is a form legend

Previous

White Space

Next

Box Sizing

Reference

MDN - Outline

tachyons-debug

v1.1.11 902 B
Declarations
98
Selectors
99
Max. Specificity Score
1
Size of Avg. Rule
1
src/_debug-children.css

/*

  DEBUG CHILDREN

*/

.debug * { outline: 1px solid gold; }

src/_debug.css
          
            /* 
 
  DEBUG (PESTICIDE)
  Docs: http://tachyons.io/docs/debug/

  This is a partial you have to manually include in your
  build file. It places a different colored outline on 
  each element which can help you debug layout issues.
  There is also a handy chrome extension that can 
  be found at http://pesticide.io

*/

body {        outline: 1px solid  #2980B9!important; }
article {     outline: 1px solid  #3498DB!important; }
nav {         outline: 1px solid  #0088C3!important; }
aside {       outline: 1px solid  #33A0CE!important; }
section {     outline: 1px solid  #66B8DA!important; }
header {      outline: 1px solid  #99CFE7!important; }
footer {      outline: 1px solid  #CCE7F3!important; }
h1 {          outline: 1px solid  #162544!important; }
h2 {          outline: 1px solid  #314E6E!important; }
h3 {          outline: 1px solid  #3E5E85!important; }
h4 {          outline: 1px solid  #449BAF!important; }
h5 {          outline: 1px solid  #C7D1CB!important; }
h6 {          outline: 1px solid  #4371D0!important; }
main {        outline: 1px solid  #2F4F90!important; }
address {     outline: 1px solid  #1A2C51!important; }
div {         outline: 1px solid  #036CDB!important; }


p {           outline: 1px solid  #AC050B!important; }
hr {          outline: 1px solid  #FF063F!important; }
pre {         outline: 1px solid  #850440!important; }
blockquote {  outline: 1px solid  #F1B8E7!important; }
ol {          outline: 1px solid  #FF050C!important; }
ul {          outline: 1px solid  #D90416!important; }
li {          outline: 1px solid  #D90416!important; }
dl {          outline: 1px solid  #FD3427!important; }
dt {          outline: 1px solid  #FF0043!important; }
dd {          outline: 1px solid  #E80174!important; }
figure {      outline: 1px solid  #FF00BB!important; }
figcaption {  outline: 1px solid  #BF0032!important; }



table {       outline: 1px solid  #00CC99!important; }
caption {     outline: 1px solid  #37FFC4!important; }
thead {       outline: 1px solid  #98DACA!important; }
tbody {       outline: 1px solid  #64A7A0!important; }
tfoot {       outline: 1px solid  #22746B!important; }
tr {          outline: 1px solid  #86C0B2!important; }
th {          outline: 1px solid  #A1E7D6!important; }
td {          outline: 1px solid  #3F5A54!important; }
col {         outline: 1px solid  #6C9A8F!important; }
colgroup {    outline: 1px solid  #6C9A9D!important; }


button {      outline: 1px solid  #DA8301!important; }
datalist {    outline: 1px solid  #C06000!important; }
fieldset {    outline: 1px solid  #D95100!important; }
form {        outline: 1px solid  #D23600!important; }
input {       outline: 1px solid  #FCA600!important; }
keygen {      outline: 1px solid  #B31E00!important; }
label {       outline: 1px solid  #EE8900!important; }
legend {      outline: 1px solid  #DE6D00!important; }
meter {       outline: 1px solid  #E8630C!important; }
optgroup {    outline: 1px solid  #B33600!important; }
option {      outline: 1px solid  #FF8A00!important; }
output {      outline: 1px solid  #FF9619!important; }
progress {    outline: 1px solid  #E57C00!important; }
select {      outline: 1px solid  #E26E0F!important; }
textarea {    outline: 1px solid  #CC5400!important; }



details {     outline: 1px solid  #33848F!important; }
summary {     outline: 1px solid  #60A1A6!important; }
command {     outline: 1px solid  #438DA1!important; }
menu {        outline: 1px solid  #449DA6!important; }



del {         outline: 1px solid  #BF0000!important; }
ins {         outline: 1px solid  #400000!important; }



img     {     outline: 1px solid #22746B!important; }
iframe  {     outline: 1px solid #64A7A0!important; }
embed   {     outline: 1px solid #98DACA!important; }
object  {     outline: 1px solid #00CC99!important; }
param   {     outline: 1px solid #37FFC4!important; }
video   {     outline: 1px solid #6EE866!important; }
audio   {     outline: 1px solid #027353!important; }
source  {     outline: 1px solid #012426!important; }
canvas  {     outline: 1px solid #A2F570!important; }
track   {     outline: 1px solid #59A600!important; }
map     {     outline: 1px solid #7BE500!important; }
area    {     outline: 1px solid #305900!important; }



a {           outline: 1px solid #FF62AB!important; }
em {          outline: 1px solid #800B41!important; }
strong {      outline: 1px solid #FF1583!important; }
i {           outline: 1px solid #803156!important; }
b {           outline: 1px solid #CC1169!important; }
u {           outline: 1px solid #FF0430!important; }
s {           outline: 1px solid #F805E3!important; }
small {       outline: 1px solid #D107B2!important; }
abbr {        outline: 1px solid #4A0263!important; }
q {           outline: 1px solid #240018!important; }
cite {        outline: 1px solid #64003C!important; }
dfn {         outline: 1px solid #B4005A!important; }
sub {         outline: 1px solid #DBA0C8!important; }
sup {         outline: 1px solid #CC0256!important; }
time {        outline: 1px solid #D6606D!important; }
code {        outline: 1px solid #E04251!important; }
kbd {         outline: 1px solid #5E001F!important; }
samp {        outline: 1px solid #9C0033!important; }
var {         outline: 1px solid #D90047!important; }
mark {        outline: 1px solid #FF0053!important; }
bdi {         outline: 1px solid #BF3668!important; }
bdo {         outline: 1px solid #6F1400!important; }
ruby {        outline: 1px solid #FF7B93!important; }
rt {          outline: 1px solid #FF2F54!important; }
rp {          outline: 1px solid #803E49!important; }
span {        outline: 1px solid #CC2643!important; }
br {          outline: 1px solid #DB687D!important; }
wbr {         outline: 1px solid #DB175B!important; }