Contribute Style Guide

There are four main bits of content on the website:

Each page is made from Markdown files which are hosted on github. Jekyll downloads these files when the website is built.

If you run a company or have made something cool, feel free to add it.

Github Repositories

These are the github repositories that host the files. There is more information about how to contribute in the README.md file in the repository.

The how to section is being prepared. Royalty-free images and permissions are being sought.

General Info

Each howto, program and component page has a teaser image which previews the page’s content. The source of this is a 720x420px PNG file. This file is resized to different sizes for use around the website.

The file name should be the same as the article’s .md file.

If your teaser image is a video, just put it in the /teaser/ folder. It should have the same 2:1 ratio (ideally 500x250px) and follow the naming convention above. Thumbnails wil be extracted and it will be encoded for use automagically.

Add Blog Posts

Adding a file to the blog repository will create a new blog post.

File Names

A file named 14-05-2016-microbit-news-and-information.md would render on the website as https://microbit-playground.co.uk/blog/microbit-news-and-information.

The date provided is used by Jekyll.

Images

Images are in the images/ folder. They are preceded by the file name of the blog post. If an image of cat was used in the example above, the filename would be /images/14-05-2016-microbit-net-and-information-cat-picture.jpg.

Metadata

There are some other options:

Add a Component Page

The component pages are built from this git repository.

File Name

A filename of ultrasound-distance-sensor.md would create a url as https://microbit-playground.co.uk/components/ultrasound-distance-sensor.

A ‘teaser’ image called ultrasound-distance-sensor.png must go in the /components/teaser/ directory. File size dimensions should match the files already in the folder.

Images

Images are in the images/ folder. They are preceded by the file name of the component page name.

Include images with standard markdown, eg:

![Push Button](images/button-push-button.png){:.ui .image}

The braces ({:.ui .image}) are for semantic ui. It makes them responsive and look nice on mobile phones.

Image Example

If your file was called ultrasound-distance-sensor.md

An image used in the article would be named ultrasound-distance-sensor-picture-of-sensor.png and reside in the ‘images` folder.

Metadata

Add a ‘How To’ Page

As above

Add a Python Program Page

As above

Style

A list of the styles used in this website. See the markdown file to see how they’re done.

Kitchen Sink

Semantic UI is exposed if you want to use it. Below is an example of how this is used the website:

Lists

  • This is
  • a
  • list
  1. number one
  2. number two
  3. number three

Tables

Compact Basic Table

Header Cell 1Header Cell 2
Accelerometer0x1D
Hello0x0E

Normal Table

Header Cell 1Header Cell 2
Accelerometer0x1D
Hello0x0E

Code Examples

Code is formatted with backticks.

Sections of code can be formatted with triple backticks:

This is example of
using backticks
in markdown.

Code can be highlighted. It supports any language used by Rouge

def say(words)
  puts words
end

say("This")
say("is")
say("highlighted")
say("ruby code.")

Images

A Regular Image

Just a regular image

A Fluid Image

A fluid image

A fluid image takes up the width of the container.

A Medium Rounded Right Floated Image

A fluid image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non mattis augue, in porttitor odio. Donec eu tortor ut nulla imperdiet varius. Nullam ante leo, interdum a dignissim at, congue sed lacus. Cras in malesuada lectus, sit amet condimentum leo. Vivamus non ex ligula. Curabitur non vulputate ex. Pellentesque nisi leo, sollicitudin sed neque sit amet, ullamcorper ultricies tortor. Nam tincidunt feugiat dui vitae venenatis. Fusce vehicula ullamcorper diam, vel malesuada velit ullamcorper ac. Etiam cursus felis metus, a sodales erat pharetra at.

A Small Left Floated Image

A fluid image

Vestibulum mollis libero nulla, a pellentesque erat consequat euismod. Vestibulum volutpat vitae nunc ut finibus. Sed eget sodales ipsum, quis elementum dolor. Phasellus pharetra nisi ante, sit amet dapibus mauris auctor sed. Curabitur facilisis mauris quis dictum sollicitudin. Duis eget metus non dui feugiat vestibulum ac luctus felis. Ut sit amet nisl id nisi dignissim malesuada. Proin tempus, lectus gravida vestibulum malesuada, ligula erat accumsan quam, ut blandit nisl turpis vitae velit. Ut sit amet odio purus.

Tabs

This is the content of Tab 1. Mardown is forced on.

This is the content of Tab2. I really should make this easier!