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
[code]
npm i –save cool-css
@import "cool-css";
npm run bundle-css
[/code]
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?
- Taught to make people respect them, to get paid for their time.
- Museum Effect: don’t want to brake it, so won’t touch it.
- Unfamiliarity Paralysis
- Design by committee
- Not in the peripheral
What do we do?
- Encourage a more open design/dev workflow
- 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
- Let somebody know that you want their help. e.g. label:design
- .md for contributing design.
- Clear when writing issues (e.g. use checkboxes).
- Use lots of images.
Accessibility
Can somebody get started with using it?
- Getting started docs (make sure no one else has to explain it)
- Iterate!
- Lexison e.g. commonly confusing terms
- 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
Join us tomorrow for CascadiaJS Client side day.