How to name CSS classes
paceaux
/ tinyRules.css.md
Last active
April 10, 2025 21:59
Tiny rules for how to name things in CSS and JS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| %btn { | |
| display: inline-block; | |
| border: 1px solid #999; | |
| border-radius: 8px; | |
| } | |
| .btn-error { | |
| @extend %btn; | |
| background: #f00; | |
| } |
hlb
/ if_lightness.scss
Last active
December 20, 2015 06:59
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $bgcolor: hsl(53,56%,87%); | |
| .button-primary { | |
| background: $bgcolor; | |
| color: if(lightness($bgcolor) < 50%, white, black); | |
| } |
starstuck
/ compass-retina-sprites.scss
Created
August 3, 2012 15:33
— forked from thulstrup/compass-retina-sprites.scss
Using Compass to generate normal and retina sprite maps
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Setup images sprite having high resolution variant for retina displays. | |
| * | |
| * It will create class names for all available icons. | |
| * | |
| * This uses custom function to prefix selectors from array. To get it working you will need to include following snippet in your config.rb | |
| * | |
| * module Sass::Script::Functions | |
| * def prefix_each(array, prefix) | |
| * return Sass::Script::String.new array.to_a.map{|item| prefix.value + item.value}.join(", ") |
StanAngeloff
/ config.rb
Created
July 23, 2012 16:27
Draft PHP script to join @media queries in a CSS file.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # [..] | |
| require 'shellwords' | |
| on_stylesheet_saved do |filename| | |
| script = File.dirname(__FILE__) + '/_scripts/join-media-queries.php' | |
| system('php -q ' + Shellwords.escape(script) + ' -i ' + Shellwords.escape(filename)) | |
| end |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| * Outputs a float representing the iOS version if user is using an iOS browser i.e. iPhone, iPad | |
| * Possible values include: | |
| * 3 - v3.0 | |
| * 4.0 - v4.0 | |
| * 4.14 - v4.1.4 | |
| * false - Not iOS | |
| */ | |
| var iOS = parseFloat( |
necolas
/ css-responsive-images.html
Created
May 18, 2011 13:33
Idea for CSS-only responsive images using CSS3 generated content and attr() function. No browser implementation as of May 2011
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>CSS responsive images</title> | |
| <style> | |
| /* Doesn't stop original source image being | |
| downloaded too */ | |
| @media (min-device-width:600px) { |