Skip to content
gh-pages
Switch branches/tags
Code
This branch is up to date with gh-pages.
Contribute

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
css
 
 
img
 
 
 
 
js
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
layout
default

Cape Town Red

HTML and CSS for a Taxi Kata involving Robots (the traffic kind)

How it works

Everything lives inside a div.road: you don't need to change this.

Robots

The first robot looks like this:

{% highlight html%}

{% endhighlight %}

You can change light-go (green) to lights-slowdown (orange) or lights-stop (red).

Other robots need a position:

{% highlight html%}

...
{% endhighlight %}

The position class comes in three flavours: four slots, six slots, or nine slots. Positions are calculated as a percentage of the full width. Specify positions using a x-of-y pattern, for example: one-of-four, two-of-six, three-of-nine.

Taxi(s)

A taxi looks like this, and always needs a position:

{% highlight html%}

{% endhighlight %}

The position class comes in three flavours: four slots, six slots, or nine slots. Positions are calculated as a percentage of the full width. Specify positions using a slot-x-of-y pattern, for example: slot-one-of-four, slot-two-of-six, slot-three-of-nine.

Use the same number of slots for taxis and robots or things will look weird.

About

HTML and CSS for a Taxi Kata involving Robots (the traffic kind)

Resources

License

Releases

No releases published

Packages

No packages published