abruzzi

<header>
  <nav>
    <ul class="nav-list">
      <li class="list-item">
        <div class="logo">
          <span class="highlight">Game</span>Insider
        </div>
      </li>
      <li class="list-item">
        <a href="#">News</a>

abruzzi

.container {
  max-width: 800px;
  margin: 0 auto;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

h1 {
  text-transform: capitalize;
  color: orangered;
}

abruzzi

.container {
  max-width: 800px;
  margin: 0 auto;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
h1 {
  text-transform: uppercase;
  background-color: orangered;
  color: white;
}

abruzzi

<div class="container">
  <h1>HTML and CSS are awesome</h1>
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. At eum eius sequi dolor consectetur omnis quia
    necessitatibus beatae vero numquam.</p>
</div>

abruzzi

Code is clean if it can be understood easily – by everyone on the team. Clean code can be read and enhanced by a developer other than its original author. With understandability comes readability, changeability, extensibility and maintainability.

---

General rules

1. Follow standard conventions.
2. Keep it simple stupid. Simpler is always better. Reduce complexity as much as possible.
3. Boy scout rule. Leave the campground cleaner than you found it.
4. Always find root cause. Always look for the root cause of a problem.

Design rules

abruzzi

function detailChart(categories) {
    var width = 800,
        height = 800;

    var outerRadius = 300;

    var ratingScale = 45;

    var references = [];

abruzzi

function shapeChart(categories) {
  var width = 200,
    height = 200;

  var outerRadius = 50;

  var ratingScale = 10;

  var angle = d3.scaleLinear()
    .range([0, 2 * Math.PI]);

abruzzi

license: gpl-3.0

abruzzi

license: gpl-3.0

abruzzi

My Awesome Sketch
  First State
    some event -> Second State
  Second State