rtpl-compass 1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: bf494aa3d857c47d0b4d5c9e7ec59f8a79c26ead
+  data.tar.gz: e7d3e8ea4c0842dea3666c708f8b4f93609a8fd2
+SHA512:
+  metadata.gz: 3a6e6a5b20fd3a3daa21f8590d92f67c44fb682d5ddbc4ee37d756293d7e97463247a5f11ef147d69e6e5874e496d4beb63c00779eba3b9601d9420d63480b30
+  data.tar.gz: c22d8bbabb1a1deaa15913c69523c53715d8189e613135ccf013b8b41183adeb64c15a29ff08fb9b531d15988e2a1d88c95659f7eac3edb1016fde514728122b

data/README.md

@@ -0,0 +1,102 @@
+Compass VikingR Template
+========================
+
+Version
+----
+1.0
+
+License
+----
+MIT
+
+Installation
+--------------
+```sh
+gem install rtpl-compass
+```
+
+Create project
+--------------
+```sh
+compass create my_project -r rtpl-compass --using rtpl-compass
+```
+
+####This will create a my_project directory containing the following files:
+```sh
+my_project
+|
+|config.rb ***********************************// Settings for Compass
+|index.html **********************************// HTML template
+|index.php ***********************************// Showcase of the project
+|readme.txt **********************************// Notes
+|screenshot.jpg ******************************// Screenshot of the project
+|compass_watch.bat ***************************// Console command "compass watch"
+|css *****************************************// Stylesheets directory
+    |dev.css *********************************// Css for developers
+|fonts ***************************************// Fonts directory
+|ie-old **************************************// Cap for old IE
+    |images
+        |as.jpg
+        |bg_span_wol.gif
+        |f.jpg
+        |gc.jpg
+        |h.jpg
+        |ie.jpg
+        |mf.jpg
+        |op.jpg
+        |td1.jpg
+        |td2.jpg
+        |td3.jpg
+    |favicon.ico
+    |index.html
+|images **************************************// Images directory
+    |bg **************************************// Directory with background images
+    |icons ***********************************// Directory with icons for sprite
+    |required ********************************// Directory with required images
+        |loading.gif *************************// Image load when necessary image is loading
+        |noimg.jpg ***************************// Image load when necessary image not found
+    |temp ************************************// Directory with temporary images
+    |favicon.png *****************************// Favicon for the project
+|js ******************************************// Javascripts directory
+    |full ************************************// Directory for not compressed scripts
+        |example.js **************************// Example scripts for the project, default "commented out"
+        |rform.js ****************************// JavaScript library for forms, default "commented out"
+        |scripts.js **************************// All scripts for the project, default "commented out"
+        |ph.min.js ***************************// Compressed script for placeholders in IE9 and Opera
+    |min *************************************// Directory for compressed scripts
+        |head.min.js *************************// JavaScript library what make the only script in HEAD (*1*)
+        |jquery.fancybox.min.js ********// Compressed JavaScript library for FancyBox, default "unconnected" (*2*)
+        |ph.js *******************************// Script for placeholders in IE9 and Opera
+    |init.js *********************************// Adding HeadJS to the project
+|sass ****************************************// Sass directory
+    |source **********************************// Source directory for styles
+        |bl
+            |_content.sass *******************// Styles for content
+            |_footer.sass ********************// Styles for footer
+            |_header.sass ********************// Styles for header
+        |lib
+            |mixins
+            |_mixins.sass ********************// Mixins sass file
+                |_animations.sass ************// Mixins for animations
+                |_background.sass ************// Mixins for background
+                |_base.sass ******************// Base mixins
+                |_browsers.sass **************// Mixins for browsers
+                |_fonts.sass *****************// Mixins for typography
+                |_forms.sass *****************// Mixins for formstyle
+                |_gridsystem.sass ************// Gridsystem mixins
+                |_media.sass *****************// Media query mixins
+                |_positions.sass *************// Mixins for positions
+                |_sprites.sass ***************// Mixins for sprites
+                |_width.sass *****************// Mixins for width
+            |_default.sass *******************// Default classes
+        |plugins
+            |_jquery.fancybox.sass ***********// Styles for FancyBox, default "unconnected" (*2*)
+            |_rforms.sass ********************// Styles for rforms, default "unconnected"
+        |_buttons.sass ***********************// Styles for buttons
+        |_formstyle.sass *********************// Styles for forms
+        |_global.sass ************************// Global styles
+        |_reset.sass *************************// Reset styles
+        |_typography.sass ********************// Styles for typography
+    |index.sass ******************************// Main sass file
+```
+*<a href="http://headjs.com/">1</a>*, *<a href="http://www.fancyapps.com/fancybox/">2</a>*

