CascadiaFest: CSS Afternoon Part 2 Notes

The last talks of the CSS day and first day of CascadiaFest.

Clarissa Peterson: Responsive Color

Remember the days when they would say color is done by Technicolor? e.g. Merry Melodies, Wizard of Oz

Was uncommon to have color TV.

Computer monitors were similar. Started in one colour, then 256 colours.

Movies and TV, colour is not the most important, it’s the story.

With websites, we don’t have control of the whole process like with print.

Colour in CSS

Hue – what we normally think of as colour. The amount of red, green, or blue.

Value – amount of white or black. Actually most important part of colour. Can still tell what the picture is if Hue were removed, but not value.

Saturation – intencity or amount of grey.

From a screen, the eye perceives the color based on the amount of light in sub-pixels inside a single pixel.

RGB Notation – 256 value for the amount of each colour.

Hex Notation – 2-digit value for each colour, still 256 possible values.

The problem is that it is difficult to tell what colour you’re referring to without looking it up, so now we have…

HSL Notation – Hue, Saturation, Lightness but not available in IE8 or older.

Really the way to go if you’re just picking a random colour. Unfortunately if starting in a program (such as Photoshop), usually easier to work with Hex or RGB

RGBa Notation – adding alpha, which measures opacity or transparency

Can also apply opacity in CSS, but applies to the entire element, not just the applied colour.

How the Colour Looks on the Screen

Not everyone sees the same colour!

The most obvious is a form of colour blindness or colour deficiency.

Browser or device might be in greyscale (e.g. Kindle).

Don’t rely purely on colour to convey your message.

Mac has a “use greyscale” option for

Perception of Colour can be different. Differences in gender depending on how eyes have developed.

Language and culture changes the perception of colour. Some languages use the same word for orange and red, but lots of words for shades of green.

Screens are calibrated differently, use different technologies, etc. While similar, they might

Amount of light matters, especially environmental light.

Printing changes things. Remember to have print style sheet.

In the Future

CSS4 will allow a media query to change the colour depending on the brightness of the screen.

Now

Need to test in different lightning conditions.

In SASS:

  • colour variables
  • lighten & darken
  • de/saturate
  • greyscale
  • inverse
  • and more

In CSS:

  • blend – can blend image with colour using a blend mode (progressive enhancement example)

How We Think About Colour

We need to put less importance on colour. We already deal with responsive design, so like with colour, we want to find an optimized experience across devices no the same exact experience.

Seth Vincent: css via npm

First need to accept NPM is great for front-end JS. It’s great for CSS too.

Simple workflow

npm i --save cool-css
@import "cool-css";
npm run bundle-css

Can do it with things like bootstrap.

what’s with the bundle-css line?

there are a few tools for bundling css:

  • sheetify
  • rework-npm
  • parcelify

Modular CSS

Might just want some button styles. Modular CSS projects:

  • basscss
  • tachyons
  • suitcss
  • top coat
  • csskit

Can pull just the pieces you like best. Can also do this with preprocessors:

  • cssnext
  • rework
  • postcss

Publishing CSS Modules

  • package.json style properly
  • point to the processor
  • give the ready to use file
  • include source file
  • relative paths to local files

Only a few people doing this right now, so would be great for otheres to join.

Now you publish a CSS module.

http://sethvincent.com/css-via-npm

Una Kravets: Open Source Design: A Call to Arms

Innovations historically has three sources: large corporations, government funding, and open source.

A Story

Example: Bill Gates and Microsoft. By the time he graduated, he logged 10,000 hours, but it was the people around him that made it possible. He had access to a computer.

What kind of world would we be living in if many more people had the same access?

Diversity is bad, but diversity in open source is really bad. ~75% have little to no gender diversity.

The world that we could have is much better than the world we’ve settled for.

Open Source Initiative

Diversity creates better outcomes.

Study show: Both gender and tenure diversity improves productivity, brings different perspectives together.

Where are the designers at?

  1. Taught to make people respect them, to get paid for their time.
  2. Museum Effect: don’t want to brake it, so won’t touch it.
  3. Unfamiliarity Paralysis
  4. Design by committee
  5. Not in the peripheral

What do we do?

  1. Encourage a more open design/dev workflow
  2. Foster design participation in the open source community.

Git.

Usually the reaction is “f*** no”. Even when willing, errors can look daunting.

The way to work through the issues is positive encouragements.

Telling a designer they must learn to code will make them defensive.
Sharing your excitement about code with them will make them curious.

Communication

Tips

  1. Let somebody know that you want their help. e.g. label:design
  2. .md for contributing design.
  3. Clear when writing issues (e.g. use checkboxes).
  4. Use lots of images.

Accessibility

Can somebody get started with using it?

  1. Getting started docs (make sure no one else has to explain it)
  2. Iterate!
  3. Lexison e.g. commonly confusing terms
  4. Visual assets

21% had some gender diversity; 1.5% female contributors – almost matches the studies exactly
63% had documentation, website, demo
26% with gender diversity also had documentation
85% of projects with females who contributed had documentations
100% of projects with 1+ female had documentation

Respect

Design used to be the seasongning you’d sprinkle on for taste, and now it’s the flower you need for the recipe.

Designers are not there just to make a logo, they’re there to work with you and make the project work.

Design builds community.

Empathy

Empathy is an evolutionary tactic. Take care of family members when sick.

Open Source is About People.

Argument culture can create a very toxic culture. One great way to prevent this is feedback guidelines.

  • ask, don’t tell
  • be specific
  • explain yourself
  • offer solutions
  • avoid hyperbole
  • use emojis

Please think about this when working and when working on open source projects.

End of the Day – Tea Time

bunny in a tea cup
Join us tomorrow for CascadiaJS Client side day.

Published by

Cynthia

A librarian learning the ways of technology, accessibility, metadata, and people

Leave a Comment

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s