Name: cpnb-styleguide
Owner: GoalGorilla
Description: cpnb-styleguide
Created: 2015-12-11 12:40:57.0
Updated: 2016-02-11 10:30:22.0
Pushed: 2016-02-23 14:17:21.0
Homepage: null
Size: 77810
Language: HTML
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
This theme is a subtheme of Omega(4). Theme settings are stored in the cpnb.info file. To exchange settings with the site use drush:
All CSS and Javascript that is used is generated with Gulp JS. This is also all you need. We do not use Ruby Gems, such as Compass or grids systems.
In this folder you will find a package.json file. In this file you find all the gulp plugins you need.
First make sure you have gulp installed on your machine:
m install --global gulp
To install the gulp plugins and gulp itself in the project you can simple run the following commands from the theme (this) folder.
m install
The folder node-modules in your theme contains .info files which conflict with the reset script we use.
To avoid problems, you can remove the .info files in node-modules with this command in CLI:
node-modules/
nd . -type f -name '*.info' -exec rm -rf {} \;
To start compiling you scss files into css, you can use the following gulp task:
lp
What this task does can be found in the gulpfile (default). It will automically open the styleguide in your browser, including livereload. You do not have to use this feature each time you work on the theme, it is just default behavior of the gulp tasks.
As you can see in the Gulpfile javascript is being concatenated from the contrib and custom folder. The custom folder is where you store the â??themeâ?? javascript. For each function you can create a new file. This way developers can find it more easily. Gulp compiles this into one theme.js file.
The contrib folder contains manipulated drupal files, which are only used for the styleguide (which has no Drupal logic of course). Whenever you need some JS function from Drupal in the styleguide, you put this in the contrib folder and change the matching taks in gulpfile. If you do not need to manipulate the function, but just call it, you can get the file directly from the sites/all/modules folder and do not store a copy in the contrib folder.
The styleguide is generated from the theme. There is no extra task required. This is to ensure there is no difference between the site and the styleguide.
The styleguide uses the Assemble script to generate the styleguide templates.
You will see the following folder in the styleguide:
includes/atoms/radio-input.hbs
class="form-type-radio">
nput class="form-radio" id="radio{{version}}" name="radio" type="radio" value="radio-value{{version}}" {{state}}>
abel class="option" for="radio{{version}}">radio label {{version}}</label>
v>
templates/pages/formelements.hbs
radio-input}}
class="language-html"><code>{{> radio-input}}</code></pre>
Control scripts, styles or anything desired from appearing in your templates. A few examples are:
ny 'index single case' this.basename}}
ny}}
s 'index' this.basename}}
s}}
f 'single' this.basename}}
f}}
For further reading on conditionals see the Handlebars documentation.
Here's an example from your assemble template to import a partial called headings that's also called within the associated code block. The class name on the pre tag tells Prism this is a block we would like Prism to style using html grammar.
headings}}
class="language-html"><code>{{> headings}}</code></pre>
Here's an example using a JavaScript snippet.
button}}
class="language-javascript"><code></code></pre>
The partial with the required JavaScript sets up the pre block to accept the JavaScript it will be injected with. The required JavaScript is included in your layout of choice and it's script tag is given a class of atomic-js.
ipt class="atomic-js">var button = document.querySelector('button');
on.addEventListener('click', function() {
ole.log('hello world');
script>