Commits

Kaique Silva  committed 7bde1ca

Applying first adjust to dimensions
Style of theme
structure of html

  • Participants
  • Parent commits 0cbc443

Comments (0)

Files changed (5)

 </head>
 <body>
 <!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
-
-    <div class="navbar navbar-fixed-top">
-      <div class="navbar-inner">
-        <div class="container">
-          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-          </a>
-          <a class="brand" href="#">Simple Press JS</a>
-          <div class="nav-collapse">
-            <ul class="nav">
-              <li class="active"><a href="#">Usage</a></li>
-              <li><a href="#about">Documentation</a></li>
-              <li><a href="#contact">Contact</a></li>
-            </ul>
-          </div><!--/.nav-collapse -->
-        </div>
-      </div>
-    </div>
-
     <div class="container">
     	<header>
-    		<h1>Simple press JS</h1>
+    		<h1 class="stamp title light">Simple press JS</h1>
     		<hr />
     	</header>
 		
     	<div role="main">
-    		<section class="press">
-
-    		</section>
+    		<div class="press">
+          <div class="mask">
+            <div class="slide">
+              <header>
+                <h1 class="stamp">Press test</h1>
+              </header>
+              <div>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+                  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+                  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+                  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+                  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+              </div>
+              <footer>
+                
+              </footer>
+            </div>
+            <div class="slide">
+              <header>
+                <h1 class="stamp">Press test</h1>
+              </header>
+              <div>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+                  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+                  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+                  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+                  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+              </div>
+              <footer>
+                
+              </footer>
+            </div>
+          </div>
+        </div>
     	</div>
 
     	<hr />
 
 		<footer>
-		<p>CC by kaique.developer@gmail.com</p>
+		<p class="stamp center light">CC by kaique.developer@gmail.com</p>
 		</footer>
     </div> <!-- /container -->
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 
 <script src="js/libs/bootstrap/bootstrap.min.js"></script>
 
+<script src="js/jquery.lettering.js"></script>
 <script src="js/simplepress.js"></script>
 <script src="js/script.js"></script>
 <script>

File js/jquery.lettering.js

+/*global jQuery */
+/*!	
+* Lettering.JS 0.6.1
+*
+* Copyright 2010, Dave Rupert http://daverupert.com
+* Released under the WTFPL license 
+* http://sam.zoy.org/wtfpl/
+*
+* Thanks to Paul Irish - http://paulirish.com - for the feedback.
+*
+* Date: Mon Sep 20 17:14:00 2010 -0600
+*/
+(function($){
+	function injector(t, splitter, klass, after) {
+		var a = t.text().split(splitter), inject = '';
+		if (a.length) {
+			$(a).each(function(i, item) {
+				inject += '<span class="'+klass+(i+1)+'">'+item+'</span>'+after;
+			});	
+			t.empty().append(inject);
+		}
+	}
+	
+	var methods = {
+		init : function() {
+
+			return this.each(function() {
+				injector($(this), '', 'char', '');
+			});
+
+		},
+
+		words : function() {
+
+			return this.each(function() {
+				injector($(this), ' ', 'word', ' ');
+			});
+
+		},
+		
+		lines : function() {
+
+			return this.each(function() {
+				var r = "eefec303079ad17405c889e092e105b0";
+				// Because it's hard to split a <br/> tag consistently across browsers,
+				// (*ahem* IE *ahem*), we replaces all <br/> instances with an md5 hash 
+				// (of the word "split").  If you're trying to use this plugin on that 
+				// md5 hash string, it will fail because you're being ridiculous.
+				injector($(this).children("br").replaceWith(r).end(), r, 'line', '');
+			});
+
+		}
+	};
+
+	$.fn.lettering = function( method ) {
+		// Method calling logic
+		if ( method && methods[method] ) {
+			return methods[ method ].apply( this, [].slice.call( arguments, 1 ));
+		} else if ( method === 'letters' || ! method ) {
+			return methods.init.apply( this, [].slice.call( arguments, 0 ) ); // always pass an array
+		}
+		$.error( 'Method ' +  method + ' does not exist on jQuery.lettering' );
+		return this;
+	};
+
+})(jQuery);

File js/script.js

 
 $(function () {
 	SimplePress.start({
-		width: '700px',
-		height: '400px',
+		holder: {
+			width: '100%',
+			height: '600px',
+		},
+		slide: { 
+			width: '700px',
+			height: '500px',
+		}
 	});
 });

File js/simplepress.js

-/* Author: kaique.developer@gmail.com */
-
 var SimplePress = (function ( win, $ ) {
+	/*
+		Make presentations using SimplePress, easy and fastly.
+		@author <a href="mailto:kaique.developer@gmail.com">kaique.developer@gmail.com</a>
+	*/
 	var _ = function () {};
 
 	var core = {
 	};
 
 	core.object.selectProperty = function ( target, selections ) {
+		/*
+			Select itens in object, by key in the @array: selections,
+			using the @variable: target.
+		*/
 		var output = {};
 
 		if ( target && selections ) {
 		return output;
 	};
 
-
 	// Internals
 	_.prototype = {
-		self: this,
 		win: win,
 		jQuery: $,
-		press: [],	
+		press: this.jQuery('.press'),
+		mask: this.jQuery('.press .mask'),
+		slide: this.jQuery('.press .mask .slide'),
+		stamp: this.jQuery('.stamp'),
 	};
 
 	_.prototype.start = function ( settings ) {
-		var output = [],
+		/*
+			Start behavior of presentation
+		*/
+		var output = false,
+			self = this,
+			options = {},
 			settings = settings || {},
-			press = $('.press');
+			stamp = self.stamp,
+			press = self.press,
+			slide = self.slide;
 
 		if ( settings ) {
-			if ( 'width' in settings && 'height' in settings ) {
-				var selectedPropertys = core.object.selectProperty( settings, [ 'width', 'height']);
+			// Apply lettering js 
+			stamp.lettering();
+			// Demensions of presentation
+			options.pressDimensions = core.object.selectProperty( 
+				settings.holder, [
+					'width', 
+				 	'height',
+				]
+			);
+			// Dimensions of slide
+			options.slideDimensions = core.object.selectProperty(
+				settings.slide, [
+					'width',
+					'height'
+				]
+			);
 
-				press.css( selectedPropertys );
+			if ( options.pressDimensions && options.slideDimensions ) {
+				// Add style to press
+				press.css( options.pressDimensions );
+				// Add style to slide
+				slide.css( options.slideDimensions );
 
-				_.prototype.press = output = press;
+				output = true;
 			}
 		}
 

File less/style.less

 @import "bootstrap/responsive.less";
 
 
-/* ===== Primary Styles ========================================================
+/* ===== Primary Styles =====================================================
    Author: kaique.developer@gmail.com
    ========================================================================== */
+.title {
+	color: #753D3D;
+}
 
+.center {
+	text-align: center;
+}
 
+.light {
+	font-weight: 100;
+	letter-spacing: 2px;
+}
 
+.press {
+	position: relative;
+	overflow: hidden;
+}
 
+.press .mask {
+	border: 1px solid red;
+	height:;
+}
 
-
-
-
-
-
-
+.press .slide {
+	width: 700px;
+	height: 400px;
+	display: block;
+	float: left;
+	border: 1px solid red;
+}