Skip to content

Instantly share code, notes, and snippets.

@simonsmith
simonsmith / lesscss-centre
Created April 13, 2012 13:45
Centre elements on both axis - LESSified version of http://goo.gl/UN80L
.center-container {
text-align: center;
&:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
@simonsmith
simonsmith / NestedLESSLoops
Created July 6, 2012 14:04
Nested loops in LESS
.outer(@outer) when (@outer > 0) {
(~".outer@{outer}") {
color: red;
.inner(@inner) when (@inner > 0) {
font-size: @inner;
.inner(@inner - 1);
}
.inner(0) {}
.inner(@outer);
}
// Hide only visually, but have it available for screenreaders: h5bp.com/v
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
@simonsmith
simonsmith / dynamic-class-less
Created August 24, 2012 09:52
Dynamic classes in LESS CSS
/* http://pxtoem.com/ */
@baseFontSize: 16;
.paddingLeftX (@index) when (@index > 0) {
(~".pl@{index}") {
padding-left: (@index / @baseFontSize) + 0em;
}
.paddingLeftX(@index - 5); /* Change for different increments */
}
.paddingLeftX (0) {}
@simonsmith
simonsmith / AMDBodySizeDetect
Created August 27, 2012 17:45
AMD module to detect screen size based on body:after
http://adactio.com/journal/5429/
// Module given an id as I usually drop it in a main.js
// equivalent. It's hardly worth it's own file
// Returns a function so it can be called after DOMReady
define('mq', function() {
return function() {
return window.getComputedStyle(document.body,':after').getPropertyValue('content');
}
});
@simonsmith
simonsmith / FooterDates
Created September 3, 2012 18:49
Footer dates for a website. From and to
Company name <time datetime="2004-10-08">2004</time> - <time datetime="<?= date('Y-m-d'); ?>"><?= date('Y'); ?></time>
@simonsmith
simonsmith / ResponsiveClasses
Created September 5, 2012 14:24
Mobile first responsive classes, taken from Bootstrap
@tablet: 46.875em; // Approx 750px - Larger Tablets upwards
@desktop: 75em; // Approx 1200px - Desktops
.mobile() {
.visible-phone { display: block; }
.visible-tablet { display: none; }
.visible-desktop { display: none; }
.hidden-phone { display: none; }
.hidden-tablet { display: block; }
.hidden-desktop { display: block; }
@simonsmith
simonsmith / get_nav_items_by_name
Created October 11, 2012 16:20
Get Wordpress nav items by name
/**
* Get menu items based on name
*
* @param $menu_name
* @return mixed|null
*/
function get_nav_items_by_name($menu_name) {
$locations = get_nav_menu_locations();
if (!isset($locations[$menu_name])) {
@simonsmith
simonsmith / get_permalink_by_title
Created October 11, 2012 16:22
Get Wordpress page by title
@simonsmith
simonsmith / amd-jquery-plugin.js
Last active April 29, 2020 15:28
AMD compatible plugin for jQuery
// UMD dance - https://github.com/umdjs/umd
!function(root, factory) {
if (typeof define === 'function' && define.amd) {
define(['jquery'], factory);
} else {
factory(root.jQuery);
}
}(this, function($) {
'use strict';