- 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
This file contains 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
// 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 |
This file contains 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
on: | |
pull_request: | |
paths: | |
- '**.js' | |
- '**.jsx' | |
- '**.ts' | |
- '**.tsx' | |
name: TypeScript conversion nudge | |
jobs: | |
Nudge-to-convert-to-TypeScript-if-JavaScript-found: |
This file contains 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
<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" |
This file contains 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
// 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 |
This file contains 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
<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> |
This file contains 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
// ---- | |
// 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; |
This file contains 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
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' |
This file contains 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
%myclass { | |
color: blue; | |
@media (min-width: 600px) { | |
background: red; | |
} | |
@media (min-width: 800px) { | |
font-size: 28px; | |
} | |
} |
This file contains 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
// 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; | |
} | |
} |
NewerOlder