Styles

https://slides.com/herrherrmann/styles/live

Overview

  • CSS

  • Pre-Processors

  • Organizing Styles

  • Helpful Tools

  • Some general Tips

CSS

  • Cascading Style Sheets
    ​[kæsˌkeɪdɪŋˈstaɪlʃiːts];

  • HTML + CSS = Content + Design

CSf***ingS

Even this presentation is using css to display text and graphics.

„There will never be a CSS4.“

– Tab Atkins, CSS Working Group

// example.css
body {
  color: #051e28;
  background-color: #fbc500;
}

.my-div {
  width: 100px;
  padding: 5px 3px 5px 3px;
  margin: 10px;
}

.my-div span.highlighted {
  color: red;
  border: 1px solid yellow;
}

Example

<!-- index.html -->
<html>
  <head>
    <link 
      rel="stylesheet" 
      type="text/css"
      href="example.css">
  </head>
  <body>
    <div class="my-div"
      style="color: green;">
      Some text.
      <span class="highlighted text">
        Some red text!
      </span>
    </div>
  </body>
</html>

import

inline

Pre-/Post-processors

Pre-/Post-processors

(       )

nesting

// styles.scss
body {
  .header {
    background-color: #fff;

    .header-text {
      font-size: 18px;
    }
  }
}
// styles.css
body .header {
  background-color: #fff;
}
body .header .header-text {
  font-size: 18px;
}

Variables

@font-path: '../assets/fonts';
@default-radius: 5px;
@big-radius: @default-radius + 5px;
@jw-gold: #fbc500;
a {
  color: @jw-gold;

  &:hover {
    color: darken(@jw-gold, 10%);
  }
}

Mixins

// mixin definition
.add-border (@width, @color: #fcb500) {
  border: @width solid @color;
  -webkit-border-radius: @default-radius;
     -moz-border-radius: @default-radius;
          border-radius: @default-radius;
}
// mixin usage
.my-box {
  background-color: #000000;
  .add-border(1px);
}

imports

@import 'variables';
@import '../node_modules/bootstrap/less/bootstrap.less';

checks/Linting

Checks during compilation

Linting (via your Editor)

and more!

color functions,

conditions,

inheritance,

variables via JSON,

…

…but don't over-engineer

organizing styles

BEM

​block__element--modifier

menu__menu-item--active

BEM Links

Atomic Design

Atomic CSS

… not to be confused with:

<div class="Bgc(#0280ae.5) C(#fff) P(20px)">
    Lorem ipsum
</div>

File structure

  • modular
  • re-usable
  • explicit
  • automatic imports
    (via globbing  pages/**/*.scss)

Style Guides

Style Guides

They are helpful for larger projects!

 

There are many tools to help you:
https://github.com/davidhund/styleguide-generators

Helpful Tools

Emmet

  • available for basically all editors (emmet.io)
  • use CSS-like shortcuts to generate HTML:
// write:
.row>.col-xs-3+.col-xs-9
// ... and get:
<div class="row">
    <div class="col-xs-3"></div>
    <div class="col-xs-9"></div>
</div>
// write:
table.table-hover>thead>tr>th*2^^tbody>tr>td*2
// ... and get:
<table class="table-hover">
    <thead>
        <tr>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

Beautify

 html,  body {
  background-color:    $background-color;
   color: $text-color;
  font-family: 'Inconsolata';
} 
// after pretty diff
body,
html {
    background-color: $background-color;
    color           : $text-color;
    font-family     : 'Inconsolata';
}

extensions

  • Check out extensions for your editors, e.g.

CHROME DEV TOOLS

CHROME DEV TOOLS

CHROME DEV TOOLS

Firefox DEV TOOLS

general tips

Don't use IDs

  • … except for site anchors!
<!-- Ok -->
<h1 id="my-headline">
  My Headline
</h1>

<!-- Not ok -->
<div id="my-fancy-element" class="red-border">
  Some content.
</div>

Use flexbox

Use box-sizing

*, *:before, *:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

https://css-tricks.com/international-box-sizing-awareness-day

Some Cool links

Thank you!

@herrherrmann

@herrherrmann

Styles.

By Sebastian Herrmann

Made with Slides.com

Styles.

Styles in the web, so mostly CSS stuff.

  • 2,046

More from Sebastian Herrmann