Drupal Themes News

Components sub-theme for uikitty

Fri, 09/23/2016 - 21:06

Components is a simple sub theme using the uikitty base theme. The uikitty documentation site has been set up using the Components sub theme and is meant to serve as an example for other designers and developers to build their own sub theme.

Inside the theme's template folder is a series of page templates specifically designed to work for turning on each component in the component library. These will not automatically work on your installation as they are page specific to the documentation site. These templates should be deleted if this theme is used as a template for building your own uikitty sub-theme.


Fri, 09/23/2016 - 00:49

A Drupal version of the Backdrop core theme, Basis.


Thu, 09/22/2016 - 20:17

UIkitty is a builders base theme for Drupal 8.x using Uikit js/css framework. The goal of this theme is to provide a modular architecture and suite of organized building blocks using all the great features of the UIKIT framework and placing them in an easily re-usable format inside the drupal architecture. UIkitty really purrs when used as a base theme because it allows designers and developers to focus on developing clean code and build rapid prototypes using a simple build formula.

Built in CORE Features

Grid, Dropdown menu, Modal, Off-canvas, Switcher, Toggle, Scrollspy, Smoothscroll, Panel, Block, Article, Comment, Utility, Flex, Cover, Nav, Navbar, Subnav, Breadcrumb, Pagination, Tab, Thumbnav, List, Description list, Table, Form, Button, Icon, Close, Badge, Alert, Thumbnail, Overlay, Text, Column, Animation, Contrast.

Available components easily activated through page templates

Dynamic grid, Parallax Grid, Lightbox, Autocomplete, Datepicker, HTML Editor, Slider, Slideset, Slideshow, Parallax, Accordion, Notify, Search, Nestable, Sortable, Sticky, Timepicker, Tooltip, Upload, Dotnav, Slidenav, Dynamic pagination, Form advanced, Form file, Form password, Form select, Placeholder and Progress.

This site has instructions for installation, setup and general topics about uikitty.
UIkitty is designed to allow an ultimate degree of flexibility for drupal developers and theme designers. The system is intended to be used in a modular format so that you only load the necessary javascript and css for the current page request. It is also loaded with easy to use features to provide a rich framework for developers to tie into for UI functions and a codebase of reuseable snippets and color schemes for your web applications.

To set up your site to use UIkitty, simply download the newest release and install on your drupal site.

Use of a sub-theme is recommended so that any updates to uikitty do not affect your site. To get things started, I designed the documentation site using the "uikitty" method as an example and it is provided here called "Components".

All UIkit core functions are automatically available and can be activated through the use of UIkit markup injected into the pages through custom templates and preprocess code. For example adding a class of "uk-button" to any link will automatically turn that link into a button. Using a modifier class of "uk-button-primary" will turn the button into the primary button color. UIKIT CSS can be customized here. It is important to have an understanding of UIkit before attempting to use this theme, if you are not familiar with UIkit and it's awesome collection of useful functions, you can find more info here.

Using components is where the magic under the hood starts getting really powerful.

All components from UIkit are built in as drupal asset libraries and easily accessible by adding the following code to your twig page templates:

{{ attach_library('uikitty/<component-name>') }}

The code for adding a slider would be:

{{ attach_library('uikitty/slider') }}

That's it! All javascript and CSS will automatically be loaded for that page. Once you've added the library to the template, that libraries functions will be available for you to access via classes and attributes as defined in UIkit documentation.

Check out the COMPONENTS sub-theme for uikitty for reference or building your own sub-theme. Adding attribute markup to page templates

After adding a uikit library asset to your page, you will want to update your templates and preprocess code to inject attributes as defined by the UIkit structural guidelines and the desired functionality. Attributes can be added easily using Twig template syntax. Instructions for adding attributes to page templates.

IMPORTANT NOTE! Uikitty is not compatible at this time with contextual links or quickedit and so it recommended to uninstall contextual links and quickedit before installing uikit. It is just a small display bug where the popups for contextual are all visible instead of hidden. If anyone figures out a fix for this before me, I will gladly update the master and credit the contribution.


Tue, 09/13/2016 - 18:13
Getting started with Cog

The Cog documentation you seek is now located in the following directory: STARTERKIT/README.md. This documentation will cover setup steps with Cog and overall D8 theme documentation with code examples.

Further Documentation

Cog also ships with an extensive list of documentation and code samples that were intentionally left of of the theme. We have collected all the examples in an easy reference listed here.

Support and contribution

All contributions to Cog will be reviewed for compliance with Drupal Coding Standards and best practices as defined by the project maintainer.

Cog work is currently being tracked in the cog GitHub issue queue and organized via a Waffle.io Kanban Board.

When making a pull request related to an issue, use the keywords 'Connects to #123' in your commit message to automatically relate the PR to the issue on the Kanban board.

FortyTwo - Administration theme

Thu, 09/01/2016 - 12:25

FortyTwo Administration theme is a well balanced Drupal 8 admin theme, designed with the content editor in mind, making Drupal an attractive option for users and editors.

Gratuitous use of whitespace, clean icons and consistent design make the FortyTwo Administration theme a perfect choice for novel and experienced users.

Combined with the companion module Fortytwo - Administration toolbar it greatly enhances the editing experience.

This project is in early stages of development and (unfortunately) not yet ready for use in a production environment.

Uikit API

