susyboot 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 70b6315b9a9728cf12db9b1693a4305283dabfd4
+  data.tar.gz: b142ac6a2d568e3ffceb5ae4af771c94362d09aa
+SHA512:
+  metadata.gz: 2650a2356d6bad7dfaf7c37d0bcbfd7a580ab4b939ea8e1d75061df3affa452fc7d9d3d8746610e7b7cb40c94285dd9c2e94fd287e9ddf78f25a06090d4a3db8
+  data.tar.gz: 9cc0bddba5b2b506adfda6b8b584c3e5fe3a634f9242b9a70da24f21c746d771f19ec8d441ae7500c400e6f8d0964edcb075e0f8be85879a1df90f166d7e0af2

data/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Konstantin Komelin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/README.md

@@ -0,0 +1,61 @@
+# Susyboot
+Susy-powered Bootstrap grid replacement
+
+Goals
+---
+- Provide content managers with the grid classes, which they are familiar with
+- Make the move from Bootstrap 3 grid to Susy 2 grid smooth
+
+Note
+---
+It is not a pixel-perfect replacement because of the differences in calculating gutters.
+The gutters have fixed size in Bootstrap (15px). In Susy, they are calculated dynamically.
+
+Features
+---
+
+- The classes you know and like: 
+  - .container, .container-fluid
+  - .row 
+  - .col-xs-{n}, .col-sm-{n}, .col-md-{n}, .col-lg-{n}
+  - .col-xs-offset-{n}, .col-sm-offset-{n}, .col-md-offset-{n}, .col-lg-offset-{n}
+  - .col-xs-pull-{n}, .col-sm-pull-{n}, .col-md-pull-{n}, .col-lg-pull-{n}
+  - .col-xs-push-{n}, .col-sm-push-{n}, .col-md-push-{n}, .col-lg-push-{n}
+
+Example
+---
+Compare output of [test_bootstrap.html](https://github.com/kkomelin/susyboot/blob/master/examples/test_bootstrap.html) and
+[test_susyboot.html](https://github.com/kkomelin/susyboot/blob/master/examples/test_susyboot.html).
+
+Please note that the gutters are different. Read [this note](#note) for more detail.
+
+How to use
+---
+
+**CSS:**
+
+Just include [susyboot.css](https://github.com/kkomelin/susyboot/blob/master/css/susyboot.css) into your page head:
+```
+<link href="css/susyboot.css" type="text/css" rel="stylesheet" media="all" />
+```
+
+**SASS:**
+
+We are planning publishing a Ruby gem in the future.
+For now, simply copy [susyboot.css](https://github.com/kkomelin/susyboot/blob/master/css/susyboot.css) into your sass or scss folder,
+change the extension to **scss** and import as usual:
+```
+@import "susyboot";
+```
+
+Roadmap
+---
+- Fix nested column margin
+- Make the project available as a gem
+
+Normalize.css
+---
+For improved cross-browser rendering,
+we use the same version of [Normalize.css](http://necolas.github.io/normalize.css/),
+a project by [Nicolas Gallagher](https://twitter.com/necolas)
+and [Jonathan Neal](https://twitter.com/jon_neal), which is included in Bootstrap.

data/VERSION

@@ -0,0 +1 @@
+0.1.0

data/lib/susyboot.rb

@@ -0,0 +1,8 @@
+base_directory  = File.expand_path(File.join(File.dirname(__FILE__), '..'))
+susyboot_stylesheets_path = File.join(base_directory, 'scss')
+
+if ENV.has_key?("SASS_PATH")
+  ENV["SASS_PATH"] = ENV["SASS_PATH"] + File::PATH_SEPARATOR + susyboot_stylesheets_path
+else
+  ENV["SASS_PATH"] = susyboot_stylesheets_path
+end

data/scss/_susyboot.scss

@@ -0,0 +1,49 @@
+// Reset.
+@import "susyboot/normalize";
+@import "susy";
+@import "susyboot/variables";
+@import "susyboot/settings";
+@import "susyboot/mixins";
+
+// Container class.
+.container {
+  @include sb-make-default-container();
+
+  @media (min-width: $screen-sm-min) {
+    @include container($container-sm)
+  }
+  @media (min-width: $screen-md-min) {
+    @include container($container-md)
+  }
+  @media (min-width: $screen-lg-min) {
+    @include container($container-lg)
+  }
+}
+
+// Fluid container.
+.container-fluid {
+  @include sb-make-default-container();
+}
+
+// Row class.
+.row {
+  @include sb-make-row;
+}
+
+// Add all column-level classes for extra small screens and up.
+@include sb-make-grid('xs', $grid-columns);
+
+// Add all column-level classes for small screens and up.
+@media screen and (min-width: $screen-sm-min) {
+  @include sb-make-grid('sm', $grid-columns);
+}
+
+// Add all column-level classes for middle screens and up.
+@media screen and (min-width: $screen-md-min) {
+  @include sb-make-grid('md', $grid-columns);
+}
+
+// Add all column-level classes for large screens and up.
+@media screen and (min-width: $screen-lg-min) {
+  @include sb-make-grid('lg', $grid-columns);
+}

data/scss/susyboot/_mixins.scss

@@ -0,0 +1,88 @@
+// Set background and border to a block in order to debug the grid.
+@mixin debug-cell() {
+  background-color: rgba(86,61,124,.15);
+  border: 1px solid rgba(86,61,124,.2);
+}
+
+// Generate column classes, for example col-md-[n].
+@mixin sb-add-column-classes($class, $grid-columns) {
+  @for $i from 1 through $grid-columns {
+    .col-#{$class}-#{$i} {
+      @include span($i of $grid-columns);
+      min-height: 1px;
+      position: relative;
+    }
+  }
+}
+
+// Generate offset classes, for example col-md-offset-[n].
+@mixin sb-add-offset-classes($class, $grid-columns) {
+  @for $i from 0 through $grid-columns {
+    .col-#{$class}-offset-#{$i} {
+      @include pre($i of $grid-columns);
+    }
+  }
+}
+
+// Generate pull classes, for example col-md-pull-[n].
+@mixin sb-add-pull-classes($class, $grid-columns) {
+  @for $i from 0 through $grid-columns {
+    @if ($i > 0) {
+      .col-#{$class}-pull-#{$i} {
+        right: percentage(($i / $grid-columns));
+      }
+    }
+    @else if ($i == 0) {
+      .col-#{$class}-pull-0 {
+        right: auto;
+      }
+    }
+  }
+}
+
+// Generate push classes, for example col-md-push-[n].
+@mixin sb-add-push-classes($class, $grid-columns) {
+  @for $i from 0 through $grid-columns {
+    @if ($i > 0) {
+      .col-#{$class}-push-#{$i} {
+        left: percentage(($i / $grid-columns));
+      }
+    }
+    @else if ($i == 0) {
+      .col-#{$class}-push-0 {
+        left: auto;
+      }
+    }
+  }
+}
+
+// Add properties to a container.
+@mixin sb-make-default-container() {
+  @include container();
+  padding: 0 gutter();
+  @include susy-clearfix;
+}
+
+// Add properties to a row.
+@mixin sb-make-row() {
+  margin: 0 gutter() * -1;
+
+  @if $debug == true {
+    & > div {
+      @include debug-cell;
+    }
+  }
+  @include susy-clearfix;
+}
+
+// Generate all column-level classes.
+@mixin sb-make-grid($class, $grid-columns) {
+  // Column classes for extra small screens and up.
+  @include sb-add-column-classes($class, $grid-columns);
+  // Offset classes for extra small screens and up.
+  @include sb-add-offset-classes($class, $grid-columns);
+  // Pull classes for extra small screens and up.
+  @include sb-add-pull-classes($class, $grid-columns);
+  // Push classes for extra small screens and up.
+  @include sb-add-push-classes($class, $grid-columns);
+}

data/scss/susyboot/_normalize.scss

@@ -0,0 +1,424 @@
+/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
+
+//
+// 1. Set default font family to sans-serif.
+// 2. Prevent iOS and IE text size adjust after device orientation change,
+//    without disabling user zoom.
+//
+
+html {
+  font-family: sans-serif; // 1
+  -ms-text-size-adjust: 100%; // 2
+  -webkit-text-size-adjust: 100%; // 2
+}
+
+//
+// Remove default margin.
+//
+
+body {
+  margin: 0;
+}
+
+// HTML5 display definitions
+// ==========================================================================
+
+//
+// Correct `block` display not defined for any HTML5 element in IE 8/9.
+// Correct `block` display not defined for `details` or `summary` in IE 10/11
+// and Firefox.
+// Correct `block` display not defined for `main` in IE 11.
+//
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+  display: block;
+}
+
+//
+// 1. Correct `inline-block` display not defined in IE 8/9.
+// 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+//
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block; // 1
+  vertical-align: baseline; // 2
+}
+
+//
+// Prevent modern browsers from displaying `audio` without controls.
+// Remove excess height in iOS 5 devices.
+//
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+//
+// Address `[hidden]` styling not present in IE 8/9/10.
+// Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
+//
+
+[hidden],
+template {
+  display: none;
+}
+
+// Links
+// ==========================================================================
+
+//
+// Remove the gray background color from active links in IE 10.
+//
+
+a {
+  background-color: transparent;
+}
+
+//
+// Improve readability of focused elements when they are also in an
+// active/hover state.
+//
+
+a:active,
+a:hover {
+  outline: 0;
+}
+
+// Text-level semantics
+// ==========================================================================
+
+//
+// Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+//
+
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+
+//
+// Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+//
+
+b,
+strong {
+  font-weight: bold;
+}
+
+//
+// Address styling not present in Safari and Chrome.
+//
+
+dfn {
+  font-style: italic;
+}
+
+//
+// Address variable `h1` font-size and margin within `section` and `article`
+// contexts in Firefox 4+, Safari, and Chrome.
+//
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+//
+// Address styling not present in IE 8/9.
+//
+
+mark {
+  background: #ff0;
+  color: #000;
+}
+
+//
+// Address inconsistent and variable font size in all browsers.
+//
+
+small {
+  font-size: 80%;
+}
+
+//
+// Prevent `sub` and `sup` affecting `line-height` in all browsers.
+//
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+// Embedded content
+// ==========================================================================
+
+//
+// Remove border when inside `a` element in IE 8/9/10.
+//
+
+img {
+  border: 0;
+}
+
+//
+// Correct overflow not hidden in IE 9/10/11.
+//
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+// Grouping content
+// ==========================================================================
+
+//
+// Address margin not present in IE 8/9 and Safari.
+//
+
+figure {
+  margin: 1em 40px;
+}
+
+//
+// Address differences between Firefox and other browsers.
+//
+
+hr {
+  box-sizing: content-box;
+  height: 0;
+}
+
+//
+// Contain overflow in all browsers.
+//
+
+pre {
+  overflow: auto;
+}
+
+//
+// Address odd `em`-unit font size rendering in all browsers.
+//
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+// Forms
+// ==========================================================================
+
+//
+// Known limitation: by default, Chrome and Safari on OS X allow very limited
+// styling of `select`, unless a `border` property is set.
+//
+
+//
+// 1. Correct color not being inherited.
+//    Known issue: affects color of disabled elements.
+// 2. Correct font properties not being inherited.
+// 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+//
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit; // 1
+  font: inherit; // 2
+  margin: 0; // 3
+}
+
+//
+// Address `overflow` set to `hidden` in IE 8/9/10/11.
+//
+
+button {
+  overflow: visible;
+}
+
+//
+// Address inconsistent `text-transform` inheritance for `button` and `select`.
+// All other form control elements do not inherit `text-transform` values.
+// Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+// Correct `select` style inheritance in Firefox.
+//
+
+button,
+select {
+  text-transform: none;
+}
+
+//
+// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+//    and `video` controls.
+// 2. Correct inability to style clickable `input` types in iOS.
+// 3. Improve usability and consistency of cursor style between image-type
+//    `input` and others.
+//
+
+button,
+html input[type="button"], // 1
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button; // 2
+  cursor: pointer; // 3
+}
+
+//
+// Re-set default cursor for disabled elements.
+//
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+//
+// Remove inner padding and border in Firefox 4+.
+//
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+//
+// Address Firefox 4+ setting `line-height` on `input` using `!important` in
+// the UA stylesheet.
+//
+
+input {
+  line-height: normal;
+}
+
+//
+// It's recommended that you don't attempt to style these elements.
+// Firefox's implementation doesn't respect box-sizing, padding, or width.
+//
+// 1. Address box sizing set to `content-box` in IE 8/9/10.
+// 2. Remove excess padding in IE 8/9/10.
+//
+
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box; // 1
+  padding: 0; // 2
+}
+
+//
+// Fix the cursor style for Chrome's increment/decrement buttons. For certain
+// `font-size` values of the `input`, it causes the cursor style of the
+// decrement button to change from `default` to `text`.
+//
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+//
+// 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+// 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
+//
+
+input[type="search"] {
+  -webkit-appearance: textfield; // 1
+  box-sizing: content-box; //2
+}
+
+//
+// Remove inner padding and search cancel button in Safari and Chrome on OS X.
+// Safari (but not Chrome) clips the cancel button when the search input has
+// padding (and `textfield` appearance).
+//
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+//
+// Define consistent border, margin, and padding.
+//
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+//
+// 1. Correct `color` not being inherited in IE 8/9/10/11.
+// 2. Remove padding so people aren't caught out if they zero out fieldsets.
+//
+
+legend {
+  border: 0; // 1
+  padding: 0; // 2
+}
+
+//
+// Remove default vertical scrollbar in IE 8/9/10/11.
+//
+
+textarea {
+  overflow: auto;
+}
+
+//
+// Don't inherit the `font-weight` (applied by a rule above).
+// NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+//
+
+optgroup {
+  font-weight: bold;
+}
+
+// Tables
+// ==========================================================================
+
+//
+// Remove most spacing between table cells.
+//
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+}

