Code Blender

An atomic Middleman partials library

Tag cloud

  2. Molecule
  3. Tag cloud

Default

Tags

accessibility accounting finances alerting analytics angular apache ubuntu api apple backbone javascript blog ios developer bourbon bower bundler cache colour composer continuous-integration desktop e-commerce email google gmail enom file-system font front-end home gems geo-location git gollum hybrid mobile grunt haml homebrew infographic java job education skills kodi laravel social profile localization internationalization i18n logging newsletter marketing middleman mysql network nginx node parallax paypal phantomjs phonegap php project-brief project-management rbenv ripple search seo facebook sublime text editor sugarcrm crm svg testing tdd thor ruby trello tv user-experience virtualisation 
= codeBlender "tag-cloud", "molecule", { name: "docs" } 

<section class='tagCloud'>
<h4 class='heading tagCloud__heading'>
Tags
</h4>


<div class='tagCloud__tags'>
<a href="/docs/tag/accessibility.html" class="tagCloud__tag label label-info" style="font-size: 140%">accessibility
</a><a href="/docs/tag/accounting.html" class="tagCloud__tag label label-info" style="font-size: 80%">accounting
</a><a href="/docs/tag/finances.html" class="tagCloud__tag label label-info" style="font-size: 80%">finances
</a><a href="/docs/tag/alerting.html" class="tagCloud__tag label label-info" style="font-size: 80%">alerting
</a><a href="/docs/tag/analytics.html" class="tagCloud__tag label label-info" style="font-size: 80%">analytics
</a><a href="/docs/tag/angular.html" class="tagCloud__tag label label-info" style="font-size: 80%">angular
</a><a href="/docs/tag/apache.html" class="tagCloud__tag label label-info" style="font-size: 80%">apache
</a><a href="/docs/tag/ubuntu.html" class="tagCloud__tag label label-info" style="font-size: 80%">ubuntu
</a><a href="/docs/tag/api.html" class="tagCloud__tag label label-info" style="font-size: 80%">api
</a><a href="/docs/tag/apple.html" class="tagCloud__tag label label-info" style="font-size: 200%">apple
</a><a href="/docs/tag/backbone.html" class="tagCloud__tag label label-info" style="font-size: 80%">backbone
</a><a href="/docs/tag/javascript.html" class="tagCloud__tag label label-info" style="font-size: 80%">javascript
</a><a href="/docs/tag/blog.html" class="tagCloud__tag label label-info" style="font-size: 140%">blog
</a><a href="/docs/tag/ios.html" class="tagCloud__tag label label-info" style="font-size: 140%">ios
</a><a href="/docs/tag/developer.html" class="tagCloud__tag label label-info" style="font-size: 140%">developer
</a><a href="/docs/tag/bourbon.html" class="tagCloud__tag label label-info" style="font-size: 80%">bourbon
</a><a href="/docs/tag/bower.html" class="tagCloud__tag label label-info" style="font-size: 80%">bower
</a><a href="/docs/tag/bundler.html" class="tagCloud__tag label label-info" style="font-size: 80%">bundler
</a><a href="/docs/tag/cache.html" class="tagCloud__tag label label-info" style="font-size: 80%">cache
</a><a href="/docs/tag/colour.html" class="tagCloud__tag label label-info" style="font-size: 80%">colour
</a><a href="/docs/tag/composer.html" class="tagCloud__tag label label-info" style="font-size: 80%">composer
</a><a href="/docs/tag/continuous-integration.html" class="tagCloud__tag label label-info" style="font-size: 80%">continuous-integration
</a><a href="/docs/tag/desktop.html" class="tagCloud__tag label label-info" style="font-size: 80%">desktop
</a><a href="/docs/tag/e-commerce.html" class="tagCloud__tag label label-info" style="font-size: 80%">e-commerce
</a><a href="/docs/tag/email.html" class="tagCloud__tag label label-info" style="font-size: 140%">email
</a><a href="/docs/tag/google.html" class="tagCloud__tag label label-info" style="font-size: 140%">google
</a><a href="/docs/tag/gmail.html" class="tagCloud__tag label label-info" style="font-size: 80%">gmail
</a><a href="/docs/tag/enom.html" class="tagCloud__tag label label-info" style="font-size: 80%">enom
</a><a href="/docs/tag/file-system.html" class="tagCloud__tag label label-info" style="font-size: 80%">file-system
</a><a href="/docs/tag/font.html" class="tagCloud__tag label label-info" style="font-size: 80%">font
</a><a href="/docs/tag/front-end.html" class="tagCloud__tag label label-info" style="font-size: 80%">front-end
</a><a href="/docs/tag/home.html" class="tagCloud__tag label label-info" style="font-size: 80%">home
</a><a href="/docs/tag/gems.html" class="tagCloud__tag label label-info" style="font-size: 80%">gems
</a><a href="/docs/tag/geo-location.html" class="tagCloud__tag label label-info" style="font-size: 80%">geo-location
</a><a href="/docs/tag/git.html" class="tagCloud__tag label label-info" style="font-size: 80%">git
</a><a href="/docs/tag/gollum.html" class="tagCloud__tag label label-info" style="font-size: 80%">gollum
</a><a href="/docs/tag/hybrid.html" class="tagCloud__tag label label-info" style="font-size: 80%">hybrid
</a><a href="/docs/tag/mobile.html" class="tagCloud__tag label label-info" style="font-size: 80%">mobile
</a><a href="/docs/tag/grunt.html" class="tagCloud__tag label label-info" style="font-size: 80%">grunt
</a><a href="/docs/tag/haml.html" class="tagCloud__tag label label-info" style="font-size: 80%">haml
</a><a href="/docs/tag/homebrew.html" class="tagCloud__tag label label-info" style="font-size: 80%">homebrew
</a><a href="/docs/tag/infographic.html" class="tagCloud__tag label label-info" style="font-size: 80%">infographic
</a><a href="/docs/tag/java.html" class="tagCloud__tag label label-info" style="font-size: 80%">java
</a><a href="/docs/tag/job.html" class="tagCloud__tag label label-info" style="font-size: 80%">job
</a><a href="/docs/tag/education.html" class="tagCloud__tag label label-info" style="font-size: 80%">education
</a><a href="/docs/tag/skills.html" class="tagCloud__tag label label-info" style="font-size: 80%">skills
</a><a href="/docs/tag/kodi.html" class="tagCloud__tag label label-info" style="font-size: 80%">kodi
</a><a href="/docs/tag/laravel.html" class="tagCloud__tag label label-info" style="font-size: 80%">laravel
</a><a href="/docs/tag/social.html" class="tagCloud__tag label label-info" style="font-size: 140%">social
</a><a href="/docs/tag/profile.html" class="tagCloud__tag label label-info" style="font-size: 80%">profile
</a><a href="/docs/tag/localization.html" class="tagCloud__tag label label-info" style="font-size: 80%">localization
</a><a href="/docs/tag/internationalization.html" class="tagCloud__tag label label-info" style="font-size: 80%">internationalization
</a><a href="/docs/tag/i18n.html" class="tagCloud__tag label label-info" style="font-size: 80%">i18n
</a><a href="/docs/tag/logging.html" class="tagCloud__tag label label-info" style="font-size: 80%">logging
</a><a href="/docs/tag/newsletter.html" class="tagCloud__tag label label-info" style="font-size: 80%">newsletter
</a><a href="/docs/tag/marketing.html" class="tagCloud__tag label label-info" style="font-size: 80%">marketing
</a><a href="/docs/tag/middleman.html" class="tagCloud__tag label label-info" style="font-size: 80%">middleman
</a><a href="/docs/tag/mysql.html" class="tagCloud__tag label label-info" style="font-size: 80%">mysql
</a><a href="/docs/tag/network.html" class="tagCloud__tag label label-info" style="font-size: 80%">network
</a><a href="/docs/tag/nginx.html" class="tagCloud__tag label label-info" style="font-size: 80%">nginx
</a><a href="/docs/tag/node.html" class="tagCloud__tag label label-info" style="font-size: 80%">node
</a><a href="/docs/tag/parallax.html" class="tagCloud__tag label label-info" style="font-size: 80%">parallax
</a><a href="/docs/tag/paypal.html" class="tagCloud__tag label label-info" style="font-size: 80%">paypal
</a><a href="/docs/tag/phantomjs.html" class="tagCloud__tag label label-info" style="font-size: 80%">phantomjs
</a><a href="/docs/tag/phonegap.html" class="tagCloud__tag label label-info" style="font-size: 80%">phonegap
</a><a href="/docs/tag/php.html" class="tagCloud__tag label label-info" style="font-size: 80%">php
</a><a href="/docs/tag/project-brief.html" class="tagCloud__tag label label-info" style="font-size: 80%">project-brief
</a><a href="/docs/tag/project-management.html" class="tagCloud__tag label label-info" style="font-size: 80%">project-management
</a><a href="/docs/tag/rbenv.html" class="tagCloud__tag label label-info" style="font-size: 80%">rbenv
</a><a href="/docs/tag/ripple.html" class="tagCloud__tag label label-info" style="font-size: 80%">ripple
</a><a href="/docs/tag/search.html" class="tagCloud__tag label label-info" style="font-size: 80%">search
</a><a href="/docs/tag/seo.html" class="tagCloud__tag label label-info" style="font-size: 80%">seo
</a><a href="/docs/tag/facebook.html" class="tagCloud__tag label label-info" style="font-size: 80%">facebook
</a><a href="/docs/tag/sublime.html" class="tagCloud__tag label label-info" style="font-size: 140%">sublime
</a><a href="/docs/tag/text-editor.html" class="tagCloud__tag label label-info" style="font-size: 140%">text editor
</a><a href="/docs/tag/sugarcrm.html" class="tagCloud__tag label label-info" style="font-size: 80%">sugarcrm
</a><a href="/docs/tag/crm.html" class="tagCloud__tag label label-info" style="font-size: 80%">crm
</a><a href="/docs/tag/svg.html" class="tagCloud__tag label label-info" style="font-size: 80%">svg
</a><a href="/docs/tag/testing.html" class="tagCloud__tag label label-info" style="font-size: 80%">testing
</a><a href="/docs/tag/tdd.html" class="tagCloud__tag label label-info" style="font-size: 80%">tdd
</a><a href="/docs/tag/thor.html" class="tagCloud__tag label label-info" style="font-size: 80%">thor
</a><a href="/docs/tag/ruby.html" class="tagCloud__tag label label-info" style="font-size: 80%">ruby
</a><a href="/docs/tag/trello.html" class="tagCloud__tag label label-info" style="font-size: 80%">trello
</a><a href="/docs/tag/tv.html" class="tagCloud__tag label label-info" style="font-size: 80%">tv
</a><a href="/docs/tag/user-experience.html" class="tagCloud__tag label label-info" style="font-size: 80%">user-experience
</a><a href="/docs/tag/virtualisation.html" class="tagCloud__tag label label-info" style="font-size: 80%">virtualisation
</a></div>
</section>

