MoOx

Discovering CSS Pre-processor

Famous pre-processors

• Sass (+Scss) http://sass-lang.com/

• Less http://lesscss.org/

• Stylus http://learnboost.github.com/stylus/

Sass vs Less

MoOx

//
// Predefined Media Queries Mixins
//
// @require sass-3.2 (you need eventually to do "sudo gem install sass --pre")
//
// @author Maxime Thirouin <maxime.thirouin@gmail.com>
//
// @link https://gist.github.com/2028061
// @link http://www.metaltoad.com/blog/simple-device-diagram-responsive-design-planning

MoOx

Principes d'écriture de CSS consistent et idiomatique

Le présent document liste des recommandations raisonnables pour développer avec CSS.

Il n'est pas destiné à être normatif et je ne souhaite pas imposer mes préférences de style de code aux gens. Toutefois, ces lignes directrices encouragent fortement le fait d'utiliser des modèles existants, communs et sensés.

Ceci est un document évolutif et les nouvelles idées sont toujours les bienvenues. Merci de contribuer.

Idiomatic CSS in English (Original)

MoOx

// Usage : less2stylusDir('../src/css/');

var fs = require('fs');

// this less 2 stylus conversion script make a stylus easy to read syntax
// - let the braces
// - replace the @ for var as $
// - let semicolons

function less2stylus(less)

MoOx

test biatch

MoOx

@import "shared";

// Cross-browser support for @font-face. Supports IE, Gecko, Webkit, Opera.
//
// $name     : (string or list, required) The name and optional SVG-ID to use.
//              - string "simpleName" => name: simpleName, ID: #simpleName
//              - list "name #id" => name: name, ID: #id
// $location : (string) The location of the font files - try to find in fonts_dir if none provided.
//              - Locations include the file name, without extensions:
//                'simple' => 'simple.eot', 'simple.ttf', 'simple.woff'

MoOx

  //...
  $background: null; // if you don't do this, background is undefined out of the @if/else scope
  @if ($direction) {
    $background: linear-gradient($direction, $color, $color2);
  }
  @else {
    $background: linear-gradient($color, $color2);
  }
  //...
  

MoOx

/*
 * grunt-fontcustom
 * https://github.com/MoOx/grunt-fontcustom
 *
 * Copyright (c) 2013 Maxime Thirouin, contributors
 * Licensed under the MIT license.
 */

'use strict';

MoOx

requirejs.config({
  name: "main",
	
	shim: {
		"foundation/jquery.cookie":							{ deps: ["jquery"] },
		"foundation/jquery.event.move":						{ deps: ["jquery"] },
		"foundation/jquery.event.swipe":					{ deps: ["jquery"] },
		"foundation/jquery.foundation.accordion":			{ deps: ["jquery", "Modernizr"] },
		"foundation/jquery.foundation.alerts":				{ deps: ["jquery"] },
		"foundation/jquery.foundation.buttons":				{ deps: ["jquery"] },

MoOx

		// togglable ability (used for navbar)
		$('.js-togglable').each(function() {
			var togglableContainer = this;
			$('.js-togglable__toggler', togglableContainer).on('click keyup', function() {
				$('.js-togglable__item', togglableContainer).toggleClass('js-togglable__item--hide');
			});
		});