alexkilgour

alexkilgour

Online resources:

• BrainPop
• Curiosity Stream
• Tynker
• Outschool
• Udemy
• iReady
• Beast Academy (Math)
• Khan Academy
• Creative Bug

alexkilgour

Proposed structure for Oscar frontend

Current: oscar-sites-bmc

https://github.com/springernature/oscar/wiki/working-with-css

oscar-sites-bmc
└── src
    └── main

alexkilgour

Create a template that includes handlebars expressions that all the addition of classes

<!-- button.hbs -->
<a id="{{id}}" data-component="{{jsHook}}" class="c-button {{utilityClasses}} {{extensionClasses}}">
  {{text}}
</a>

You can then extend the component within your app by either adding a utility class, or by extending the component with a modifier

alexkilgour

How we write CSS

Our approach to writing CSS aims to provide a framework for working that allows individual teams the flexibility to make project appropriate decisions within a company wide strcuture. By following a consistent approach across teams we aim to make it easier to move developers around and allow for the easy evolution of our approach within a large company.

We advocate a componentised approach that is designed for scale, is based on SASS (using the SCSS syntax), follows the BEM Methodology, and borrows elements from OOCSS, Utility Classes, and ITCSS.

Architecture

The architecture is split into a series of 'levels' with each level representing a folder that contains our SASS split out into different

alexkilgour

Keybase proof

I hereby claim:

• I am alexkilgour on github.
• I am howlingmad (https://keybase.io/howlingmad) on keybase.
• I have a public key whose fingerprint is 2BCE 7576 861D 7D10 F373 18DD 3CCD EE9B 867E C911

To claim this, I am signing this object:

alexkilgour

/**
*   The  pseudo-element 'content' property doesnt accept normal (») style 
*   HTML entities. These variables below easy the pain of looking up the HEX codes...
*    
*   Referenced from http://www.danshort.com/HTMLentities/
*
*   TODO: Add all the other entities? Worth it? Some day? Maybe?
*/

// Punctuation

alexkilgour

Fenced code blocks inside ordered and unordered lists

1. This is a numbered list.

2. I'm going to include a fenced code block as part of this bullet:

   Code
   More Code
   

alexkilgour

Component javascript hooks

Accessing DOM elements

This should be added to any DOM element you need to access via javascript
Should be added as part of the html not using .data()
Should never be removed or edited
Should be used only to access the element(s)
Names should be lowercase, hyphen separated, descriptive

alexkilgour

// rounding down to specified decimal places
var round = function(value, decimals) {
	return Math.floor(value * Math.pow(10,decimals)) / Math.pow(10,decimals);
}