data/scss/susyboot/_settings.scss

@@ -0,0 +1,9 @@
+$susy: (
+        columns: $grid-columns,
+        gutter-position: inside,
+        /* Tells Susy to use border-box */
+        global-box-sizing: border-box,
+);
+
+/* Makes border-box properties */
+@include border-box-sizing;

data/scss/susyboot/_variables.scss

@@ -0,0 +1,36 @@
+//** Number of columns in the grid.
+$grid-columns:              12 !default;
+//** Padding between columns. Gets divided in half for the left and right.
+$grid-gutter-width:         30px !default;
+
+//== Media queries breakpoints.
+//
+//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
+
+// Small screen / tablet.
+$screen-sm-min:              768px !default;
+
+// Medium screen / desktop.
+$screen-md-min:              992px !default;
+
+// Large screen / wide desktop.
+$screen-lg-min:              1200px !default;
+
+//== Container sizes
+//
+//## Define the maximum width of `.container` for different screen sizes.
+
+// Small screen / tablet
+//** For `$screen-sm-min` and up.
+$container-sm:                 (720px + $grid-gutter-width) !default;;
+
+// Medium screen / desktop
+//** For `$screen-md-min` and up.
+$container-md:                 (940px + $grid-gutter-width) !default;
+
+// Large screen / wide desktop
+//** For `$screen-lg-min` and up.
+$container-lg:                 (1140px + $grid-gutter-width) !default;
+
+// Debug.
+$debug: false !default;

metadata

@@ -0,0 +1,80 @@
+--- !ruby/object:Gem::Specification
+name: susyboot
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Konstantin Komelin
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2016-05-04 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: sass
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.3.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.3.0
+- !ruby/object:Gem::Dependency
+  name: susy
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 2.2.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 2.2.0
+description: Susy-powered Bootstrap grid replacement
+email: konstantin@komelin.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- LICENSE
+- README.md
+- VERSION
+- lib/susyboot.rb
+- scss/_susyboot.scss
+- scss/susyboot/_mixins.scss
+- scss/susyboot/_normalize.scss
+- scss/susyboot/_settings.scss
+- scss/susyboot/_variables.scss
+homepage: https://github.com/kkomelin/susyboot
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.5.1
+signing_key: 
+specification_version: 4
+summary: Susyboot
+test_files: []