Skip to content

Instantly share code, notes, and snippets.

View robertmagnusson's full-sized avatar

Robert Magnusson robertmagnusson

View GitHub Profile
@robertmagnusson
robertmagnusson / breakpoint_mixin.scss
Created February 11, 2014 15:27
Breakpoint mixin
@mixin breakpoint($point) {
@if $point == large {
@media (min-width: 64.375em) { @content; }
}
@else if $point == medium {
@media (min-width: 50em) { @content; }
}
@else if $point == small {
@media (min-width: 37.5em) { @content; }
}
@mixin clearfix() {
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
}
}
@robertmagnusson
robertmagnusson / box_sizing_mixin.scss
Created February 11, 2014 15:08
Box sizing mixin
@mixin box-sizing($box-model) {
-webkit-box-sizing: $box-model; // Safari <= 5
-moz-box-sizing: $box-model; // Firefox <= 19
box-sizing: $box-model;
}
@robertmagnusson
robertmagnusson / border_radius_mixin.scss
Created February 11, 2014 15:07
Border-radius mixin
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
border-radius: $radius;
background-clip: padding-box; /* stops bg color from leaking outside the border: */
}
// Single side border-radius
@mixin border-top-radius($radius) {
-webkit-border-top-right-radius: $radius;
border-top-right-radius: $radius;
@robertmagnusson
robertmagnusson / cubic_animation_mixin.scss
Created February 6, 2014 08:57
Mixin cubic animation.
// Animate objects, just period of time the animation will go on with cubic settings.
@mixin cubic($transition-time: 0.5s) {
-webkit-transition: $transition-time cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
-moz-transition: $transition-time cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
-ms-transition: $transition-time cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
-o-transition: $transition-time cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
transition: $transition-time cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
}
@robertmagnusson
robertmagnusson / animate_mixin.scss
Created February 6, 2014 08:57
Mixin easing transition
// Animate objects, just period of time the animation will go on.
@mixin animate($transition-time: 0.5s) {
-webkit-transition: all $transition-time ease-in-out;
-moz-transition: all $transition-time ease-in-out;
-ms-transition: all $transition-time ease-in-out;
-o-transition: all $transition-time ease-in-out;
transition: all $transition-time ease-in-out;
}
@robertmagnusson
robertmagnusson / srcset.html
Created February 6, 2014 08:53
Srcset syntax
<img src="img_lowres.jpg" srcset="img.jpg">
@robertmagnusson
robertmagnusson / page.tpl.php
Created February 5, 2014 09:07
Style Drupal messages
<?php drupal_set_message(t('This is an error message.'), 'error'); ?>
<?php drupal_set_message(t('This is a notice message.'), 'notice'); ?>
<?php drupal_set_message(t('This is a warning message.'), 'warning'); ?>
<?php drupal_set_message(t('This is a status message.'), 'status'); ?>
<?php print $messages; ?>
@robertmagnusson
robertmagnusson / script.js
Created February 5, 2014 09:06
Responsive tables
// Responsive tables.
$('table:not(.responsive-processed)').each(function() {
var $table = $(this);
// Iterate through every table header, and append the text as a label to
// the corresponding cell for reach row.
$('th:not(.actions)', $table).each(function(index) {
var labelText = $(this).text();
$('tr', $table).each(function() {
$('td:not(.actions)', this).eq(index).prepend('<span class="label">' + labelText + '</span>');
@robertmagnusson
robertmagnusson / template.php
Created February 5, 2014 09:05
Dölja blocktitlar via template.php
/**
* Implements template_preprocess_block().
*/
function themename_preprocess_block(&$variables) {
// Add a title class to the block title.
$variables['title_attributes_array']['class'] = 'block-title';
// Alter the title for some blocks.
// Manually configured here, because Features doesn't export block configurations.
switch ($variables['block']->bid) {