dotCSS 2016 - Summary

Say goodbye to multiple CSS files for a branding solution

CSS variables can be defined using the --color property

We can define them globally using the :root selector

            :root {
  --color: red;
}

.example-1 {
  background-color: var(--color);
}

.example-2 {
  color: var(--color);
}

.example-3 {
  border: 1px solid var(--color);
}
            

              
foo
bar
baz
            

It is possible to modify the value of the variable in two ways

• Including a CSS file that overrides it

  
                  :root {
    --color: green;
  }
                  

• Updating the value from Javascript

  
                    document.querySelector(':root').style.setProperty('--color', 'green');
                  

It's also a good way for separating the view from the controller

When writing CSS code we don't need to worry about how a variable is calculated

Example

We want to display a progress bar that indicates how much a user has scrolled down

HTML and CSS

              

Lorem ipsum dolor sit amet...
            

              .progress-bar {
  height: 5px;
  width: calc(var(--progress) * 1%);
  background-color: red;
  display: block;
}

.text {
  max-height: 50vh;
  overflow: auto;
}
            

Javascript

              $('.text').scroll(e => {
  let element = e.target;
  let maxScroll = element.scrollHeight - element.clientHeight;
  let currentScroll = element.scrollTop;
  let percentageScroll = currentScroll * 100 / maxScroll;
  document.querySelector('.progress-bar').style.setProperty('--progress', percentageScroll);
});
            

Result

Tired of designing emails that look to have been built 15 years ago?

Email development has evolved a lot, and now it is possible to enjoy things like:

• Responsive design
• Dynamic content
• Fully interactive experiences

Fluid-to-fixed layout

              

  ...

            

Outlook does not support the box model

              

  ...


            

The Fab Four: grid system without media queries

It uses the width, min-width and max-width properties.

When used together, this is how they behave:

4-columns layout in desktop / 1-column layout in mobile

              .column {
  display: inline-block;
  min-width: 25%;
  max-width: 100%;
  width: calc((480px — 100%) * 480);
}
            

Dynamic content

Thanks to the content property, we can write the content of an element in a CSS rule.

              .dynamic::before {
  content: "Content written in CSS";
}
            

We can render empty elements in our emails and then include an external CSS file that will be generated on-demand. This file will have specified the content properties.

This will work only in clients based of WebKit, so we have to include a fallback using a dynamic image for non-WebKit clients.

Interactive emails

The checkbox hack allows us to include interactivity using the :checked pseudo-selector.

.interactive {
  background-color: blue;
}

input {
  display: none;
}

input:checked + .interactive {
  background-color: red;
}
            

With this hack, we can build more complex experiences like an image gallery.

• Example 1
• Example 2

It is possible to build complex shapes just using an empty div and playing aroung with CSS.

:before and :after pseudo-selectors allow us to work actually with three layers.

Another key property is box-shadow, as we can define infinite shadows in a single property.

Example

Let's build the Ebury logo using only1 div

We start rendering just the layout

.ebury-logo {
  display: inline-block;
  background-color: white;
  color: #00465E;
  font-size: 3em;
  width: 300px;
  height: 150px;
  text-align: center;
  position: relative;
}
            

Now, we display the text. The letter-spacing property is for decreasing the space between characters.

.ebury-logo::before {
  content: "Ebury";
  letter-spacing: -7px;
}
            

We have to include an square in order to replace it later with box-shadow. For that, we use another layer we have available, the one selected by the :after pseudo-selector

.ebury-logo::after {
  width: 7px;
  height: 7px;
  background-color: red;
  position: absolute;
  left: 0;
  content: "";
}
            

And finally, we hide the square we included before but using some replicas with the box-shadow property

.ebury-logo::after {
  background-color: transparent;
  box-shadow: 90.75px 31px 0 0 #B4C9D0,
              219px 50px 0 0 #B4C9D0,
              89.5px 15px 0 9px #FFFFFF,
              219px 35px 0 9px #FFFFFF;
}
            

We can do much more than use custom fonts in our web applications

It is possible to modify how the numbers are displayed using font variants

              
1234567890ABC
1234567890abj
            

              .example {
  font-variant-numeric: oldstyle-nums;
}
            

1234567890ABC
1234567890abj

              

  

    

      
112,113.56
    
    

      
89,546.87
    
    

      
286,111.10
    
  

            

              .example {
  font-variant-numeric: tabular-nums;
}
            

              
1/2 3/4 13/27 86/483
            

              .example {
  font-variant-numeric: diagonal-fractions;
}
            

1/2 3/4 13/27 86/483