BB Skeleton

by kyllle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.2/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.1.16/backbone.localStorage-min.js"></script>
<div class="js-page">
    <h1>Static Page</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum repellat temporibus cumque dolores et, ad saepe labore hic debitis, quae nam soluta praesentium voluptatibus dolore eaque veritatis, aspernatur, ipsa libero.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat a sunt voluptatem officia rem aperiam. Est soluta dolorum impedit dignissimos velit eius nesciunt blanditiis ad laborum voluptatem, fuga dolores! Nostrum.</p>
    <br>
    <button class="js-action">Click Me</button>
</div>

SCSS

@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,500);

* {
  -webkit-font-smoothing: antialiased;
}

body {
    font-family: Roboto;
    font-size: 18px;
    padding: 16px;
    line-height: 1.5;
    font-weight: normal;
    color: #ccc;
    background: #292929;
}

h1, h2, h3 {
    font-weight: normal;
}

h1 {
    font-size: 34px;
}

h2 {
    font-size: 24px;
}

.pg-heading {
    margin-bottom: 0;
}

a {
    color: #95baf6;
    transition: opacity .3s;
	
	&:hover {
    	opacity: 0.75;
	}
}

button {
	outline: none;
	background: lightGrey;
	padding: 17px 20px;
	border: #ccc;
	text-transform: uppercase;
	background-color: #3498DB;
	border-bottom: 5px solid #2980B9;
	color: white;
	border-radius: 5px;
    
    &.is-active {
        background: red;
        border-bottom-color: #910B0B;
    }
}

JavaScript

console.clear();

var PageView = Backbone.View.extend({
	
    events: {
    	'click .js-action': 'onActionClick'
    },
    
    onActionClick: function(event) {
    	event.preventDefault();
        
        $(event.currentTarget).addClass('is-active');
    }
});


// view.setElement(element);
var page = (new PageView()).setElement('.js-page');