-
Notifications
You must be signed in to change notification settings - Fork 10
Dev Notes
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.
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.)
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:
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]);
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
)
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).
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.