stolksdorf

Models

Models in XO are just plain Javascript objects with some functions attached.

extend

var ModelDefinition = xo.model.extend({ ... }) Create a new model definition, extend the existing model definition from XO. THis model can then be extended further, much like classes.

extend

var ModelDefinition = xo.model.extend({ ... })

stolksdorf

{
	"start" : "Aug 27th, 2014",
	"end"   : "Sept 2nd, 2017",

	"dayPixelRatio" : 500,
	"events" : [
		{
			"name" : "MacMed Formal",
			"desc" : "Such new friends. Much Excite.",
			"date" : "Aug 29th, 2014",

stolksdorf

# Week 9 - CSS Preprocessors

This week we will be super charging your stlying with CSS preprocessors. CSS is a pretty difficult language to work with, there's no variables, it's hard to group styles together, and reusing the same styles in different places requires you to edit your HTML. Not good. CSS preprocessors are a program (called a compiler) that takes styles written in a better language and translate them to regular CSS for you. There are a few different preprocessors out there, but we are going to be focusing on [LESS](http://lesscss.org/).


### What is LESS

LESS is a *super-set* of CSS, meaning it looks very similar to CSS but adds much more functionality. Here's an example of it:

	@green : #2ecc71;

stolksdorf

Week 9 - CSS Preprocessors

This week we will be super charging your stlying with CSS preprocessors. CSS is a pretty difficult language to work with, there's no variables, it's hard to group styles together, and reusing the same styles in different places requires you to edit your HTML. Not good. CSS preprocessors are a program (called a compiler) that takes styles written in a better language and translate them to regular CSS for you. There are a few different preprocessors out there, but we are going to be focusing on LESS.

What is LESS

LESS is a super-set of CSS, meaning it looks very similar to CSS but adds much more functionality. Here's an example of it:

@green : #2ecc71;

stolksdorf

/* Border & Vignette Setup Test*/
	 
    figure{
      position:               relative;
      display:                block;
      line-height:            0;
      width:                  500px;
      height:                 333px;
      margin-bottom:          2em;
      border:                 1em solid #fff;

stolksdorf

###Pyrus The capital of Silatia. A mecca of trade and politics. It's access to shipping lanes, natrual resources, and wonderful weather made it a beacon for all races alike. Ruled by a benevlovent emporer for the last few generations.

Pyrus grew immensely during and after the conclusion of 'The War of Grain'. The ruling family were able to broker peace and trade aggrements with the city of Breven to provide nearly all the food for Pyrus.

###Breven Breven and it's surrounding, plentiful fields is the oldest city of Silatia. It was engaged in a very long standing war with Pyrus, named 'The War of Grain'. Pyrus wanted Breven to provide the food for the growing city of Pyrus, and Breven refused.

The current Emporer of Pyrus was able to end the war through politics and force. The current trade agreements are still disputed, but it's better than war.

stolksdorf

migrating to vitreum 3

Oh boy. Vitreum3 is big news. Let's get your projects ready to rumble.

computer stuff

• Update npm to 3.3.x and node to 4.2.x
• Add NODE_PATH=/shared to your environment variables.

project modules

• Completely remove palette, prism, and vitreum as submodules from your project. How to

stolksdorf

<div arcBlock = 'todo_item'>
  <input type='checkbox' arc-status='finished'></input>
	<span arc-itemName = 'name'></span>
</div>


<script>


	var newTaskModel = TaskModel.initialize({

stolksdorf

This is simply a test

== HOW DU


  Archetype = archetype ={
		initialize : function(){
			return this;
		},
		create : function(){

stolksdorf

Thalmic JavaScript Style Guide() {

A mostly reasonable approach to JavaScript

Other Style Guides

• React
• CSS & Less

Table of Contents