Skip to content
Firedrake969 edited this page Nov 22, 2015 · 8 revisions

Dev Notes: Things to remember while contributing to Elemental

The following is a list of things (in no particular order) that every Elemental dev must bear in mind. Be sure to return to this list frequently, as it will continue to grow and morph over time.

UX - User Experience

Project Goal

The goal of elemental is to help users progress from Scratch to front-end programming. Elemental should closely match typed web languages, while still being as simple as possible for beginners. Transitioning from Scratch to Elemental should be easy, as should switching from Elemental to typed languages.

It should be impossible, with Elemental, to write code that is difficult to read or is otherwise considered "bad practice". Doing so will teach users how to write good code, rather than just working code (which will be extremely beneficial once the user has transitioned to typed languages.)

UI - User Interface

Colors

The main theme colors of Elemental are Seafoam Green and Slate (a dark gray with a bluish tint). Here are the color codes to use in design:

Seafoam Green:
Hex: #42BA92 Rgb: rgb(66,186,146)

Slate:
Hex: #444C54 Rgb: rgb(68,76,84)

Additional Colors:
White - #fff, rgb(255,255,255)
Dark Slate - #252E35, rgb(37,46,53)
Slate Texture: image This image, used in conjunction with this CSS:

background: linear-gradient(rgba(68,76,84, 0.6), rgba(68,76,84, 0.6)), url([IMG URL]);

BTS - Behind the Scenes

Code Structure / Style Guide

In order to keep code consistent accross the entire site, we have decided upon using Google's Style Guide. The guide explains exactly how to format your code. As long as everyone follows the guide, code will be clean and easy to read!

Style Guide Link: http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml (For a javascript guide, go here.)

Exception: Alphabetising properties in CSS will not be enforced, as it is time consuming and doesn't contribute greatly to readability. Styles should be organized by grouping similar stuff together (e.g..red-button or .green-button)

CSS rules

The more reusable a class is, the better. We use scss and compile to css, so please do nest classes and selectors to make a cleaner, more visual scss file. Don't make any single selector too specific (except for special cases such as the header and footer of the site).

Pushing Code

Every change created to Elemental (aside from minor readme tweaks) must be created as a seperate branch. Never commit to a branch unless the code as been tested, and only submit a pull request to master once the code is ready for production. Never, ever accept your own pull request. No matter how small, always have at least one other person review your code before merging with the master branch. Additionally, code should never be pushed directly to master. Treat the gh-pages branch in a similar way - do not push code there except to update the version of the editor (because gh-pages makes up the LIVE SITE)


That's all for now. Remember to check back every week or so to see if there are new updates! Happy coding. :)

Are you an Elemental Dev? Be sure to read the Dev Notes to make sure you're following the same practices as the rest of us. Reading it may not be exciting, but it's highly important in order for the project to be a success.

Clone this wiki locally