Jina Anne jina

Aspirational Dropbox SCSS Principles

This is purposefully ambitious and aspirational. Some concepts that are worth understanding in addition to the principles outlined here include:

Here’s a CodePen I’ll periodically update with the compiled CSS to use as a testing playground.

Event Notes

Event Name:
Location:
Date:
Conference format: (number of days, tracks, and speakers)

Talk

SassDoc allows to document Sass items: functions, mixins, variables, placeholders.
No CSS selectors.
It uses a similar system as JSDoc, based on comments and annotations.

You can choose between two types of comments.

Inline comments (3 slashes):

///
///

Pure SASS-adaption of Lea Verou's contrast-ratio javascript. Can be useful when eg. generating colored buttons from a single supplied color as you can then check which out of a couple of text colors would give the best contrast.

This script currently lacks the support for alpha-transparency that Lea supports in her script though.

In addition to the color-contrast adaption there's also some math methods that were needed to be able to calculate the exponent of a number and especially so when the exponent is a decimal number. A 2.4 exponent is used to calculate the luminance of a color and calculating such a thing is not something that SASS supports out of the box and not something I found a good pure-SASS script for calculating and I much prefer pure-SASS over ruby extensions. The math methods might perhaps be unecessary though if you're running Compass or similar as they may provide compatible math methods themselves.

Normal usage: `color: pick_best_color(#f00

Rainbow stripe mixin with SCSS + Compass

I'm trying to make a horizontal rainbow stripe background gradient mixin, but I feel like this is way too verbose. How can it be better?

Goals:

[check] Use variables for colors so they can be swapped out for different colors.
[check] The widths are hard coded for 8 colors. Can it be done smarter where it adjusts to the number of colors you add? Or is that asking too much?
[check] The colors are defined twice for the color starts and stops. Can this be done better?
[see below] Right now I define the colors as variables at the top level, then pass them in the mixin. Should they instead be created inside the mixin and then colors are brought in as arguments? Or does that matter?

pandora’s vox: on community in cyberspace

by humdog (1994)

when i went into cyberspace i went into it thinking that it was a place like any other place and that it would be a human interaction like any other human interaction. i was wrong when i thought that. it was a terrible mistake.

the very first understanding that i had that it was not a place like any place and that the interaction would be different was when people began to talk to me as though i were a man. when they wrote about me in the third person, they would say “he.” it interested me to have people think i was “he” instead of “she” and so at first i did not say anything. i grinned and let them think i was “he.” this went on for a little while and it was fun but after a while i was uncomfortable. finally i said unto them that i, humdog, was a woman and not a man. this surprised them. at that moment i realized that the dissolution of gender-category was something that was happening everywhere, and perhaps it was only just very obvious on the ne

	/*
	This is not meant to be a final CSSWG proposal,
	but reflects my immediate thoughts after reading
	[David Baron's](https://github.com/dbaron/container-queries-implementability) promising draft.
	This gist was created to demonstrate my idea for removing selectors from his query syntax.

	More of my thoughts & notes are online at css.oddbird.net/rwd/
	*/

	main,

	// Disable smooth scrolling for users who have set `prefers-reduced-motion` in their operating system

	// 1. Place this snippet before the end of the <body> tag;
	// NOT in the <head> tag!
	// 2.Make sure it's inside $(function() {})!

	$(function() {
	const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
	if (mediaQuery.matches) $(document).off('click.wf-scroll');
	})

	class Middleman::Extensions::DirManager < Middleman::Extension
	register :dir_manager
	option :dirs, {source: 'pages', destination: '', add: [], remove: ['', 'pages']}

	def manipulate_resource_list resources
	[options.dirs].flatten.each do \|opts\|
	# Remove pages if specified
	opts[:remove].each do \|dir\|
	resources.reject! do \|page\|
	Dir.glob(normalise(dir) + '/*', File::FNM_DOTMATCH).include? page.source_file

	$base-font-size: 16px;
	$base-line-height: 1.5;

	// this value may vary for each font
	// unitless value relative to 1em
	$cap-height: 0.68;


	@mixin baseline($font-size, $scale: 2) {