Gökhan Karaca goeko

## tinyRules.css.md

      
              3 files
            
          
              3 forks
            
          
              0 comments
            
          
              73 stars
            
          
                paceaux
                / tinyRules.css.md
            
            
              Last active
              April 3, 2024 01:19
            
              
                Tiny rules for how to name things in CSS and JS
              
          
    Tiny rules for how to name stuff

CSS

How to name CSS classes
Stateful Class names

Is it a state that is only one of two conditions? (i.e. a boolean)


## btn.scss
%btn {
    display: inline-block;
    border: 1px solid #999;
    border-radius: 8px;
}

.btn-error {
    @extend %btn;
    background: #f00;
}

## if_lightness.scss
$bgcolor: hsl(53,56%,87%);

.button-primary {
    background: $bgcolor;
    color: if(lightness($bgcolor) < 50%, white, black);
}

## compass-retina-sprites.scss
/**
 * 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(", ")

## config.rb
# [..]

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

## ios-version.js
/*
 * 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(

## css-responsive-images.html
<!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) {
	%btn {
	display: inline-block;
	border: 1px solid #999;
	border-radius: 8px;
	}

	.btn-error {
	@extend %btn;
	background: #f00;
	}
	$bgcolor: hsl(53,56%,87%);

	.button-primary {
	background: $bgcolor;
	color: if(lightness($bgcolor) < 50%, white, black);
	}
	/**
	* 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(", ")
	# [..]

	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
	/*
	* 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(
	<!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) {