Skip to content

Instantly share code, notes, and snippets.

View 7studio's full-sized avatar

Xavier Zalawa 7studio

View GitHub Profile
@blackfalcon
blackfalcon / 01_SassMeister.sass
Last active February 28, 2016 01:06
Extending placeholder selectors within media queries
%myclass
color: blue
@media (min-width: 600px)
background: red
@media (min-width: 800px)
font-size: 28px
.class1
@media (min-width: 600px)
@extend %myclass
@kaelig
kaelig / textexposed.css
Last active December 16, 2015 13:38
Expose/hide content à la Facebook.
/* ==========================================================================
Text exposed utility
========================================================================== */
/**
* Hides/shows text (use case: "read more" link)
*
* When `u-textExposed` has class `u-textExposed--expose`:
* Shows `u-textExposed-show`
* Hides `u-textExposed-hide`
@piouPiouM
piouPiouM / x-em.scss
Last active December 18, 2015 08:48
A #sass function to convert pixel font-sizes to em's.
// The base font size.
$base-font-size: 16px !default;
// Convert `$to` (assumed px) to em compared to a given `$context` (assumed px)
@function x-em($to, $context: $base-font-size) {
// Do not break the natural behavior of the null variables.
@if 'null' == type-of($to) {
@return $to;
}
@mathiasbynens
mathiasbynens / opera-15-regressions.md
Last active September 23, 2023 14:50
List of things that broke with the Opera 15 release due to the switch to Blink/Chromium (Web features, not UI-specific stuff)
@Integralist
Integralist / Description.md
Last active April 25, 2020 16:20
This is how BBC News currently implements it's Image Enhancer for responsive images. Note: this is a completely rebuilt version of the code so the BBC's original source code doesn't actually look anything like the below example.

The BBC has a server-side image service which provides developers with multiple sized versions of any image they request. It works in a similar fashion to http://placehold.it/ but it also handles the image ratios returned (where as placehold.it doesn't).

The original BBC News process (and my re-working of the script) follows roughly these steps...

  • Create new instance of ImageEnhancer
  • Change any divs within the page (which have a class of delayed-image-load) into a transparent GIF using a Base64 encoded string.
    • We set the width & height HTML attributes of the image to the required size
    • We know what size the image needs to be because each div has custom data-attr set server-side to the size of the image
    • We then set a class of image-replace onto each newly created transparent image
  • We use a 250ms setTimeout to unblock the UI thread and which calls a function resizeImages which enhances the image-replace images so their source is now set to a URL whe
@PaulKinlan
PaulKinlan / criticalcss-bookmarklet-devtool-snippet.js
Last active April 2, 2024 02:45
CriticalCSS Bookmarklet and Devtool Snippet.js
(function() {
var CSSCriticalPath = function(w, d, opts) {
var opt = opts || {};
var css = {};
var pushCSS = function(r) {
if(!!css[r.selectorText] === false) css[r.selectorText] = {};
var styles = r.style.cssText.split(/;(?![A-Za-z0-9])/);
for(var i = 0; i < styles.length; i++) {
if(!!styles[i] === false) continue;
var pair = styles[i].split(": ");
@necolas
necolas / README.md
Last active December 25, 2015 23:49
Workflow: SUIT CSS components, Mustache, Flight, Webdriver UI

General idea

  • Create isolated, predictable, configurable UI components.

  • Change the way that eng-design team operates by creating a workflow and audit trail that is based on reviewing modules.

  • UI component's code and appearance are reviewed at the same time, with the same scope.

  • Automatically be aware of changes to modules that depend on the one you are changing. Encourage decomposition of UI where appropriate.

@kReEsTaL
kReEsTaL / Get background-position from Compass magic sprites in em
Last active December 26, 2015 22:19
Get background-position from Compass magic sprites in em
/**
* @subsection Get Sprites position in EM
* @author Marie Guillaumet
*/
@mixin em-sprite-position($map, $sprite, $context: $fs, $offset-x: 0, $offset-y: 0)
{
/** Thank you @pioupiouM! */
$position: sprite-position($map, $sprite, $offset-x, $offset-x);
$x: nth($position, 1);
@hissy
hissy / gist:7352933
Created November 7, 2013 11:07
[WordPress] Add file to media library programmatically
<?php
$file = '/path/to/file.png';
$filename = basename($file);
$upload_file = wp_upload_bits($filename, null, file_get_contents($file));
if (!$upload_file['error']) {
$wp_filetype = wp_check_filetype($filename, null );
$attachment = array(
'post_mime_type' => $wp_filetype['type'],
'post_parent' => $parent_post_id,
@Integralist
Integralist / 1. Custom Grunt Tasks - Gruntfile.js
Last active October 20, 2017 07:39
Example of how to structure your Grunt files
module.exports = function (grunt) {
// Project configuration.
grunt.initConfig({
// Store your Package file so you can reference its specific data whenever necessary
pkg: grunt.file.readJSON('package.json')
// ...tasks...