Sun, 08/28/2016 - 01:10

this theme is written for Drupal 7.x specificallty, Drupal 8.x development has been merged into the UIkitty theme.

Musica - a modern responsive music player

Thu, 08/25/2016 - 22:24

Turn your website into an advanced music player! Musica is a modern and flexible theme built using the UIKIT framework. This allows for an amazing level of control and versatility with page display options while creating a minimum of bloat from unnecessary js/css references(uikit).

Musica is intended to work out of the box with the Pushtape Music Distribution with features that enhance Pushtape, "Pushing" it to new limits. Musica is built using the UIKIT API theme. If you are looking for "Musica" features in a non-music focused site, then check out UIKIT API.

Musica is a beautiful music player with features that it allow to build playlists out of just about anything, anywhere. It doesnt matter if its in the cloud or on your computer or on your server, Musica can probably play an mp3 off your grandma's toast, just load the toast into your cd/dvd burner.

Check out the screenshot to see what we have planned. Many of the features have already been completed and we are well on our way to making this the best music player theme for drupal. We are building in many new great features each week. We can use help with documentation, coding, testing and getting the first release out.

Musica is developed by Tunerockit and the Conscious Music Project. We are currently looking for developers and co-maintainers of the project.

We just published the first dev release, please download it and help us out by posting any issues to the issue que.

Bootstrap Forms

Fri, 08/19/2016 - 10:39

Bootstrap Forms is a parent theme that is based upon the core 'stable' theme.

Bootstrap Library Installation

You will need to install the bootstrap-sass library into the /libraries folder of your drupal installation. You can download the library here.

Theme Installation

If you are using your own subtheme then be sure to set bootstrap_forms as the base theme e.g.

core: 8.x base theme: bootstrap_forms

Alternatively I have provided an example subtheme that has the scss files setup to import bootstrap's scss files in the correct order allowing its variables to be overridden easily.

1. Copy over the starterkit from the`bootstrap_forms/starterkit/example` directory into your site's `themes` directory.
2. Rename the folder to a unique machine readable name. e.g. mysubtheme
3. Rename `./mysubtheme/example.starterkit.yml` to match your new theme name and change starterkit.yml to info.yml


All form elements can be controled via the attributes below, alternatively you can use the bootstrap_forms_ui module to control individual entities form element layouts.


Use the list below to jump to the required property definition.

#form_type, #title_grid, #element_grid, #title_tooltip, #suffix_tooltip, #prefix_tooltip, #element_columns, #form_type_wrapper, #form_group_wrapper, #form_field_wrapper, #element_inline


Used by: All elements

Description: Specify the type of form to be used for the element see http://getbootstrap.com/css/#forms

Values: 'basic', 'horizontal', 'inline'

#title_grid / #element_grid

Used by: All elements

Description: Allows the developer full control to set the grid classes for a field's LABEL and a field's INPUT ELEMENT respectively as per http://getbootstrap.com/css/#grid

Usage Example:

$form['example_textfield'] = array( '#title' => t('Example'), '#form_type' => 'horizontal', '#title_grid' => array( 'columns' => array( 'md' => 3 ), ); '#element_grid' => array( 'columns' => array( 'md' => 9 ), ); );

#title_grid['columns'] / #element_grid['columns']

Description: Specify the column class to apply to the title/element for each of bootstrap's breakpoints.

Values: Array

Possible keys: 'xs', 'sm', 'md', 'lg'

#title_grid['offset'] / #element_grid['offset']

Description: Specify the amount of columns to indent/offset the element for each of bootstrap's breakpoints.

Values: Array

Possible keys: 'xs', 'sm', 'md', 'lg'

#title_grid['push'] / #element_grid['push']

Description: Specify the ordering of the element for each of bootstrap's breakpoints.

Values: Array

Possible keys: 'xs', 'sm', 'md', 'lg'

#title_grid['pull'] / #element_grid['pull']

Description: Specify the ordering of the element for each of bootstrap's breakpoints.

Values: Array

Possible keys: 'xs', 'sm', 'md', 'lg'


Used by: All elements

Description: By default form elements have a wrapper element with a class denoting the type of form being rendered i.e. 'form-inline', 'form-horizontal' or 'form-basic'. This property allows this wrapper to be excluded from the markup completely.



Used by: All elements

Description: By default form elements have a wrapper element with a class of .form-group this property allows you to exclude it if required.



Used by: All elements

Description: By default form elements have a field wrapper that contains all of drupal's default filed classes, this property allows that wrapper to be excluded.



Used by: All elements

Description: Prepend tooltip to the input element

Usage Example:

$form['contact'] = array( '#title' => t('Contact name'), '#prefix_tooltip' => t('This is a prefix tooltip'), );


Used by: Textfield

Description: Append a tooltip to the input element

Usage Example:

$form['contact'] = array( '#title' => t('Contact name'), '#suffix_tooltip' => t('This is a suffix tooltip'), );


Used by: checkboxes, radios

Description: Use to arrange checkboxes in multiple columns in horizontal form types.

Usage Example:

$form['checkboxes'] = array( '#title' => t('Checkboxes'), '#form_type' => 'horizontal', '#title_grid' => array( 'columns' => array( 'md' => '4' ), ), '#element_grid' => array( 'columns' => array( 'md' => '8' ), ), '#element_columns' => 3, );