MelangeCSS Reference

Current Version: 1.0.0-RC5

Debuging

Often, it's easier to have boxes drawn around elements to see their size instead of going into the dev tools. The debug classes using the outline property to show you where child elements are, but without changing any of the layout

Properties

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

Some Title

  • The spice must flow.

  • History is written on the sands of Arrakis.

  • It is by will alone, I set my mind in motion.

debug-red 
.debug-red * {
  outline: 1px solid red;
}

Some Title

  • The spice must flow.

  • History is written on the sands of Arrakis.

  • It is by will alone, I set my mind in motion.

debug-green 
.debug-green * {
  outline: 1px solid green;
}

Some Title

  • The spice must flow.

  • History is written on the sands of Arrakis.

  • It is by will alone, I set my mind in motion.

debug-blue 
.debug-blue * {
  outline: 1px solid blue;
}

Some Title

  • The spice must flow.

  • History is written on the sands of Arrakis.

  • It is by will alone, I set my mind in motion.

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

Some Title

  • The spice must flow.

  • History is written on the sands of Arrakis.

  • It is by will alone, I set my mind in motion.

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

Some Title

  • The spice must flow.

  • History is written on the sands of Arrakis.

  • It is by will alone, I set my mind in motion.