View today.compiled.css
Stronger "today" indicator for date-select mini-calendar.
The current "today" indicator already has bold text, but that might be a bit subtle
for some users (especially those with vision impairments or poor font rendering).
This uses a coloured background and a faint light rim that remains when "today"
is also the selected day, to save users from having to select a different
day to double-check they have correctly selected "today". This also helps
for more instantly noticing the current day when skimming through months.
View i-pledge-to-be-better
# I Pledge To Be Better
I want our industry to be a safe, welcoming and inclusive place for everyone, regardless of
their gender, abilities, skin color, sexual orientation, age, class, neuro-diversity or any other attribute.
I acknowledge that this is not currently the case, and will do my best, to the extent that I can
afford to dedicate to this, to help make ours a better community and industry.
I value the diversity of perspectives that people with different backgrounds bring to the table.
I will call out exclusionary practices, behaviors or cultures and see how, together, we can perhaps
reshape them to be inclusive and supportive instead.
View crossbrowser-alpha-colour.scss
// This lets you specify the colour of the backdrop behind your transparent
// foreground colour - ideally with a variable - so that Sass can use its
// `mix` function to get fake transparency. It looks identical to real
// transparency (for solid-on-solid colour). IE8 can use `filter` to get real
// *background* transparency, but if you use this you can also get
// "transparency" on border-color, font color, and everything else. It
// defaults to the most legitimate transparency available.
// It doesn't expect Modernizr, but it does expect some kind of similar 'IE8'
// class in the `<html>` element, like H5BP's. Can Modernizr detect the old MS

BEM – meaning block, element, modifier – is a front-end naming methodology. CSSWizardry uses a naming scheme based on BEM, but honed by Nicolas Gallagher. The naming convention follows this pattern:

.block {}
.block__element {}
.block--modifier {}
  • .block represents the higher level of an abstraction or component
  • .block__element represents a descendent of .block that helps form .block as a whole
  • .block--modifier represents a different state or version of .block