Modo dev

El modo dev es una característica de EDgrid que nos permite saber el breakpoint actual y los componentes del layout (ed-grid, ed-container y ed-item).

Al activarlo el navegador muestra el layout de la siguiente manera:

  1. Los ed-container y ed-grid tienen un borde rojo y en la parte superior una franja roja que imprime sus clases html.
  2. Los ed-item e hijos directos de ed-grid se colorean de azul y a su vez imprimen sus clases html en una franja azul.

Modo dev en Flexbox

1
2
3

Modo dev en Grid

1
2
3

Activar modo dev con clases HTML

Basta con añadirle la clase dev al elemento body

<body class="dev"></body>

Activar el modo dev en Sass

Redefinir la variable $dev a true antes de importar ed-grid

$dev: true;
@import 'path/ed-grid/ed-grid';

Modo dev hover

Si sólo quieres inspeccionar un elemento a la vez y no toda la página, puedes usar el modo desarrollo con hover, donde sólo funcionará con ed-grid, ed-container y ed-item que tengan el estado de hover.

Modo dev con hover

1
2
3

Activar modo dev hover con clases HTML

Basta con añadirle la clase dev-hover al elemento body

<body class="dev-hover"></body>

Activar modo dev hover en Sass

Redefinir la variable $dev-hover a true antes de importar ed-grid (no es necesario redifinir también la variable $dev).

$dev-hover: true;
@import 'path/ed-grid/ed-grid';