SteAllan

BG Image Function

A SASS function which lets you specify just a filename and outputs that prefixed with a consistent path.

A Pen by Ste Allan on CodePen.

License.

SteAllan

data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==

SteAllan

/**
 * Preprocesses the wrapping HTML.
 *
 * @param array &$variables
 *   Template variables.
 */
function sintillate_preprocess_html(&$vars) {
  // Setup IE meta tag to force IE rendering mode
  $meta_ie_render_engine = array(
    '#type' => 'html_tag',

SteAllan

// A mixin which creates a media query, turns your pixel value into ems and will spit out the code for old IE if you choose.
// $type = the type of media query e.g. min-width
// $pxbp = your breakpoint in px (you can use the px unit for verbosity)
// $legacy = true/false, whether you want the code to be seen by old IE

@mixin mq($type, $pxbp, $legacy) {

    $bp: strip-unit($pxbp);

    // Calculate the em value of the desired breakpoint.

SteAllan

// My modified version of Karl Merkli's rem mixin from http://css-tricks.com/snippets/css/less-mixin-for-rem-font-sizing/.

// Pass in a property name and the target pixel values and the mixin will spit out the pixel fallback version and the rem version.

@function strip-unit($num) {
  @return $num / ($num * 0 + 1);
}

@mixin rem-fallback($property, $values...) {
  $max: length($values);

SteAllan

// As used by Compass.
// Used to calculate the em value for the media queries.
// If you're not using ems for your media queries, why the hell not?
$browser-default-font-size: 16px;

// Define your breakpoints by supplying a name and a pixel value. Units will get stripped so you can add 'px' for clarity if you prefer.
$breakpoints: false !default;
$breakpoints: small 480px, medium 768, large 960;

// Strip units from values so we can do maths and shit.

SteAllan

// Hide elements from visual users but not from screen readers

.visually-hidden,
%visually-hidden {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	padding:0 !important;
	border:0 !important;
	height: 1px !important;
	width: 1px !important;

SteAllan

// Replace text with a background image.

.replace-text,
%replace-text {
	text-indent: 110%;
	white-space: nowrap;
	overflow: hidden;
	
	@if $ltie9 == true {
		border: 0;

SteAllan

@media (-webkit-min-device-pixel-ratio: 1.3),
       (min-resolution: 124.8dpi) {
     /* Hi-res screen stuff here */
}