Solomko2

<div class="wrapper"> 
<div class="main-content">
</div>
</div>
<footer class="page-footer">
</footer>
 
 
/* прибьём футер к низу*/
.wrapper{

Solomko2

// Use Gists to store code you would like to remember later on
console.log(window); // log the "window" object to the console

Solomko2

Libraries

• jQuery - The de-facto library for the modern age. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
• Backbone - Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
• AngularJS - Conventions based MVC framework for HTML5 apps.
• Underscore - Underscore is a utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects.
• lawnchair - Key/value store adapter for indexdb, localStorage

Solomko2

Libraries

• 960 Grid System - An effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.
• Compass - Open source CSS Authoring Framework.
• Bootstrap - Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
• Font Awesome - The iconic font designed for Bootstrap.
• Zurb Foundation - Framework for writing responsive web sites.
• SASS - CSS extension language which allows variables, mixins and rules nesting.
• Skeleton - Boilerplate for responsive, mobile-friendly development.

Guides

Solomko2

/*для IE8 подключаем modernizer*/
<nav class="nav-main">
  <div class="logo">Website</div>
  <ul>
      <li>
          <a href="#" class="nav-item">Amazing</a>
          <div class="nav-content">
              <div class="nav-sub">
                  <ul>
                      <li><a href="#">About us</a></li>

Solomko2

/* monitors and laptops */
@media screen and (min-width: 1240px)  {}

/* tablet */
@media screen and (min-width: 1024px) and (max-width: 1240px)  {}

@media screen and (min-width: 768px) and (max-width: 1024px) {}

/* mobile */
@media screen and (max-width: 768px) {}

Solomko2

(function () {
 
		jQuery('#top_menu li a').on('click', function(){
			var item = $(this).parent().attr('class'),
				tar = $(this).attr('data');
 
			$("html, body").animate({ scrollTop: jQuery(tar).offset().top }, 1000);
		});		
		
	})()

Solomko2

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">Meow</div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">Meow</div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">Meow</div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">Meow</div>
</div>
And this is self compiled:

.productgrid {

Solomko2

Getting Started

Include jQuery
Include jquery.headtacular.js
When the document is ready(), call .headtacular() on the element which you'd like to stick
Example

$('.header').headtactular({ scrollPoint: 100 });

.header {

Solomko2

%clearfix {
  *zoom: 1;
  &:before, &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}