data/lib/config.rb

@@ -0,0 +1,5 @@
+http_path = '../'
+relative_assets = false
+line_comments = false
+output_style = :expanded
+preferred_syntax = :sass

data/lib/rtpl-compass.rb

@@ -0,0 +1,60 @@
+# All gems that are required for this extension to work should go here.
+# These are the requires you would normally put in your config.rb file
+# By default, you should always included Compass. Do not include your
+#  extension.
+require 'compass'
+
+Compass.add_project_configuration(File.join(File.dirname(__FILE__), 'config.rb'))
+
+# This tells Compass what your Compass extension is called, and where to find
+#  its files
+# Replace 'extension' with the name of your extension. Spaces allowed.
+
+extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
+
+Compass::Frameworks.register(
+    'rtpl-compass',
+    :path => extension_path
+)
+
+
+# Version and date of version for your Compass extension.
+# Replace Extension with the name of your extension
+#  Letters, numbers, and underscores only
+#  Version is a number. If a version contains alphas, it will be created as
+#    a prerelease version
+#  Date is in the form of YYYY-MM-DD
+module Extension
+  VERSION = "1.0"
+  DATE = "2015-02-25"
+end
+
+module Compass
+  module AppIntegration
+    module StandAlone
+      module ConfigurationDefaults
+        def default_project_type
+          :stand_alone
+        end
+
+        def javascripts_dir_without_default
+          "js"
+        end
+
+        def css_dir_without_default
+          "css"
+        end
+
+      end
+
+    end
+  end
+end
+
+# This is where any custom SassScript should be placed. The functions will be
+#  available on require of your extension without the need for users to import
+#  any partials. Uncomment below.
+
+# module Sass::Script::Functions
+
+# end

data/templates/project/css/dev.css

@@ -0,0 +1,3 @@
+/*
+css for developers
+*/

data/templates/project/files/compass_watch.bat

@@ -0,0 +1 @@
+cmd /K compass watch

data/templates/project/files/readme.txt

@@ -0,0 +1,36 @@
+-- Styles --
+Все стили хранятся в css/index.css.
+Стили писались на SASS и собраны в один файл с помощью Compass.
+
+--->>> Если дальнейшая работа с SASS вестись не будет, при желании можно удалить папки sass, .sass-cache и файл config.rb (настройки compass).
+Для добавления новых стилей настоятельно рекомендую использовать dev.css (css/dev.css).
+Перед началом работы с ним, его нужно активировать в шапке index.html.
+
+-- JS --
+Скрипты подключены через head.min.js (http://headjs.com/).
+Все библиотеки и скрипты перечислены в js/init.js.
+В папке min - все сжатые скрипты.
+В папке full - все полные скрипты.
+Полный путь к папке со скриптами задается в переменнной "paths.source" в js/init.js, ст.6.
+Основная библиотека JavaScript -> jQuery.
+
+-- Исключения --
+1) Если у пользователя браузер IE7 и ниже, будет загружаться заглушка (папка ie-old), с просьбой обновить браузер или загрузить любой другой.
+2) Если у пользователя браузер IE8, будет загружаться html5.js, который призван корректно отображать теги HTML5 (https://github.com/aFarkas/html5shiv).
+3) Если у пользователя браузер IE (<=9) или opera, будет загружаться ph.min.js, который призван корректно отображать placeholder в полях ввода.
+Полный скрипт -> full/ph.js.
+4) Каждая html страница может иметь свой уникальный класс в теге <html>. По этому классу можно подгружать отдельные файлы стилей и скриптов, исключительно для этих страниц.
+
+-- Images --
+icons - Папка с иконками. Также ее использует compass для создания спрайта.
+bg - Папка с фоновыми изображениями.
+required - Папка с вспомогательными изображениями.
+temp - Папка с временными изображениями (статическими изображениями постов и т.п.). После интеграции верстки ее можно удалить.
+
+-- Fonts --
+Папка для сторонних шрифтов.
+
+--Plugins--
+В шаблоне используются вспомогательные библиотеки:
+1) fancyBox (http://www.fancyapps.com/fancybox/) - мощная библиотека для реализации модальных окон и лайтбоксов. Для реализации в коммерческих проектах нужно читать лицензию (http://sites.fastspring.com/fancyapps/product/store)
+2) rForms - библиотека для реализации кастомных елементов форм.

