Skip to content

Instantly share code, notes, and snippets.

@peduarte
peduarte / settings.scss
Created May 27, 2015 13:40
Susy 2 settings
/**
*
* Settings
*
**/
// Defining breakpoints
$bp-small: 520px;
$bp-medium: 768px;
$bp-wide: 960px;
'use strict';
var $ = require('zepto');
var MobileMenu = require('../components/mobile-menu.js');
var Dropdown = require('../components/dropdown');
var bind = require('lodash/function/bind');
module.exports = {
initialize: function () {
new MobileMenu();
'use strict';
var $ = require('zepto');
var extend = require('lodash/object/extend');
var bind = require('lodash/function/bind');
var fastclick = require('fastclick');
var mediator = require('../helpers/mediator');
var EventEmitter = require('events').EventEmitter;
var MQ = require('../ui/base');
/**
* dummy-module.scss
*
* This example shows a module which spans:
* 3 columns on mobile (mobile first approach)
* 4 columns on tablet
* 3 columns on desktop
*/
.DummyModule {
@mixin tt-span($pattern) {
width: span($pattern);
// For no flex browsers...
.#{$no-flex} & {
float: left;
}
}
/**
*
* Settings
*
**/
// Defining breakpoints
$bp-small: 520px !default;
$bp-medium: 768px !default;
$bp-wide: 1024px !default;
<div class="Item NL1">
<div class="Item-content">
<h2 class="Item-headline">Hello World</h2>
<p class="Item-dip">This is an example of a slice item.</p>
<a href="" class="Item-cta">Read the full story</a>
</div>
<div class="Item-media">
<a href="">
<img src="">
/**
*
* Item Module
*
**/
.Item {
@include flexbox;
@include flex-direction(column);
width: 100%;
/**
*
* Slice
*
**/
.Slice {
@include flexbox;
@include flex-direction(row);
@include flex-wrap(wrap);
/**
*
* NL1 Module
*
**/
.NL1 {
$cols-medium: 9;
$cols-wide: 10;