CSS Conf Europe

View CSS Conf Europe

The site has a heavy use of SVG which is great to see. SVG, or Scalable Vector Graphic, allows your site design to scale crisply across a variety of viewports and pixel density screens while not requiring the user to download increasingly larger images.

I was surprised at some of the CSS that was being used on a production website, specifically the use of CSS Variables on the site. Maybe I shouldn’t have been surprised though, after all, it was a site for a CSS Conference! For a long time we’ve been setting these kinds of variables within a CSS preprocessor like Sass or Less, but now we have pretty good browser support to allow us to include these kinds of variables within the CSS itself as you can see from the snippet of the CSS file below.

:root {
  --ff-sans-serif-regular: "GT Walsheim Pro Regular",sans-serif;
  --ff-sans-serif-medium: "GT Walsheim Pro Medium",sans-serif;
  --color-white: #fff;
  --color-black: #000;
  --color-off-white: #fbfaf6;
  --color-white-grey: #f6f6f6;
  --color-grey-dark: #2b2b2b;
  --color-salmon: #ff6d56;
  --color-red: #ea3a3a;
  --color-mint: #42cdb2;
  --color-green: #3ec446;
  --color-yellow: #ffe90a;
  --color-yellow-50: #fde093;
  --color-yolk: #fbc227;
  --color-rose: #fa99b4;
  --color-plum: #544ebf;
  --color-blue: #2176ff;
  --color-blue-70: #639fff;
  --color-blue-dark: #21303b;
  --color-blue-light: #5ccaeb;
  --vertical-factor: .5rem;
  --fraction: .375rem;
  --height-top-bar: 3.777rem;
  --highlight-vstart: 0.4em;
  --highlight-vend: 0.9em;
  --highlight-color: #ffe90a;
  --highlight-color: var(--color-yellow);
  --highlight-range: 100%
}

Once you’ve set a variable you can then call on it in your CSS using the following syntax (also taken from the CSS Dev Conference CSS file).

body {
  font-family: GT Walsheim Pro Regular,sans-serif;
  font-family: var(--ff-sans-serif-regular);
  font-size: .875rem;
  line-height: 1.7143;
  color: #2b2b2b;
  color: var(--color-grey-dark);
  font-weight: 400
}
.h1,h1 {
  font-size: 2.5rem;
  line-height: 1;
  margin-bottom: 2rem;
  margin-bottom: calc(4 * var(--vertical-factor))
}

The astute readers will have noticed that where ever a CSS variable is being used there is a regular value for that above it. This is because the browser support is good, but it’s not universal. By declaring that value and then defining it through the variable it allows you to first target all browsers, and then target browsers that have support of CSS Variables.

Why do both?

Well by including these as variables allows you to define user defined elements that will override the standard design elements (there’s an excelled article about this by Una Kravets).

Layout & CSS

Bootstrap is being used for the Grid layout and the Flexbox version is the preferred option of the floats (naturally).

The CSS is also taking on an atomic CSS approach where almost every CSS property is pulled out into its own rule.

For example the footer text is centered which is accomplished through the following:

<footer class="footer bg--blue-dark tc">
*/ Footer Contnet /*
</div>

…and in the CSS we have a series of classes to define text-align

.tl {
  text-align: left
}

.tr {
  text-align: right
}

.tc {
  text-align: center
}

On one hand it allows you to see what styles are applied to the element by looking at the classes, but on the other hand, it can get out of hand with the number of classes applied to an element and you have to know what .tc means.

Media Queries

There are two different styles of media queries written for this site. One with just the plain (min-width:30rem) and the other with only screen and (min-width:30rem). To me, this looks like the screen version is lifted directly from the Bootstrap while the others are hand written by the CSS Devs on the project. The only inclusion used to be so that newer browsers would render the content found within that rule block, however the older browsers would not recognise only and skip the whole block. Nowadays that’s not required.

The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.

– From Example 9 in the CSS3 Media Query Spec on the W3C
There’s also a cool technique implemented for the Style Guide which I could see in the CSS. At each particular breakpoint the CSS will output the active breakpoint…. for example:

content: "No breakpoint active"; */ before any media queries /*
content: "We're on breakpoint SMALL"; */40rems /*
content: "We're on breakpoint MEDIUM"; */50rems /*
content: "We're on breakpoint LARGE"; */64rems /*
content: "We're on breakpoint HUGE"; */110rems /*

CSS Conf Europe Technical Details

Site Meta Tag

<meta name="viewport" content="width=device-width, initial-scale=1">

Media Queries

@media (min-width:30rem) { }

@media only screen and (min-width:30rem) { }

@media (min-width:40rem) { }

@media (min-width:50em) { }

@media (min-width:64rem) { }

@media only screen and (min-width:64rem) { }

@media screen and (min-width:70.75rem) { }

@media screen and (min-width:73.75rem) { }

@media only screen and (min-width:73.75rem) { }

@media only screen and (min-width:87.5rem) { }

@media (min-width:87.5rem) { }

@media (min-width:110rem) { }

@media (max-width:30rem) { }