Skip to content

Instantly share code, notes, and snippets.

View kaelig's full-sized avatar

Kaelig Deloumeau-Prigent kaelig

View GitHub Profile
@kaelig
kaelig / input.scss
Created March 1, 2012 11:36
Different Shades of transparent colors with Sass
// Transparent Background
// From: http://stackoverflow.com/questions/6902944/sass-mixin-for-background-transparency-back-to-ie8
// Extend this class to save bytes
.transparent-background {
background-color: transparent;
zoom: 1;
}
// The mixin
@kaelig
kaelig / nudge-typescript-convert.yml
Created October 12, 2022 08:24
GitHub Action to nudge contributors to convert JavaScript files to TypeScript
on:
pull_request:
paths:
- '**.js'
- '**.jsx'
- '**.ts'
- '**.tsx'
name: TypeScript conversion nudge
jobs:
Nudge-to-convert-to-TypeScript-if-JavaScript-found:
<input
type="text"
<!-- Present the control as a select -->
role="combobox"
<!-- Self-label the field using the placeholder -->
placeholder="Search unicorns"
id="search-field"
aria-labelledby="search-field"
<!-- Link to the suggestions listbox -->
aria-owns="suggestions"
// Clamps a block of text to a certain number of lines,
// followed by an ellipsis in Webkit and Blink based browsers
// Reference: http://dropshado.ws/post/1015351370/webkit-line-clamp
@mixin text-clamp($lines: 2, $line-height: false) {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: $lines;
// Fallback for non-Webkit browsers
@kaelig
kaelig / SassMeister-input-HTML.html
Created August 26, 2014 15:40
Generated by SassMeister.com.
<h1>Row test</h1>
<!--[if (lte IE 9) & (!IEMobile)]>
<div class="old-ie">
<![endif]-->
<!-- items: 2 -->
<div class="l-row l-row--items-2">
<div class="l-row__item l-row__item--boost-1">1+</div>
<div class="l-row__item">2</div>
</div>
@kaelig
kaelig / SassMeister-input.scss
Last active July 28, 2020 15:13
Generated by SassMeister.com, the Sass playground.
// ----
// Sass (v3.3.10)
// Compass (v1.0.0.alpha.20)
// ----
// To enable support for browsers that do not support @media queries,
// (IE <= 8, Firefox <= 3, Opera <= 9) set $mq-responsive to false
// Create a separate stylesheet served exclusively to these browsers,
// meaning @media queries will be rasterized, relying on the cascade itself
$mq-responsive: true !default;
@kaelig
kaelig / Gemfile
Created September 7, 2011 00:20
Sass & CoffeeScript automated compiling and minifying with Guard
source "http://rubygems.org"
group :development do
gem 'rake'
gem 'guard'
gem 'coffee-script'
gem 'rb-fsevent'
gem 'rb-inotify'
gem 'compass', '0.11.5'
gem 'sass', '3.1.5'
gem 'guard-compass'
@kaelig
kaelig / input.scss
Created November 21, 2012 22:41 — forked from blackfalcon/01_SassMeister.sass
Extending placeholder selectors within media queries
%myclass {
color: blue;
@media (min-width: 600px) {
background: red;
}
@media (min-width: 800px) {
font-size: 28px;
}
}
@kaelig
kaelig / readme.md
Created November 7, 2012 11:28
My coding conventions

CSS Coding Styleguide

  • Use 2 spaces for indentation
  • Avoid descendent selectors (.my-module p {…})
  • With Sass avoid nesting too deeply
  • Avoid attaching classes to elements (div.category {…})
  • Avoid !important !!!
  • Use percentages and box-sizing when possible
  • Rely on the component library
  • Try not to write any CSS if you can
@kaelig
kaelig / safe-get-function.scss
Created September 13, 2016 05:54
Safe get-function in Sass 3.3.x and up
// Simplified version of safe-get-function
// Full code: https://github.com/kaelig/sass-safe-get-function
@function safe-get-function($name) {
@if function-exists('get-function') {
@return get-function($name);
} @else {
@return $name;
}
}