This is a Sass-based library of responsive Scrabble tiles that can be used as a font on your web site/web app.

The library is available as a Bower package for you to download, or you can clone the repo and modify the Sass files to generate the CSS as you see fit.

Download the Bower package

1. Install Bower:
   npm install -g bower

2. Navigate to the folder where you want to install the scrabble tiles library and type:
   bower install scrabble-tiles

3. Make sure your HTML page has a reference to the CSS file:
   <link rel="stylesheet" href="bower_components/scrabble-tiles/dist/css/scrabble.css">

Usage

Use the following markup for a standard tile:

<div class="scrabble-container">
<span class="scrabble-tile__letter">A<span class="scrabble-tile__number">1</span></span>
</div>

which should look like this:

You can rotate the tile using one of these classes:

scrabble-tile__rotate-nw or scrabble-tile__rotate-ne. The amount of rotation can be set in the _variables.scss Sass partial.

There are also some other utility classes available: scrabble-tile--end-letter applies margin-right to the tile.

scrabble-tile--end-letter__mobile-only applies to 768px and up.

scrabble-tile__new-word applies a clear: both to the tile so that the next tile starts on a new line on smaller screens.

display--inline-block displays the word in the center of the screen (useful for short words that look odd when aligned left)

Contributing

1. Clone the repo: https://github.com/theonicolaou/scrabble-tiles

2. There is a Grunt file which is set up to watch changes to the Sass files and also a built-in local server if you want to test out your changes in one place.
   Navigate to the root of the folder you have cloned into and check you have Grunt installed:

   grunt -v

3. Then, type:

   npm install (this will install all the required Grunt modules)

4. Then, type:

   grunt develop and this should start up a local server at port 8888 with a demo page of the Scrabble tiles.