Mathieu Spillebeen

Member for
Member for
6 years 1 monthBio
Founder of Compony.io & visionair at Frontend United,
My impact on the community
Times a component of mine got downloaded
Appreciation received
My contributions to the community
Components
Component collections
Pull requests
Gitlab issues
Appreciation given
My components
Page

Extra template suggestions: one for entity type and one for the content type. <!-- THEME DEBUG --> <!-- THEME HOOK
Views view

Some extra's for views-view components. Extra template suggestions Added 2 more specific template suggestions. One for the name of the
Media

Some extra's for media components. Better classes The classes on taxonomy-terms has been changed to: {% set classes = [
Block

Some extra's for block components. Better classes The classes on block has been changed to: {% set classes = [
Aggregator item

Some extra's for aggregator-item components. Extra template suggestions Added a more specific template suggestion depending on the name of the
Fieldset with some basic CSS

Some extra's for fieldset components. Better classes The classes on taxonomy-terms has been changed to: {% set classes = [
Numbered fieldset

A variation of fieldset that allows for numbered fieldsets. This component relies on the fieldset component. Step-highlighting There is Javascript
File link

Default theming and some extra's for Drupal's file links. Making more variables available in Twig In this component 4 extra
Form with basic CSS

This is the same as the Form component but with very basic CSS added. Better classes The classes on a
Form item

Default theming for form-item components and some extra functionality. Better classes The classes on form-element-label are now: {% set wrapper_classes
Checkbox

Some default theming for form-item--checkboxes. This is a javascript-free implementation that respects keyboard accessibility and has a disabled state. We
Date input field

The essentials of displaying form-item date-inputs. For cross-browser-consistency this component changes the type of the input field from <input type="date">
Date input field with datepicker

This is an alternate version of form-item--date that uses the jQuery UI Datepicker. A variation of this component that also
Select with Select2

Theming of the form-item--select using the Select2 library. The component is fully accessible, and will give you a filter search
Date input field with datepicker and select2

This is an alternate version of form-item--date. that uses both jQuery UI Datepicker and the Select2 library.
Radiobuttons

Some default theming for form-item--radiobuttons. This is a javascript-free implementation that respects keyboard accessibility and has a disabled state.
Textarea

The HTML for textarea components. Theming is found in the general theming component because abstracting textarea-specific CSS is more confusing
Autosizing textarea

A variation of the textarea component that resizes as you type. This is using the Autosize libarary. Using this component
Node

Some extra's for node components. Better classes The classes on node has been changed to: {% set classes = [
Menu local tasks

Some basic styling for local menu inks with a toggle for smaller screens.
Status messages

A flat approach to theming Drupal's status messages by the use of emoji SVG's.
Taxonomy term

Some extra's for taxonomy-term components. Extra template suggestions Added 2 more specific template suggestions. One for view mode and one
Field

Some extra's for field components. Simplified HTML Stripped away some unneeded div's to keep semantics as clean as possible. Extra
Field with Full HTML wysiwyg

Attaches the Wysiwyg content library to fields that use the full_html text formatter.
Field with basic HTML wysiwyg

Attaches the Wysiwyg content library to fields that use the basic_html text formatter.
Wysiwyg content

This is a CSS-only component to theme the output of wysiwyg. This component can be loaded in conditionally from other
Region

Some extra's for region components. Better classes The classes on paragraph has been changed to: {% set classes = [
Unformatted views view

Removes divs without classes, when using unformatted list in your view settings (screenshot 1) in combination with no views row
Improved ajax progress indicator

This component overrides Drupal's progress indicator and replaces it completely with a js-loading class. This means we can more easily
Button with ajax-loading state

This component specifically themes ajax-loading states of Drupal form buttons. Better classes Every button that can trigger ajax-behaviour will receive
Infinite scroll pager

Make the pager of the views infinite scroll module have an ajax-loading-state.
Paragraph

Some extra's for paragraph components. Better classes The classes on paragraph has been changed to: {% set classes = [
Webform

Webforms in Drupal are user-generated forms mostly, To support consistent form theming, we are taking the same approach as the
Global theming

The default _global component as recommended by Compony. Feel free to clone this component and adapt for your own use
Brick

A brick is a horizontal section of a website, many website designs are using horizontal stacked background to separate content
Data table

Flexible data in a table design, without using table semantics. Extra template suggestions Added a more specific template suggestion based
Fake slow submitting form

When the form is not submitted using Ajax but you want to make it seem like it is using ajax
Text dropdown

Defines a custom dropdown component that can be used to hide content on page load but keep it available under
Lato font

The downloaded Lato fonts with matching @font-face declarations in CSS. Each font-family has a library-definition, so you can control which
Montserrat font

The downloaded Montserrat fonts with matching @font-face declarations in CSS. Each font-family has a library-definition, so you can control which
Open Sans font

The downloaded Open Sans fonts with matching @font-face declarations in CSS. Each font-family has a library-definition, so you can control
Oswald font

The downloaded Oswald fonts with matching @font-face declarations in CSS. Each font-family has a library-definition, so you can control which
PT Sans font

The downloaded PT Sans fonts with matching @font-face declarations in CSS. Each font-family has a library-definition, so you can control
Raleway font

The downloaded Raleway fonts with matching @font-face declarations in CSS. Each font-family has a library-definition, so you can control which
Roboto Condensed font

The downloaded Roboto Condensed fonts with matching @font-face declarations in CSS. Each font-family has a library-definition, so you can control
Roboto font

The downloaded Roboto fonts with matching @font-face declarations in CSS. Each font-family has a library-definition, so you can control which
Slabo 27px font

The downloaded Slabo 27px font with matching @font-face declaration in CSS. There is only one font-family of this font.
Source Sans Pro font

The downloaded Source Sans Pro fonts with matching @font-face declarations in CSS. Each font-family has a library-definition, so you can
Form

Some extra's for form components. Better classes The classes on a form has been changed to: {% set classes =
Fieldset

The same component as Fieldset with some basic CSS, but without the CSS.
MicroModal

This component implements Micromodal.js, a lightweight, configurable and a11y-enabled modal library written in pure JavaScript.
Breadcrummy

This component is an alternative to showing breadcrumbs on your page in a smooth mobile way without wrapping to multiple
Bootstrap 4 (beta)

Currently in beta, due to it not being heavily tested. This is a component that splits up Bootstrap 4 CSS
VueJS

VueJS now comes as a Compony-component is now a component that can be used to progressively enhance any component that
Emojis

This is a component that holds 1.794 open source emojis as SVG's and as templates. For example the laughing.svg can
eck entity

Adds the basic Twig blocks, and adds a few classes based upon entity_type, bundle and view mode.
System menu block

Adds the default twig blocks + some better formatted classes that don't conflict with other menu classes.
Button

A button component that is fully customisable, that allows you to render Drupal buttons with custom type attributes.
My collections
Popular Google fonts

10 components
The 10 most popular fonts from Google Fonts.
All of these font's have been downloaded and are not fetched using
Bare essentials

15 components
This is a collection of components that groups the most common for a Drupal 8 site
Form items

10 components
This is a collection of interesting form-implementations.
If you would like the form items to be a bit better themed
Gitlab comments