data/templates/project/ie-old/index.html

@@ -0,0 +1,175 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Old Internet Explorer</title>
+    <meta charset="UTF-8">
+    <meta name="description" content="Old Internet Explorer">
+    <meta name="keywords" content="Old Internet Explorer">
+    <link rel="icon" href="favicon.ico" type="image/x-icon">
+    <link rel="shortcut icon" href="favicon.ico">
+    <style>
+*{margin:0;padding:0}html{height:100%;margin-bottom:1px}body{color:#333;text-align:left;font:13px Tahoma, Helvetica, Geneva, sans-serif;background:#dbf3fd}a{color:#005987;font:13px Tahoma, Helvetica, Geneva, sans-serif;outline:0}a:hover{text-decoration:none}p{line-height:1.5em;margin:0 10px 1em 20px;text-indent:0}h1,h2,h3{color:#f3801f;font-weight:normal}h1,h2{font-size:24px;line-height:1.8em;margin:0 0 0.5em 20px}h2{margin-top:20px}h3{font-size:18px}.wrap{margin:auto;width:980px}.wrap img{border:none;vertical-align:inherit}.header,.main,.footer{clear:both}.header{background:url(images/h.jpg) no-repeat top;height:158px}.brows{width:100%;margin:20px 0}.brows td{height:133px;padding-bottom:30px;vertical-align:top}.brows td a{font-size:17px;display:block}tr.brows_name td{text-align:center;height:20px}.return{position:absolute;top:-110px;left:47px}.return a{color:#f3801f;font:26px Tahoma, Helvetica, Geneva, sans-serif}text-decoration:none .return a:hover{text-decoration:underline}.why{width:100%;margin-top:25px}.why p{padding:0;margin:0}.main{background:url(images/bg_span_wol.gif) repeat-y top;position:relative}.footer{background:url(images/f.jpg) no-repeat top;height:131px}.td1,.td2,.td3{width:239px;height:119px;vertical-align:top;padding:15px 65px 0 25px}.td1{background:url(images/td1.jpg) top no-repeat}.td2{background:url(images/td2.jpg) top no-repeat}.td3{background:url(images/td3.jpg) top no-repeat}.qtabs{float:right;color:#666;margin:57px 34px 0 0}.qtabs ul{list-style:none}.qtabs li{float:left;cursor:pointer;padding:0 5px}.qtabs li span:hover{text-decoration:underline}.qtabs li.current span{color:#f3801f}.qtabs li.open p:hover{text-decoration:none}.qtwrapper{height:1%}.qtcontent{width:94%;margin:0 30px;padding:20px 0;display:none}.qtcontent.visible{display:block}
+    </style>
+</head>
+<body>
+<div class="wrap">
+    <div class="header">
+        <div class="qtabs">
+            <ul id="qtabs-ex2" class="tabs">
+                <li class="open current"><span>По-русски</span></li>
+                <li class="closed"><span>English</span></li>
+            </ul>
+        </div>
+    </div>
+    <div class="main" id="current-ex2">
+        <div class="qtcontent visible">
+            <h1>ВНИМАНИЕ! Вы используете устаревший браузер Internet Explorer</h1>
+            <p>Данный сайт построен на передовых, современных технологиях и не поддерживает Internet Explorer данной версии.</p>
+            <p>Настоятельно Вам рекомендуем выбрать и установить любой из современных браузеров. Это бесплатно и займет всего несколько минут.</p>
+            <table class="brows" cellspacing="0">
+                <tbody>
+                    <tr>
+                        <td><noindex><a href="http://www.microsoft.com/windows/Internet-explorer/default.aspx" target="_blank" rel="nofollow"><img src="images/ie.jpg" alt="Internet Explorer"></a></noindex></td>
+                        <td><noindex><a href="http://www.opera.com/download/" target="_blank" rel="nofollow"><img src="images/op.jpg" alt="Opera Browser"></a></noindex></td>
+                        <td><noindex><a href="http://www.mozilla.com/firefox/" target="_blank" rel="nofollow"><img src="images/mf.jpg" alt="Mozilla Firefox"></a></noindex></td>
+                        <td><noindex><a href="http://www.google.com/chrome" target="_blank" rel="nofollow"><img src="images/gc.jpg" alt="Google Chrome"></a></noindex></td>
+                        <td><noindex><a href="http://www.apple.com/safari/download/" target="_blank" rel="nofollow"><img src="images/as.jpg" alt="Apple Safari"></a></noindex></td>
+                    </tr>
+                    <tr class="brows_name">
+                        <td><noindex><a href="http://www.microsoft.com/windows/Internet-explorer/default.aspx" target="_blank" rel="nofollow">Internet Explorer NEW</a></noindex></td>
+                        <td><noindex><a href="http://www.opera.com/download/" target="_blank" rel="nofollow">Opera Browser</a></noindex></td>
+                        <td><noindex><a href="http://www.mozilla.com/firefox/" target="_blank" rel="nofollow">Mozilla Firefox</a></noindex></td>
+                        <td><noindex><a href="http://www.google.com/chrome" target="_blank" rel="nofollow">Google Chrome</a></noindex></td>
+                        <td><noindex><a href="http://www.apple.com/safari/download/" target="_blank" rel="nofollow">Apple Safari</a></noindex></td>
+                    </tr>
+                </tbody>
+            </table>
+            <h2>Почему нужно поменять браузер Internet Explorer старой версии на другой?</h2>
+            <p>
+                Браузер Internet Explorer является не просто браузером старой
+                версии, а устаревшим браузером, браузером старого поколения. Он не может
+                 предоставить все возможности, которые могут предоставить современные
+                браузеры, а скорость его работы в несколько раз ниже! Internet Explorer
+                 не способен корректно отображать большинство сайтов.
+            </p>
+            <p>
+                Если по каким либо причинам Вы не имеете доступа к возможности
+                установки программ, то рекомендуем воспользоваться "portable" версиями
+                браузеров. Они не требуют инсталляции на компьютер и работают с любого
+                диска или вашей флешки: <noindex><a href="http://portableapps.com/apps/internet/firefox_portable" target="_blank" rel="nofollow">Mozilla Firefox</a></noindex> или <noindex><a href="http://portableapps.com/apps/internet/google_chrome_portable" target="_blank" rel="nofollow">Google Chrome</a></noindex>.
+            </p>
+            <table border="0" cellpadding="0" cellspacing="0" width="100%">
+                <tbody>
+                    <tr>
+                        <td class="td1">
+                            <h3>Безопасность</h3>
+                            Использование Internet Explorer старой версии потенциально опасно, так как именно через него доступ в Ваш компьютер имеют вирусы и мошенники.
+                        </td>
+                        <td>&nbsp;</td>
+                        <td class="td2">
+                            <h3>Только факты</h3>
+                            IE6 был выпущен в 2001 году!<br>
+                            IE7 был выпущен в 2006 году!<br>
+                            IE8 был выпущен в 2009 году!<br>
+                            Позже были созданы версии 9, 10, 11
+                        </td>
+                        <td>&nbsp;</td>
+                        <td class="td3">
+                            <h3>Microsoft</h3>
+                            Microsoft, разработчик
+                            Internet<br>
+                            Explorer, прекратила поддержки версий 6,7,8<br>
+                            и рекомендует устанавливать новые версии своего браузера.
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+        <div class="qtcontent">
+            <h1>СAUTION! You are using the out-of-date browser Internet Explorer</h1>
+            <p>This site is built on the advanced, modern technologies and does not support Internet Explorer this version.</p>
+            <p>
+                It is insistently recommended to you to choose and establish any
+                of modern browsers. It is free of charge and also will take only some
+                minutes.
+            </p>
+            <table class="brows" cellspacing="0">
+                <tbody>
+                    <tr>
+                        <td><noindex><a href="http://www.microsoft.com/windows/Internet-explorer/default.aspx" target="_blank" rel="nofollow"><img src="images/ie.jpg" alt="Internet Explorer"></a></noindex></td>
+                        <td><noindex><a href="http://www.opera.com/download/" target="_blank" rel="nofollow"><img src="images/op.jpg" alt="Opera Browser"></a></noindex></td>
+                        <td><noindex><a href="http://www.mozilla.com/firefox/" target="_blank" rel="nofollow"><img src="images/mf.jpg" alt="Mozilla Firefox"></a></noindex></td>
+                        <td><noindex><a href="http://www.google.com/chrome" target="_blank" rel="nofollow"><img src="images/gc.jpg" alt="Google Chrome"></a></noindex></td>
+                        <td><noindex><a href="http://www.apple.com/safari/download/" target="_blank" rel="nofollow"><img src="images/as.jpg" alt="Apple Safari"></a></noindex></td>
+                    </tr>
+                    <tr class="brows_name">
+                        <td><noindex><a href="http://www.microsoft.com/windows/Internet-explorer/default.aspx" target="_blank" rel="nofollow">Internet Explorer NEW</a></noindex></td>
+                        <td><noindex><a href="http://www.opera.com/download/" target="_blank" rel="nofollow">Opera Browser</a></noindex></td>
+                        <td><noindex><a href="http://www.mozilla.com/firefox/" target="_blank" rel="nofollow">Mozilla Firefox</a></noindex></td>
+                        <td><noindex><a href="http://www.google.com/chrome" target="_blank" rel="nofollow">Google Chrome</a></noindex></td>
+                        <td><noindex><a href="http://www.apple.com/safari/download/" target="_blank" rel="nofollow">Apple Safari</a></noindex></td>
+                    </tr>
+                </tbody>
+            </table>
+            <h2>Why it is necessary to change browser IE to another?</h2>
+            <p>
+                Browser Internet Explorer is not simply a browser of the old
+                version, it is an out-of-date browser, a browser of old generation! It
+                cannot give all possibilities which can be given by modern browsers, and
+                 speed of its work is several times lower! Internet Explorer is not
+                capable to display the majority of sites correctly.
+            </p>
+            <table class="why" cellspacing="0">
+                <tbody>
+                    <tr>
+                        <td class="td1">
+                            <h3>Safety</h3>
+                            <p>Using of IE is potentially dangerous. Viruses and fraudsters can get</p>
+                            <p>access to your computer throe use</p>
+                            <p>of this browser.</p>
+                        </td>
+                        <td>&nbsp;</td>
+                        <td class="td2">
+                            <h3>Only facts</h3>
+                            IE6 was released in year 2001.<br>
+                            IE7 was released in year 2006.<br>
+                            IE8 was released in year 2009.<br>
+                            Versions Nr.9, Nr.10 and Nr.11 were released
+                        </td>
+                        <td>&nbsp;</td>
+                        <td class="td3">
+                            <h3>Microsoft</h3>
+                            Microsoft,the developer of<br>
+                            Internet Explorer, has stopped the support for IE versions 6,7,8 and recommends to install new version of Microsoft browser.
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+    <div class="footer"><!-- --></div>
+</div>
+<!--jQuery library-->
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
+<script>
+    (function($) {
+        $(function tabs(){
+            var settings = {
+                tab : '.tabs',
+                tabCurrent : 'current',
+                tabSection : '.wrap',
+                tabContent : '.qtcontent'
+            };
+            $(settings.tab).delegate('li:not(.'+settings.tabCurrent+')', 'click', function() {
+                var $el = $(this);
+                $el
+                    .addClass(settings.tabCurrent)
+                    .siblings().removeClass(settings.tabCurrent)
+                    .parents(settings.tabSection).find(settings.tabContent).eq($el.index()).fadeIn(150)
+                    .siblings(settings.tabContent).hide();
+            });
+        });
+    })(jQuery)
+</script>
+</body>
+</html>

data/templates/project/index.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en" class="home">
+<head>
+  <meta charset="UTF-8">
+  <title>HTML</title>
+  <meta name="description" content="">
+  <meta name="author" content="">
+  <!-- Mobile Specific Metas -->
+  <!-- <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"> -->
+  <!-- CSS style -->
+  <link rel="stylesheet" href="css/index.css?v=1">
+  <!-- CSS for developers -->
+  <!-- <link rel="stylesheet" href="css/dev.css?v=1" media="screen"> -->
+  <!-- Scripts -->
+  <script data-headjs-load="js/init.js" src="js/min/head.min.js"></script>
+</head>
+<body>
+  <header role="banner" class="header container"></header>
+  <div role="main" class="content container">
+    <section role="section" class="main-section"></section><!--end main-section-->
+  </div><!--end content-->
+  <footer role="contentinfo" class="footer container"></footer><!--end footer-->
+</body>
+</html>

data/templates/project/index.php

@@ -0,0 +1,79 @@
+<?php
+$templateName = themeName();
+function themeName(){
+  $themeNameDir = dirname(__FILE__);
+  $themeNameArr = explode("/", $themeNameDir);
+  $themeNameVar = end($themeNameArr);
+  return $themeNameVar;
+}
+?>
+<!DOCTYPE HTML>
+<html lang="en-US">
+<head>
+  <meta charset="UTF-8">
+  <title><?=$templateName?></title>
+  <meta name="description" content="HTML&amp;CSS template">
+  <meta name="author" content="Sergii Rudchyk">
+  <!-- Mobile Specific Metas -->
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
+  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
+  <style>
+  body{
+    background-color: #fafafa;
+    font: 1rem Arial, Helvetica, sans-serif;
+  }
+  a{
+    color: #287fc3;
+  }
+  a:hover{
+    text-decoration: none;
+  }
+  .theme-container{
+    max-width: 940px;
+    margin: auto;
+  }
+  .theme-thumbnail,
+  .theme-title{
+    text-align: center
+  }
+  .theme-thumbnail{
+    padding: 1em;
+  }
+  .theme-thumbnail-pic{
+    box-shadow: 0 0 15px #ccc;
+    max-width: 100%;
+  }
+  .theme-list{
+    max-width: 500px;
+    margin: auto;
+    padding-bottom: 1em;
+  }
+  @media only screen and (max-width: 1024px) {
+    .theme-list{
+      padding: 0 1em;
+    }
+  }
+  .fa{
+    font-size: 11px;
+  }
+  </style>
+</head>
+<body>
+  <div class="theme-container">
+    <h1 class="theme-title"><?=$templateName?></h1>
+    <ul class="theme-list">
+    <?php
+      if ($handle = opendir('.')) {
+        foreach (glob("*.html") as $filename) {
+          echo "<li class='theme-item'><a href='$filename' target='_blank' class='theme-item-link'>$filename</a> <i class='fa fa-external-link'></i></li>";
+        }
+        closedir($handle);
+      }
+     ?>
+    </ul>
+    <div class="theme-thumbnail">
+      <img src="screenshot.jpg" alt="<?=$templateName?>" class="theme-thumbnail-pic">
+    </div>
+  </div>
+</body>
+</html>

data/templates/project/js/full/example.js

@@ -0,0 +1 @@
+$(document).ready(function() {});

data/templates/project/js/full/ph.js

@@ -0,0 +1,33 @@
+(function($){
+  $("input[placeholder], textarea[placeholder]").each(function(){
+    var that = this;
+    if (hasClass(document.documentElement, 'ie') && that.placeholder && 'placeholder' in document.createElement(that.tagName)) return;
+    var placeholder = that.getAttribute('placeholder'),
+        input = $(that),
+        placeholderClass = 'text-placeholder';
+    if (that.value === '' || that.value == placeholder) {
+      input.addClass(placeholderClass);
+      that.value = placeholder;
+    }
+    input
+    .focus(function(){
+      if (input.hasClass(placeholderClass)) {
+        this.value = '';
+        input.removeClass(placeholderClass);
+      }
+    })
+    .blur(function(){
+      if (this.value === '') {
+        input.addClass(placeholderClass);
+        this.value = placeholder;
+      } else {
+        input.removeClass(placeholderClass);
+      }
+    });
+    that.form && jQuery(that.form).submit(function(){
+      if (input.hasClass(placeholderClass)) {
+        that.value = '';
+      }
+    });
+  });
+})($);