Threshold change

Tags

accessibility apple blog ios developer email google social sublime text editor 
= codeBlender "tag-cloud", "molecule", { name: "docs", threshold: 2 } 

<section class='tagCloud'>
<h4 class='heading tagCloud__heading'>
Tags
</h4>


<div class='tagCloud__tags'>
<a href="/docs/tag/accessibility.html" class="tagCloud__tag label label-info" style="font-size: 80%">accessibility
</a><a href="/docs/tag/apple.html" class="tagCloud__tag label label-info" style="font-size: 200%">apple
</a><a href="/docs/tag/blog.html" class="tagCloud__tag label label-info" style="font-size: 80%">blog
</a><a href="/docs/tag/ios.html" class="tagCloud__tag label label-info" style="font-size: 80%">ios
</a><a href="/docs/tag/developer.html" class="tagCloud__tag label label-info" style="font-size: 80%">developer
</a><a href="/docs/tag/email.html" class="tagCloud__tag label label-info" style="font-size: 80%">email
</a><a href="/docs/tag/google.html" class="tagCloud__tag label label-info" style="font-size: 80%">google
</a><a href="/docs/tag/social.html" class="tagCloud__tag label label-info" style="font-size: 80%">social
</a><a href="/docs/tag/sublime.html" class="tagCloud__tag label label-info" style="font-size: 80%">sublime
</a><a href="/docs/tag/text-editor.html" class="tagCloud__tag label label-info" style="font-size: 80%">text editor
</a></div>
</section>

Resources Useful websites and tutorials

Title URL
Middleman Blogging http://middlemanapp.com/blogging
Microformat Tag http://microformats.org/wiki/rel-tag

Tasks

Task Date
Options to put in a badge and add a tag icon on the tag element
Options to remove the Heading - change text or tag
Make the font colour change with the size also
Allow for counting tags in different blogs, i.e. blog( 'portfolio' ) - middleman bug?
Allow for local to change the options
CSS Do I need the section here?
Make links larger in accordance to touch areas for mobile