init commit

website/Boson/HTML/js/isotope/isotope.css

@@ -0,0 +1,72 @@
+.isotope {
+	margin-top: 10px;
+}
+
+.folio-inner {
+	overflow: hidden;
+	background: #fff;
+}
+
+.folio-filter {
+	position: relative;
+	bottom: 0px;
+	display: table;
+	margin: 20px auto 65px;
+	float: none;
+	padding: 0px;
+}
+
+.folio-filter li {
+	display: inline-block;
+	margin-right: 24px;
+	margin-left: 24px;
+}
+
+.folio-filter li:last-child {
+	padding-right: 0px;
+}
+
+.folio-filter li a {
+	display: block;
+	font-family: Raleway;
+	font-size: 13px;
+	font-weight: 600;
+	text-transform: uppercase;
+	color: #666;
+	padding: 0 0px;
+	letter-spacing: 0.15em;
+}
+
+.folio-filter li a span {
+	margin-right: 6px;
+}
+
+.folio-filter li a:hover, .folio-filter li a.selected {
+	color: #000;
+	text-decoration: none;
+}
+	
+/* Isotope Transitions
+------------------------------- */
+/* Note: Design for a width of 480px */
+@media only screen and (max-width: 470px) {
+
+.folio-filter {
+    margin: 50px auto 0px;
+}
+
+.folio-filter li {
+    font-size: 12px;
+    padding: 3px 3px;
+}
+
+}
+
+/* Note: Design for a width of 480px */
+@media only screen and (max-width: 767px) {
+
+.folio-filter {
+    margin: 50px auto 0px;
+}
+
+}

website/Boson/HTML/js/isotope/main.js

@@ -0,0 +1,116 @@
+// Product Filter
+	$(window).load(function() {
+	  "use strict";
+	var $container = $('.portfolio-items');
+	$container.isotope({
+		layoutMode: "masonry",
+		masonry: {
+			columnWidth: 5
+		},
+		itemSelector : '.item',
+		transitionDuration: '0.8s'
+	});
+	var $optionSets = $('.project-filter'),
+		$optionLinks = $optionSets.find('a');
+	$optionLinks.click(function(){
+		var $this = $(this);
+		// don't proceed if already selected
+		if ( $this.hasClass('active') ) {
+			return false;
+		}
+		var $optionSet = $this.parents('.project-filter');
+		$optionSet.find('.active').removeClass('active');
+		$this.addClass('active');
+	// make option object dynamically, i.e. { filter: '.my-filter-class' }
+	var options = {},
+		key = $optionSet.attr('data-option-key'),
+		value = $this.attr('data-option-value');
+		
+	// parse 'false' as false boolean
+	value = value === 'false' ? false : value;
+	options[ key ] = value;
+		if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
+		changeLayoutMode( $this, options );
+	} else {
+		// otherwise, apply new options
+		$container.isotope( options );
+	}    
+	return false;
+	});
+});
+
+
+// Product Filter
+	$(window).load(function() {
+	  "use strict";
+	var $container = $('.newsfeed');
+	$container.isotope({
+		itemSelector : '.newsfeed .item',
+	});
+	var $optionSets = $('.newsfeed-filter'),
+		$optionLinks = $optionSets.find('a');
+	$optionLinks.click(function(){
+		var $this = $(this);
+		// don't proceed if already selected
+		if ( $this.hasClass('active') ) {
+			return false;
+		}
+		var $optionSet = $this.parents('.newsfeed-filter');
+		$optionSet.find('.active').removeClass('active');
+		$this.addClass('active');
+	// make option object dynamically, i.e. { filter: '.my-filter-class' }
+	var options = {},
+		key = $optionSet.attr('data-option-key'),
+		value = $this.attr('data-option-value');
+		
+	// parse 'false' as false boolean
+	value = value === 'false' ? false : value;
+	options[ key ] = value;
+		if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
+		changeLayoutMode( $this, options );
+	} else {
+		// otherwise, apply new options
+		$container.isotope( options );
+	}    
+	return false;
+	});
+});
+
+// Product Filter
+	$(window).load(function() {
+	  "use strict";
+	var $container = $('.portfolio-feed');
+	$container.isotope({
+		itemSelector : '.portfolio-feed .item',
+	});
+	var $optionSets = $('.portfolio-feed-filter'),
+		$optionLinks = $optionSets.find('a');
+	$optionLinks.click(function(){
+		var $this = $(this);
+		// don't proceed if already selected
+		if ( $this.hasClass('active') ) {
+			return false;
+		}
+		var $optionSet = $this.parents('.portfolio-feed-filter');
+		$optionSet.find('.active').removeClass('active');
+		$this.addClass('active');
+	// make option object dynamically, i.e. { filter: '.my-filter-class' }
+	var options = {},
+		key = $optionSet.attr('data-option-key'),
+		value = $this.attr('data-option-value');
+		
+	// parse 'false' as false boolean
+	value = value === 'false' ? false : value;
+	options[ key ] = value;
+		if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
+		changeLayoutMode( $this, options );
+	} else {
+		// otherwise, apply new options
+		$container.isotope( options );
+	}    
+	return false;
+	});
+});
+
+
+