Chuleta de selectores de CSS para Themes en Drupal 8

¡Hola!

 

Esta ves os comparto una chuleta con todos los selectores que podemos usar para desarrollar themes en Drupal 8.

 

Formato:

 

 .foo { }
.foo-bar { }

 

filename.html.twig / filename.css

 

Twig - selectores CSS disponibles en el tema Clásico:

DISEÑO

Cuerpo

 .user-logged-in { }
.path-frontpage { }
.path-[root_path] { }
.node--type-[node_type] { }
.db-offline { }
.visually-hidden { }
.focusable { }
.skip-link { }

 

file: html.html.twig

Página

 .layout-container { }
.layout-content { }
.layout-sidebar-first { }
.layout-sidebar-second { }

 

file: page.html.twig

Región

 .region { }
.region-[region] { }

 

file: region.html.twig

Exportar el libro

 .section-[i] { }

 

file: layout/book-export-html.html.twig

Página de mantenimiento

 .layout-container { }
.name-and-slogan { }
.site-name { }
.site-slogan { }
.layout-sidebar-first { }
.layout-sidebar-second { }

 

file: layout/maintenance-page.html.twig

 

Bloques

Basic

 .block { }
.block-[configuration.provider] { }
.block-[plugin_id] { }

 

file: block/block.html.twig

Formulario de búsqueda

 .block { }
.block-search { }
.container-inline{ }

 

file: block/block--search-form-block.html.twig

Menú

 .block { }
.block-menu { }
.navigation { }
.menu--[derivative_plugin_id] { }
.visually-hidden { }

 

file: block/block--system-menu-block.html.twig

Tabs

 .tabs { }

 

file: block/block--local-tasks-block.html.twig

Acciones locales

 .action-links { }

 

file: block/block--local-actions-block.html.twig

Branding

 .site-logo { }
.site-name { }
.site-slogan { }

 

file: block/block--system-branding-block.html.twig

 

CONTENIDO

 

Páginas

Total de votos: 42

Entradas relacionadas

Comentarios (0)

Deja un comentario