diff --git a/README.md b/README.md index 06457d74d0..7accd57903 100644 --- a/README.md +++ b/README.md @@ -7,6 +7,8 @@ dynamically add and remove elements from the grid. More at [http://gridster.net/](http://gridster.net/). +### Live Preview at: [http://dsmorse.github.io/gridster.js/](http://dsmorse.github.io/gridster.js/) + [Releases](https://github.com/dsmorse/gridster.js/releases) [CHANGELOG](https://github.com/dsmorse/gridster.js/blob/master/CHANGELOG.md) diff --git a/sample/SwapDrop.html b/sample/SwapDrop.html new file mode 100644 index 0000000000..bdc2ca050f --- /dev/null +++ b/sample/SwapDrop.html @@ -0,0 +1,59 @@ + + + + + Gridster Grid Swapping Demo + + + + + + + + + + + + +
<< Menu
+ +
+

This demo represents using the branch in swap mode. This works best with shift_larger_widgets_down set to "false". However, smaller widgets do + not displace larger ones.

+
+
+ +
+ + diff --git a/sample/css/main.css b/sample/css/main.css index 183e1f27cf..8777993ddb 100755 --- a/sample/css/main.css +++ b/sample/css/main.css @@ -1,26 +1,4 @@ -/* - * HTML5 Boilerplate - * - * What follows is the result of much research on cross-browser styling. - * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, - * Kroc Camen, and the H5BP dev community and team. - */ - -/* ========================================================================== - Base styles: opinionated defaults - ========================================================================== */ - -html, -button, -input, -select, -textarea { - color: #222; -} - body { - font-size: 1em; - line-height: 1.4; background: #004756; } @@ -36,11 +14,11 @@ body { } .gridster, .content, .gridster2 { +/* width: 940px; margin: 0 auto; - +*/ opacity: .8; - -webkit-transition: opacity .6s; -moz-transition: opacity .6s; -o-transition: opacity .6s; @@ -52,12 +30,8 @@ body { color: white; } -.content p { - margin: 25px; -} - -.gridster .gs_w, .gridster2 .gs_w { - background: #FFF; +.gridster .gs-w, .gridster2 .gs-w { + background: #FFFFFF; cursor: pointer; -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3); box-shadow: 0 0 5px rgba(0,0,0,0.3); @@ -69,7 +43,7 @@ body { } -.gridster .gs_w.try, .gridster2 .gs_w.try { +.gridster .gs-w.try, .gridster2 .gs-w.try { background-image: url(../img/sprite.png); background-repeat: no-repeat; background-position: 37px -169px; @@ -84,281 +58,11 @@ body { li { list-style: none; + font-weight: bold } -/* - * Remove text-shadow in selection highlight: h5bp.com/i - * These selection declarations have to be separate. - * Customize the background color to match your design. - */ - -::-moz-selection { - background: #b3d4fc; - text-shadow: none; -} - -::selection { - background: #b3d4fc; - text-shadow: none; -} - -/* - * A better looking default horizontal rule - */ - -hr { - display: block; - height: 1px; - border: 0; - border-top: 1px solid #ccc; - margin: 1em 0; - padding: 0; -} - -/* - * Remove the gap between images and the bottom of their containers: h5bp.com/i/440 - */ - -img { - vertical-align: middle; -} - -/* - * Remove default fieldset styles. - */ - -fieldset { - border: 0; - margin: 0; - padding: 0; -} - -/* - * Allow only vertical resizing of textareas. - */ - -textarea { - resize: vertical; -} - -/* ========================================================================== - Chrome Frame prompt - ========================================================================== */ - -.chromeframe { - margin: 0.2em 0; - background: #ccc; - color: #000; - padding: 0.2em 0; -} - -/* ========================================================================== - Author's custom styles - ========================================================================== */ - - - - - - - - - - - - - - - - - -/* ========================================================================== - Helper classes - ========================================================================== */ - -/* - * Image replacement - */ - -.ir { - background-color: transparent; - border: 0; - overflow: hidden; - /* IE 6/7 fallback */ - *text-indent: -9999px; -} - -.ir:before { - content: ""; - display: block; - width: 0; - height: 150%; -} - -/* - * Hide from both screenreaders and browsers: h5bp.com/u - */ - -.hidden { - display: none !important; - visibility: hidden; -} - -/* - * Hide only visually, but have it available for screenreaders: h5bp.com/v - */ - -.visuallyhidden { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; -} - -/* - * Extends the .visuallyhidden class to allow the element to be focusable - * when navigated to via the keyboard: h5bp.com/p - */ - -.visuallyhidden.focusable:active, -.visuallyhidden.focusable:focus { - clip: auto; - height: auto; - margin: 0; - overflow: visible; - position: static; - width: auto; -} - -/* - * Hide visually and from screenreaders, but maintain layout - */ - -.invisible { - visibility: hidden; -} - -/* - * Clearfix: contain floats - * - * For modern browsers - * 1. The space content is one way to avoid an Opera bug when the - * `contenteditable` attribute is included anywhere else in the document. - * Otherwise it causes space to appear at the top and bottom of elements - * that receive the `clearfix` class. - * 2. The use of `table` rather than `block` is only necessary if using - * `:before` to contain the top-margins of child elements. - */ - -.clearfix:before, -.clearfix:after { - content: " "; /* 1 */ - display: table; /* 2 */ -} - -.clearfix:after { - clear: both; -} - -/* - * For IE 6/7 only - * Include this rule to trigger hasLayout and contain floats. - */ - -.clearfix { - *zoom: 1; -} - - -/* ========================================================================== - EXAMPLE Media Queries for Responsive Design. - Theses examples override the primary ('mobile first') styles. - Modify as content requires. - ========================================================================== */ - -@media only screen and (min-width: 35em) { - /* Style adjustments for viewports that meet the condition */ -} - -@media print, - (-o-min-device-pixel-ratio: 5/4), - (-webkit-min-device-pixel-ratio: 1.25), - (min-resolution: 120dpi) { - /* Style adjustments for high resolution devices */ -} - -/* ========================================================================== - Print styles. - Inlined to avoid required HTTP connection: h5bp.com/r - ========================================================================== */ - -@media print { - * { - background: transparent !important; - color: #000 !important; /* Black prints faster: h5bp.com/s */ - box-shadow: none !important; - text-shadow: none !important; - } - - a, - a:visited { - text-decoration: underline; - } - - a[href]:after { - content: " (" attr(href) ")"; - } - - abbr[title]:after { - content: " (" attr(title) ")"; - } - - /* - * Don't show links for images, or javascript/internal links - */ - - .ir a:after, - a[href^="javascript:"]:after, - a[href^="#"]:after { - content: ""; - } - - pre, - blockquote { - border: 1px solid #999; - page-break-inside: avoid; - } - - thead { - display: table-header-group; /* h5bp.com/t */ - } - - tr, - img { - page-break-inside: avoid; - } - - img { - max-width: 100% !important; - } - - @page { - margin: 0.5cm; - } - - p, - h2, - h3 { - orphans: 3; - widows: 3; - } - - h2, - h3 { - page-break-after: avoid; - } +.gridster-box { + position: relative; + width: 100%; + height: 100%; } diff --git a/sample/index.html b/sample/index.html index d82082fcc0..4ff9fd4838 100644 --- a/sample/index.html +++ b/sample/index.html @@ -1,56 +1,27 @@ - - - - - - - - Gridster Grid Swapping Demo - + + + Gridster Demos - + + + + + - - - - - - - - - -
-

This demo represents using the branch in swap mode. This works best with shift_larger_widgets_down set to "false". However, smaller widgets do not displace larger ones.

-
-
- -
+
+

Samples

+
+ diff --git a/sample/responsive.html b/sample/responsive.html new file mode 100644 index 0000000000..1a4ce8b6c6 --- /dev/null +++ b/sample/responsive.html @@ -0,0 +1,99 @@ + + + + Gridster Responsive Demo + + + + + + + + + + + + + +
<< Menu
+
+

This demo represents using the branch in responsive mode. This makes the grid as wide as the screen and responds to changes in browser width.

+
+
+ +
+ + + +