CSS Day 2015: presentations

CSS Day 2015 Stephen Hay: "I want to write some css" | photo-credit: Paul Robert Lloyd
CSS Day 2015 Stephen Hay: “I want to write some css” | photo-credit: Paul Robert Lloyd

Speakers @ edition 2015

Paul Robert Lloyd
@paulrobertlloyd: “Responsive Principles” @ speakerdeck, pdf.

Zoe Mickley Gillenwater
@zomigi: “Enhancing Responsiveness With Flexbox” @ slideshare.

John Daggett
“Typography on the Web”

Clarissa Peterson
@clarissa: “Responsive Color” @ slideshare.

Rachel Andrew
@rachelandrew: “CSS Grid Layout” @ slideshare.

Roy Tomeij
@roy: “The Future of CSS Isn’t CSS” @ speakerdeck.

Elika J. Etemad
@fantasai: “Defining auto, An Adventure in Layout” @ inkedblade.

Stephen Hay
@stephenhay: “Best Practices”

Know which media query is active

Screen Shot 2013-06-28 at 11.15.02This tip from Alex Morris is really handy while working on css.

When you’re designing or testing a complicated responsive site in a browser, you often find yourself wondering which media query is currently active – or whether it’s firing at all. My usual debug technique in scenarios like this is to flip the background colour inside each breakpoint. However, that’s not all that informative, so I threw this little snippet together using the CSS ‘content’ property and the ‘after’ pseudo selector. Just slot it into the top of each media query and give each one a unique description – either the breakpoint width/range it relates to, or whatever makes most sense for your needs. It’s quick, lightweight and doesn’t require any scripting. You can use the same technique for other scenarios like annotating a design for a client or even displaying user messages.

1
2
3
4
5
6
7
8
9
10
11
@media screen and (min-width: 768px) and (max-width: 1024px) {
	body:after {
		content: "from 768 up to 1024"; /* the label to identify this MQ */
		position: absolute;
		bottom: 0;
		right: 0;
		background: #333;
		color: #fff;
		padding: 10px;
	}
}

Demo: http://codepen.io/alexmorris/full/tcnhA