djs070

{
  "vars": {
    "@gray-base": "#000",
    "@gray-darker": "lighten(@gray-base, 13.5%)",
    "@gray-dark": "lighten(@gray-base, 20%)",
    "@gray": "lighten(@gray-base, 33.5%)",
    "@gray-light": "lighten(@gray-base, 46.7%)",
    "@gray-lighter": "lighten(@gray-base, 93.5%)",
    "@brand-primary": "darken(#428bca, 6.5%)",
    "@brand-success": "#5cb85c",

djs070

Background

Yeoman is a scaffolding tool written in JavaScript, supported by a who's-who of web dev legends and backed by hundreds (thousands?) of community-written generators, to bootstrap any kind of project from a simple front-end build to all kinds of framework projects.

Wagtail is a beatiful new CMS, written lovingly in Python/Django by the talented folks at Torchbox. Said folks have recently released an official Django template to get started with a Wagtail site with dependencies, Django settings and deployment ready to go - all packaged nicely into a Vagrant box.

What did I do?

I have recently ported this template to a Yeoman generator and feel that some may question why I would take a beautiful piece of python templating and turn it into JavaScript.

djs070

Approach

• http://nicolasgallagher.com/about-html-semantics-front-end-architecture/
• http://csswizardry.com/2012/04/the-single-responsibility-principle-applied-to-css/
• http://blog.kaelig.fr/post/38377421139/principles-for-writing-good-css

Methodologies

• SMACSS: http://smacss.com/book/
• OOCSS: https://github.com/stubbornella/oocss/wiki
• BEM: http://bem.info/method/
• SUIT: https://github.com/suitcss/suit/blob/master/doc/design-principles.md

djs070

" URL: http://vim.wikia.com/wiki/Example_vimrc
" Authors: http://vim.wikia.com/wiki/Vim_on_Freenode
" Description: A minimal, but feature rich, example .vimrc. If you are a
"              newbie, basing your first .vimrc on this file is a good choice.
"              If you're a more advanced user, building your own .vimrc based
"              on this file is still a good idea.

"------------------------------------------------------------
" Features {{{1
"

djs070

// Check whether to do tricky layout
var classesForTrickyLayout = ['node-type-design', 'page-node-enquire', 'page-node-19', 'page-node-20', 'page-user'];
// Check against body classes
var doTrickyLayout = ( $( $('body').attr('class').split(/\s+/) ).filter(classesForTrickyLayout).length > 0 );

if ( doTrickyLayout ) {
  $('.fullscreen-background').appendTo($('#content-outer'));

  // Resize image
  var newWidth = $('#content-outer').width() - $('#content-inner').width();

djs070

npm install -g jade stylus

jade --watch --pretty --out 'build' index.jade

djs070

//create an app server
var express = require('express')
  , fs = require('fs')
  , jade = require('jade')
  , app = express();

app.use(express.static(__dirname + '/public'));

app.get('/', function(req, res){
  fs.readFile('./src/index.jade', 'utf-8', function(err, data) {

djs070

Add an attachment field to a rails model using paperclip

Install the gem

In Gemfile

gem "paperclip", "~> 3.0"

Run bundler

djs070

1. Tools > New Plugin
2. Paste code_folding.py
3. Add key binding at Sublime Text 2 > Preferences > Key Bindings - User
4. Restart sublime

djs070

{
	"caret_style": "phase",
	"color_scheme": "Packages/Theme - Spacegray/base16-ocean.dark.tmTheme",
	"draw_white_space": "all",
	"find_selected_text": true,
	"font_face": "Consolas",
	"font_size": 14.0,
	"highlight_line": true,
	"ignored_packages":
	[