Skip to content

Instantly share code, notes, and snippets.

View charlenopires's full-sized avatar

Charleno Pires charlenopires

View GitHub Profile

A Sassy Approach To Theming

Sometimes it's hard to know how to handle CSS for components where they can appear in different contexts and require different colour schemes. This pen puts forward a concept for providing themes for components so that their core properties remain unchanged and we can provide colour styling without needing to cascade down through selectors.

More about this technique: http://www.ian-thomas.net/a-sassy-approach-to-theming-components/

Forked from Ian Thomas's Pen A Sassy Approach To Theming.

A Pen by Charleno Pires on CodePen.

@charlenopires
charlenopires / stylus-best-practices.md
Last active August 29, 2015 14:26 — forked from zspecza/stylus-best-practices.md
Stylus Best Practices

Stylus Best Practices

Introduction

This is a curated set of conventions and best practices for Stylus, an expressive, dynamic, robust and advanced CSS preprocessor. Frustrated with there not being a set of conventions set in place (that could be easily found), I set forth to find out on my own.

@charlenopires
charlenopires / css3.styl
Last active August 29, 2015 14:26 — forked from mattmcmanus/css3.styl
A collection of mixins for Stylus to make using css3 a breeze
// MIXINS
vendor(prop, args)
-webkit-{prop} args
-moz-{prop} args
-o-{prop} args
{prop} args
animation()
vendor('animation', arguments)
@charlenopires
charlenopires / bad_css
Last active August 29, 2015 14:20 — forked from ryboe/bad_css
OBSOLETE PREFIXES
-xv-interpret-as // -xv- and -o- are old Opera prefixes for the Presto
-xv-phonemes // engine. Opera switched to the Blink engine with
-xv-voice-balance // version 15. The current version is 23.
-xv-voice-duration
-xv-voice-pitch
-xv-voice-pitch-range
-xv-voice-rate
-xv-voice-stress
-xv-voice-volume
@charlenopires
charlenopires / CSS-Animated-Gallery-With-Persistent-Images.markdown
Created December 26, 2014 03:56
CSS Animated Gallery With Persistent Images
@charlenopires
charlenopires / Alternative-Interpolation-Methods-(experiment).markdown
Created December 19, 2014 05:22
Alternative Interpolation Methods (experiment)

Alternative Interpolation Methods (experiment)

An experiment of alternative interpolation methods for CSS gradients, using Chroma.js

A Pen by Lucas Bebber on CodePen.

License.

@charlenopires
charlenopires / CSS-only-Calendar-App-Concept.markdown
Created December 17, 2014 02:57
CSS-only Calendar App Concept

CSS-only Calendar App Concept

Another Dribbble rework of an original shot by Sergey Valiukh. Chrome and Safari only, for now.

A Pen by David Khourshid on CodePen.

License.