relatively-sticky

commit

fa3fe3d9d9293dfd226b6094e91e14565ca4ba38

parent

70e6e01cd282d290230f4d256ac9c46bc9f44654

Author

leaf corcoran <leafot@gmail.com>

Date

2013-07-30 16:34

add example site

Diffstat

14 files changed, 372 insertions, 0 deletions

diff --git a/site/.gitignore b/site/.gitignore

@@ -0,0 +1,3 @@
   -1     1 .sitegen_cache
   -1     2 www/*.js
   -1     3 www/*.cs
   -1     3 
\ No newline at end of file

diff --git a/site/example.coffee b/site/example.coffee

@@ -0,0 +1,5 @@
   -1     1 
   -1     2 # make it sticky
   -1     3 $ ->
   -1     4   $("[data-sticky_column]").stick_in_parent()
   -1     5 

diff --git a/site/example.scss b/site/example.scss

@@ -0,0 +1,80 @@
   -1     1 
   -1     2 $viewport_height: 200px;
   -1     3 
   -1     4 body {
   -1     5     margin: 0;
   -1     6     font-family: sans-serif;
   -1     7     font-size: 16px;
   -1     8 }
   -1     9 
   -1    10 h1 {
   -1    11     font-size: 30px;
   -1    12     margin: 10px;
   -1    13 }
   -1    14 
   -1    15 .content {
   -1    16     overflow: hidden;
   -1    17 
   -1    18     &.right {
   -1    19         .sidebar {
   -1    20             float: right;
   -1    21             margin: 10px;
   -1    22             margin-left: 0;
   -1    23         }
   -1    24 
   -1    25         .main {
   -1    26             margin: 10px;
   -1    27             margin-right: 220px;
   -1    28         }
   -1    29     }
   -1    30 
   -1    31     &.double {
   -1    32         .main {
   -1    33             margin-left: 430px + 4;
   -1    34         }
   -1    35     }
   -1    36 
   -1    37     .sidebar {
   -1    38         width: 200px;
   -1    39         height: floor($viewport_height / 3);
   -1    40         margin: 10px;
   -1    41         margin-right: 0;
   -1    42 
   -1    43         border: 1px solid red;
   -1    44         float: left;
   -1    45 
   -1    46         &.alt {
   -1    47             height: floor($viewport_height * (2/3));
   -1    48         }
   -1    49 
   -1    50         &.tall {
   -1    51             height: $viewport_height * 2;
   -1    52         }
   -1    53     }
   -1    54 
   -1    55     .main {
   -1    56         margin: 10px;
   -1    57         margin-left: 220px + 2;
   -1    58 
   -1    59         border: 1px solid blue;
   -1    60         height: $viewport_height * 2;
   -1    61 
   -1    62         &.short {
   -1    63             height: floor($viewport_height * (2/3));
   -1    64         }
   -1    65 
   -1    66         &.tall {
   -1    67             height: $viewport_height * 3;
   -1    68         }
   -1    69     }
   -1    70 }
   -1    71 
   -1    72 .footer {
   -1    73     margin: 10px;
   -1    74     text-align: center;
   -1    75     font-size: 13px;
   -1    76     border-top: 1px dashed #dadada;
   -1    77     color: #666;
   -1    78     padding-top: 10px;
   -1    79     min-height: floor($viewport_height * (2/3));
   -1    80 }

diff --git a/site/examples/1.html b/site/examples/1.html

@@ -0,0 +1,14 @@
   -1     1 
   -1     2 <h1>My Site</h1>
   -1     3 <div class="content" data-sticky_parent>
   -1     4   <div class="sidebar" data-sticky_column>
   -1     5     Welcome to my sidebar
   -1     6   </div>
   -1     7 
   -1     8   <div class="main" data-sticky_column>
   -1     9     This is the main column.
   -1    10   </div>
   -1    11 </div>
   -1    12 <div class="footer">
   -1    13   My very tall footer!
   -1    14 </div>

diff --git a/site/examples/2.html b/site/examples/2.html

@@ -0,0 +1,31 @@
   -1     1 
   -1     2 <h1>My Better Site</h1>
   -1     3 
   -1     4 <div class="content double" data-sticky_parent>
   -1     5   <div class="sidebar" data-sticky_column>
   -1     6     Welcome to my sidebar
   -1     7   </div>
   -1     8 
   -1     9   <div class="sidebar alt" data-sticky_column>
   -1    10    Another Sticky Item 
   -1    11   </div>
   -1    12 
   -1    13   <div class="main" data-sticky_column>
   -1    14     This is the main column.
   -1    15   </div>
   -1    16 </div>
   -1    17 
   -1    18 <div class="content right" data-sticky_parent>
   -1    19   <div class="sidebar" data-sticky_column>
   -1    20     Welcome to my sidebar
   -1    21   </div>
   -1    22 
   -1    23   <div class="main" data-sticky_column>
   -1    24     This is the main column.
   -1    25   </div>
   -1    26 </div>
   -1    27 
   -1    28 
   -1    29 <div class="footer">
   -1    30   My very tall footer!
   -1    31 </div>

diff --git a/site/examples/3.html b/site/examples/3.html

@@ -0,0 +1,14 @@
   -1     1 
   -1     2 <h1>My Other Site</h1>
   -1     3 <div class="content" data-sticky_parent>
   -1     4   <div class="sidebar tall" data-sticky_column>
   -1     5     Welcome to my sidebar
   -1     6   </div>
   -1     7 
   -1     8   <div class="main short" data-sticky_column>
   -1     9     This is the main column.
   -1    10   </div>
   -1    11 </div>
   -1    12 <div class="footer">
   -1    13   My very tall footer!
   -1    14 </div>

diff --git a/site/examples/4.html b/site/examples/4.html

@@ -0,0 +1,23 @@
   -1     1 
   -1     2 <h1>My Other Site</h1>
   -1     3 <div class="content" data-sticky_parent>
   -1     4   <div class="sidebar tall" data-sticky_column>
   -1     5     <ul>
   -1     6       <li>This sidebar is quite long</li>
   -1     7       <li>This sidebar is quite long</li>
   -1     8       <li>This sidebar is quite long</li>
   -1     9       <li>This sidebar is quite long</li>
   -1    10       <li>This sidebar is quite long</li>
   -1    11       <li>This sidebar is quite long</li>
   -1    12       <li>This sidebar is quite long</li>
   -1    13       <li>This sidebar is quite long</li>
   -1    14     </ul>
   -1    15   </div>
   -1    16 
   -1    17   <div class="main tall" data-sticky_column>
   -1    18     This is the main column.
   -1    19   </div>
   -1    20 </div>
   -1    21 <div class="footer">
   -1    22   My very tall footer!
   -1    23 </div>

diff --git a/site/index.html b/site/index.html

@@ -0,0 +1,91 @@
   -1     1 
   -1     2 <div class="body">
   -1     3 
   -1     4 <h1>Basic Sticking</h1>
   -1     5 
   -1     6 <div class="example">
   -1     7 
   -1     8 $markdown{[[
   -1     9 Just call `stick_in_parent` on the elements you want to be stuck inside of
   -1    10 their parent. Sticky elements "bottom out" so they never leave the container,
   -1    11 no more worrying if a sticky element will accidentally cover your footer.
   -1    12 ]]}
   -1    13 
   -1    14 <div class="example_controls">
   -1    15 <button>Scroll it!</button>
   -1    16 $markdown{[[
   -1    17 ```js
   -1    18 $(".sidebar").stick_in_parent()
   -1    19 ```
   -1    20 ]]}
   -1    21 </div>
   -1    22 <iframe src="$root/examples/1.html" frameborder="0"></iframe>
   -1    23 </div>
   -1    24 
   -1    25 
   -1    26 <h1>Many Sticky Items</h1>
   -1    27 
   -1    28 <div class="example">
   -1    29 
   -1    30 $markdown{[[
   -1    31 Have a lot of sticky columns, or different sticky portions of the page? Call
   -1    32 `stick_in_parent` on all the elements at once.
   -1    33 ]]}
   -1    34 
   -1    35 <div class="example_controls">
   -1    36 <button>Scroll it!</button>
   -1    37 $markdown{[[
   -1    38 ```js
   -1    39 $(".sticky_column").stick_in_parent()
   -1    40 ```
   -1    41 ]]}
   -1    42 </div>
   -1    43 <iframe src="$root/examples/2.html" frameborder="0"></iframe>
   -1    44 </div>
   -1    45 
   -1    46 
   -1    47 <div class="example">
   -1    48 $markdown{[[
   -1    49 Not sure if your sidebar or your main content is taller? Doesn't matter, just
   -1    50 call `stick_in_parent` on all columns. Sticky-kit will only stick items if they
   -1    51 don't take up the entire height of their parent.
   -1    52 ]]}
   -1    53 
   -1    54 <div class="example_controls">
   -1    55 <button>Scroll it!</button>
   -1    56 $markdown{[[
   -1    57 ```js
   -1    58 $(".sidebar, .main_column").stick_in_parent()
   -1    59 ```
   -1    60 ]]}
   -1    61 </div>
   -1    62 <iframe src="$root/examples/3.html" frameborder="0"></iframe>
   -1    63 
   -1    64 </div>
   -1    65 
   -1    66 <h1>Scrollable Sticky Element</h1>
   -1    67 
   -1    68 <div class="example">
   -1    69 $markdown{[[
   -1    70 Sticky elements taller than the viewport can scroll independently up and down,
   -1    71 meaning you don't have to worry about your content being cut off should the
   -1    72 sticky element be too tall or the user's resolution too small.
   -1    73 ]]}
   -1    74 
   -1    75 <div class="example_controls">
   -1    76 <button>Scroll it!</button>
   -1    77 $markdown{[[
   -1    78 ```js
   -1    79 $(".sidebar").stick_in_parent()
   -1    80 ```
   -1    81 ]]}
   -1    82 </div>
   -1    83 <iframe src="$root/examples/4.html" frameborder="0"></iframe>
   -1    84 </div>
   -1    85 
   -1    86 
   -1    87 
   -1    88 
   -1    89 
   -1    90 
   -1    91 </div>

diff --git a/site/main.coffee b/site/main.coffee

diff --git a/site/main.scss b/site/main.scss

@@ -0,0 +1,49 @@
   -1     1 
   -1     2 $site_width: 700px;
   -1     3 
   -1     4 body {
   -1     5     font-family: sans-serif;
   -1     6     font-size: 16px;
   -1     7     margin: 20px;
   -1     8     margin-bottom: 400px;
   -1     9 }
   -1    10 
   -1    11 h1 {
   -1    12     margin: 40px 0;
   -1    13 }
   -1    14 
   -1    15 p {
   -1    16     line-height: 22px;
   -1    17     margin: 20px 0;
   -1    18 
   -1    19     code {
   -1    20         background: #eee;
   -1    21         padding: 2px 4px;
   -1    22         border-radius: 4px;
   -1    23         border: 1px solid darken(#eee, 5%);
   -1    24     }
   -1    25 }
   -1    26 
   -1    27 .body {
   -1    28     width: $site_width;
   -1    29     margin-left: auto;
   -1    30     margin-right: auto;
   -1    31 }
   -1    32 
   -1    33 iframe {
   -1    34     width: 100%;
   -1    35     border: 1px solid silver;
   -1    36     height: 200px;
   -1    37 }
   -1    38 
   -1    39 
   -1    40 .example {
   -1    41     margin: 20px 0;
   -1    42     .example_controls {
   -1    43         button {
   -1    44             margin: 0;
   -1    45             float: right;
   -1    46         }
   -1    47     }
   -1    48 }
   -1    49 

diff --git a/site/site.moon b/site/site.moon

@@ -0,0 +1,21 @@
   -1     1 require "sitegen"
   -1     2 
   -1     3 tools = require"sitegen.tools"
   -1     4 
   -1     5 site = sitegen.create_site =>
   -1     6   @title = "sticky-kit"
   -1     7 
   -1     8   scssphp = tools.system_command "pscss < %s > %s", "css"
   -1     9   coffeescript = tools.system_command "coffee -c -s < %s > %s", "js"
   -1    10 
   -1    11   build scssphp, "main.scss"
   -1    12   build scssphp, "example.scss"
   -1    13 
   -1    14   build coffeescript, "main.coffee"
   -1    15   build coffeescript, "example.coffee"
   -1    16 
   -1    17   add "index.html"
   -1    18   add "examples/1.html", "examples/2.html", "examples/3.html",
   -1    19     "examples/4.html", template: "example"
   -1    20 
   -1    21 site\write!

diff --git a/site/templates/example.html b/site/templates/example.html

@@ -0,0 +1,19 @@
   -1     1 <!DOCTYPE HTML>
   -1     2 <html lang="en">
   -1     3 <head>
   -1     4   <meta charset="UTF-8">
   -1     5   <title>example</title>
   -1     6 
   -1     7   <link rel="stylesheet" href="$root/example.css" />
   -1     8 
   -1     9   <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
   -1    10   <script src="$root/../../jquery.sticky-kit.js"></script>
   -1    11   <script src="$root/example.js"></script>
   -1    12 
   -1    13 </head>
   -1    14 <body>
   -1    15 
   -1    16 $body
   -1    17 	
   -1    18 </body>
   -1    19 </html>

diff --git a/site/templates/index.html b/site/templates/index.html

@@ -0,0 +1,15 @@
   -1     1 <!DOCTYPE HTML>
   -1     2 <html lang="en">
   -1     3 <head>
   -1     4   <meta charset="UTF-8">
   -1     5   <title></title>
   -1     6 
   -1     7   <link rel="stylesheet" href="$root/main.css" />
   -1     8   <script type="text/javascript" src="$root/main.js"></script>
   -1     9 </head>
   -1    10 <body>
   -1    11 
   -1    12 $body
   -1    13 	
   -1    14 </body>
   -1    15 </html>

diff --git a/site/www/.gitignore b/site/www/.gitignore

@@ -0,0 +1,5 @@
   -1     1 examples/1.html
   -1     2 examples/2.html
   -1     3 examples/3.html
   -1     4 examples/4.html
   -1     5 index.htm
   -1     5 
\ No newline at end of file