3 #Components Components
src: components/__styleguide_section.scss
3.1 #Components - Drupal fields Drupal Fields
src: components/fields/__styleguide_section.scss
3.1.1 #Components - Drupal fields - field--name-node-link Filed: field--name-node-link
src: components/fields/_field--name-node-link.scss
Example
<div class="field field--name-node-link field--type-ds field--label-hidden field__item">
<a href="/photography" hreflang="en">Read more</a>
</div>3.3 #Components - Header Header
src: components/header/__styleguide_section.scss
3.3.1 #Components - Header - Site logo Site Logo
.site-logo Inline SVG logo.
src: components/_logo.scss
Example
<div class="site-logo" style="width: 10em; height: 10em;"></div>3.3.1 #Components - Header - Site logo Site Logo
.site-logo Inline SVG logo.
src: components/_logo.scss
Example
<div class="site-logo" style="width: 10em; height: 10em;"></div><!-- BEGIN OUTPUT from 'themes/git_repos/donkeymedia_theme/templates/block/block--system-branding-block.html.twig' -->
<div id="block-donkeymedia-theme-branding" class="contextual-region block block-system block-system-branding-block">
<div data-contextual-id="block:block=donkeymedia_theme_branding:langcode=en" class="contextual" role="form">
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'links__contextual' -->
<!-- FILE NAME SUGGESTIONS:
* links--contextual.html.twig
x links.html.twig
-->
<!-- BEGIN OUTPUT from 'core/themes/classy/templates/navigation/links.html.twig' -->
<ul class="contextual-links" hidden=""><li class="block-configure"><a href="/admin/structure/block/manage/donkeymedia_theme_branding?destination=node/22">Configure block</a></li><li class="config-translationcontextual-linksentityblockconfig-translation-overview"><a href="/admin/structure/block/manage/donkeymedia_theme_branding/translate?destination=node/22">Translate block</a></li></ul>
<!-- END OUTPUT from 'core/themes/classy/templates/navigation/links.html.twig' -->
</div>
<a href="/" title="Home" rel="home">
<h1>
<div class="site-logo"></div>
<span class="site-name">Donkeymedia</span>
<span class="site-slogan">Photo ∙ Web ∙ Engineering</span>
</h1>
</a>
</div>3.4 #Components - Libraries Libraries
src: components/libraries/__styleguide_section.scss
Styles defined by Javascript libraries.
3.4.1 #Components - Libraries - Glide (Slider) Glide - Slider
src: components/libraries/_glide.scss.scss
Example
<div class="glide">
<div class="glide__arrows">
<div class="glide__arrow prev icon-prev" data-glide-dir="<"></div>
<div class="glide__arrow next icon-next" data-glide-dir=">"></div>
</div>
<div class="glide__wrapper">
<ul class="glide__track">
<li class="glide__slide"><img style="max-width: 826px; max-height: 471px;" alt="slideshow image" src="/themes/git_repos/donkeymedia_theme/testimage.svg"></li>
<li class="glide__slide"><img style="max-width: 1218px; max-height: 638px;" alt="slideshow image" src="/themes/git_repos/donkeymedia_theme/testimage.svg"></li>
<li class="glide__slide"><img style="max-width: 1193px; max-height: 693px;" alt="slideshow image" src="/themes/git_repos/donkeymedia_theme/testimage.svg"></li>
</ul>
</div>
<div class="glide__bullets"> </div>
</div>3.4.2 #Components - Libraries - Hilightjs Hilightjs Github Style
src: components/libraries/_hilightjs.scss
Example
function foo($one = NULL, $two = 0, $three = "String") {
if (TRUE) {
$x = array(
0 => "zero",
123 => "one two three",
25 => "two five"
);
}
else {
return 0;
}
$t = $one[0];
$u = $one['str'];
$v = $one[$x[1]];
return 1;
}
<code class="php">function foo($one = NULL, $two = 0, $three = "String") {
if (TRUE) {
$x = array(
0 => "zero",
123 => "one two three",
25 => "two five"
);
}
else {
return 0;
}
$t = $one[0];
$u = $one['str'];
$v = $one[$x[1]];
return 1;
}</code>3.5 #Components - Viewmode Viewmodes
src: components/viewmode/__styleguide_section.scss
