droidcss 1.0.11 → 1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: b277e9be600edf89b7e608d970e587d8edbaa2d1
-  data.tar.gz: 5fcafb801a68e6817e94ed9a882a5baad0869095
+  metadata.gz: f6691301ddcd3c543ffd37cd40533c5076dd6be5
+  data.tar.gz: b680585e507b7b8da657368873ce3d99b770e7a2
 SHA512:
-  metadata.gz: 5e613776459664e8eaa0db0868be915ae5feceeff86578410a5ecd48d353f54881889083b5f74450aa3ad0d7746f628989b5fdbc58c0e6a14d9374b5a154177f
-  data.tar.gz: c25f1ceb023462c5721828692711dea70c4d798dc69cb771ee669c5fe10f45673cb2fa434a2b164f7659b7e511b3549ee814a94cee3f1753c5ff7d1c6f1cb944
+  metadata.gz: c9123e1ae0d24d1170b62ecb12a46865578408aa7ee68d2841252dc5493f1cd5fce05f8fd1f9a2e9ba5c1f62fa8c890b56f8e709795ad8a299e4b0f1055e870b
+  data.tar.gz: de307f6c41f4da3827797cc24e188bd7b21e0756800d3d569a5517f1beac1b5b7450c6e68e2ca59c9f9f76b43d1af4805d45776eeb78e53565f7ce122a001560

data/CHANGELOG.MD

@@ -1,8 +1,13 @@
+### 1.1 (13 December 2013)
+  * Breaking changes! All the variables names have been changed!
+  * Improved perfomance with calculations
+  * Moved grid settings to the separate file
+
 ### 1.0.11 (09 December 2013)
-  / Edited .row selector
+  * Edited .row selector
 
 ### 1.0.10 (08 December 2013)
-  / Edited assets-pipeline url
+  * Edited assets-pipeline url
 
 ### 1.0.9 (30 November 2013)
   + Added .row & fixed grid cells height
@@ -29,4 +34,4 @@
   + Added licence info
 
 ### 1.0.0 (06 September 2013)
-  / Initial release
+  * Initial release

data/README.md

@@ -1,4 +1,4 @@
-# DroidCSS
+# DroidCSS [![Roadchange](http://roadchange.com/droidlabs/droidcss/badge.png)](http://roadchange.com/droidlabs/droidcss) 
 
 Small responsive framework with grids and couple mixins. We've took the most used mixins from [Bourbon](https://github.com/thoughtbot/bourbon) and added [960px Grids](https://github.com/nathansmith/960-grid-system/) to it. Very light, powerful and fast CSS Grid framework for you to use.
 
@@ -74,41 +74,35 @@ Include path to font files with trailing slash (default is '/assets/fonts/').
 
 Breakpoints for mobile devices, tablets and desktop. To disable of the support of responsive layouts, just remove responsive.scss from style.scss. Here is explanation of the variables:
 
-    $media-mobile-max: breakpoint for mobile devices (default is '767px')
-    $media-tablet-min: breakpoint for tablet minimum width (default is '768px')
-    $media-tablet-max: breakpoint for tablet maximum width (default is '1024px')
-    $media-desktop-min: breakpoint for desktop (default is '1025px')
+    $mediaMobileMax: breakpoint for mobile devices (default is '767px')
+    $mediaTabletMin: breakpoint for tablet minimum width (default is '768px')
+    $mediaTabletMax: breakpoint for tablet maximum width (default is '1024px')
+    $mediaDesktopMin: breakpoint for desktop (default is '1025px')
 
 Media queries example:
 
-    $media-mobile-max: 767px;
-    $media-tablet-min: 768px;
-    $media-tablet-max: 1024px;
-    $media-desktop-min: 1025px;
+    $mediaMobileMax: 767px;
+    $mediaTabletMin: 768px;
+    $mediaTabletMax: 1024px;
+    $mediaDesktopMin: 1025px;
 
-#### grid-width
+#### gridWidth
 
 Default site width. For 960.gs it's 960px
 
-    $grid-width: 960px;
+    $gridWidth: 960px;
 
-#### columns-count
+#### columnsCount
 
-Select 12 or 16 columns for layout (2 types of columns are supported with 960.gs).  The default value is '12' columns.
+Select how many columns in the layout you would like to have (2 types of columns are supported with 960.gs by default: 12 and 16). The default value is '12' columns.
 
-    $columns-count: 12;
+    $columnsCount: 12;
 
-#### gutter-width
+#### gutterWidth
 
 Spacing between the columns (default is '1.04166666666%' which is 10px in 960.gs).
 
-    $gutter-width: 1.04166666666%;
-
-#### column-width
-
-Column width (default is 6). Don't mess with it. In 12 columns layout it's 60px (which is 6), in 16 columns layout it will be 40px (which is 4). Mixin will change it automaticly, just set column with to 12 or 16.
-
-    $column-width: 6;
+    $gutterWidth: 1.04166666666%;
 
 ## Available mixins:
 
@@ -232,6 +226,10 @@ CSS output result:
     :-ms-input-placeholder       { color: #ccc; font-style:italic; } // Internet Explorer 10+
     ::-webkit-input-placeholder  { color: #ccc; font-style:italic; } // Safari and Chrome
 
+Please note. This function can be used only within selector! Example:
+
+    input { @include placeholder(#ccc, italic); }
+
 ## Default classes
 
 Default classes available in *partials/defaults.scss*:
@@ -257,4 +255,4 @@ Feel free to contact us regarding DroidCSS via [twitter](http://twitter.com/droi
 ## Thanks for using DroidCSS
 
 Cheers,
-[DroidLabs](http://droidlabs.pro).
+[DroidLabs](http://droidlabs.pro).

data/lib/droidcss/version.rb

@@ -1,3 +1,3 @@
 module DroidCss
-  VERSION = "1.0.11"
+  VERSION = "1.1"
 end

data/vendor/assets/stylesheets/droidcss/base.scss

@@ -1,3 +1,6 @@
+// Adding default variables
+@import 'droidcss/partials/setup';
+
 // Adding reset
 @import 'droidcss/partials/reset';
 

data/vendor/assets/stylesheets/droidcss/partials/grid.scss

@@ -1,24 +1,5 @@
-// Responsive vars
-$media-mobile-max: 767px !default;
-$media-tablet-min: 768px !default;
-$media-tablet-max: 1024px !default;
-$media-desktop-min: 1025px !default;
-
-// Grid width
-$grid-width: 960px !default;
-$columns-count: 12 !default; // 12 or 16 columns
-$gutter-width: 1.04166666666% !default;
-$column-width: 6 !default; // Column width
-
-// Getting number of columns and setting it's width
-@if $columns-count == 12 {
-  $column-width: 6;
-} @else {
-  $column-width: 4;
-}
-
 .grid-container {
-  max-width: $grid-width;
+  max-width: $gridWidth;
   margin-left: auto;
   margin-right: auto;
   clear: both;
@@ -36,14 +17,14 @@ $column-width: 6 !default; // Column width
 }
 
 .row {
-  margin-right: -$gutter-width;
-  margin-left: -$gutter-width;
+  #{$gutterType}-right: -$gutterWidth;
+  #{$gutterType}-left: -$gutterWidth;
   @include clearfix;
 }
 
 %grid-settings {
-  margin-left: $gutter-width;
-  margin-right: $gutter-width;
+  #{$gutterType}-left: $gutterWidth;
+  #{$gutterType}-right: $gutterWidth;
   float: left;
   min-height: 1px;
   @include box-sizing(border-box);
@@ -53,7 +34,7 @@ $column-width: 6 !default; // Column width
   position: relative;
 }
 
-@for $i from 1 through $columns-count {
+@for $i from 1 through $columnsCount {
   $num: $i;
   .grid-#{$num} {
     @extend %grid-settings;
@@ -63,20 +44,20 @@ $column-width: 6 !default; // Column width
   }
 }
 
-@for $i from 1 through $columns-count {
+@for $i from 1 through $columnsCount {
   $num: $i;
-  $content-width: $num * $gutter-width * $column-width + ($num - 1) * 2 * $gutter-width; // (column number * gutter width * (column width in px + current step - 1) * 2 * gutter width)
-  $content-width-offset: $content-width + 3 * $gutter-width;
-  .grid-#{$num} { width: $content-width; }
-  .prefix-#{$num} { margin-left: $content-width-offset; }
-  .suffix-#{$num} { margin-right: $content-width-offset; }
-  .push-#{$num} { left: $content-width-offset; }
-  .pull-#{$num} { left: -$content-width-offset; }
+  $contentWidth: 100% * ($num/$columnsCount) - 2 * $gutterWidth;
+  $contentWidthOffset: 100% * ($num/$columnsCount) + $gutterWidth;
+  .grid-#{$num} { width: $contentWidth; }
+  .prefix-#{$num} { #{$gutterType}-left: $contentWidthOffset; }
+  .suffix-#{$num} { #{$gutterType}-right: $contentWidthOffset; }
+  .push-#{$num} { left: $contentWidthOffset; }
+  .pull-#{$num} { left: -$contentWidthOffset; }
 }
 
 /* DESKTOP SUPPORT */
 
-@media screen and (min-width: $media-desktop-min) {
+@media screen and (min-width: $mediaDesktopMin) {
   .hide-on-desktop, .only-tablet, .only-mobile {
     display: none !important;
   }
@@ -84,49 +65,49 @@ $column-width: 6 !default; // Column width
 
 /* TABLET SUPPORT */
 
-@media screen and (min-width: $media-tablet-min) and (max-width: $media-tablet-max) {
+@media screen and (min-width: $mediaTabletMin) and (max-width: $mediaTabletMax) {
 
   .grid-container {
     max-width: 100%;
-    padding-left: $gutter-width;
-    padding-right: $gutter-width;
+    #{$gutterTypeTablet}-left: $gutterWidth;
+    #{$gutterTypeTablet}-right: $gutterWidth;
   }
   .hide-on-tablet, .only-desktop, .only-mobile {
     display: none !important;
   }
 
-  @for $i from 1 through $columns-count {
+  @for $i from 1 through $columnsCount {
     $num: $i;
-    $content-width: $num * $gutter-width * $column-width + ($num - 1) * 2 * $gutter-width; // (column number * gutter width * (column width in px + current step - 1) * 2 * gutter width)
-    $content-width-offset: $content-width + 3 * $gutter-width;
-    .grid-tablet-#{$num} { width: $content-width; }
-    .prefix-tablet-#{$num} { margin-left: $content-width-offset; }
-    .suffix-tablet-#{$num} { margin-right: $content-width-offset; }
-    .push-tablet-#{$num} { left: $content-width-offset; }
-    .pull-tablet-#{$num} { left: -$content-width-offset; }
+    $contentWidth: 100% * ($num/$columnsCount) - 2 * $gutterWidth;
+    $contentWidthOffset: 100% * ($num/$columnsCount) + $gutterWidth;
+    .grid-tablet-#{$num} { width: $contentWidth; }
+    .prefix-tablet-#{$num} { #{$gutterTypeTabletOffset}-left: $contentWidthOffset; }
+    .suffix-tablet-#{$num} { #{$gutterTypeTabletOffset}-right: $contentWidthOffset; }
+    .push-tablet-#{$num} { left: $contentWidthOffset; }
+    .pull-tablet-#{$num} { left: -$contentWidthOffset; }
   }
 }
 
 /* MOBILE SUPPORT */
 
-@media screen and (max-width: $media-mobile-max) {
+@media screen and (max-width: $mediaMobileMax) {
   .grid-container {
     max-width: 100%;
-    padding-left: $gutter-width;
-    padding-right: $gutter-width;
+    #{$gutterTypeMobile}-left: $gutterWidth;
+    #{$gutterTypeMobile}-right: $gutterWidth;
   }
   .hide-on-mobile, .only-desktop, .only-tablet {
     display: none !important;
   }
 
-  @for $i from 1 through $columns-count {
+  @for $i from 1 through $columnsCount {
     $num: $i;
-    $content-width: $num * $gutter-width * $column-width + ($num - 1) * 2 * $gutter-width; // (column number * gutter width * (column width in px + current step - 1) * 2 * gutter width)
-    $content-width-offset: $content-width + 3 * $gutter-width;
-    .grid-mobile-#{$num} { width: $content-width; }
-    .prefix-mobile-#{$num} { margin-left: $content-width-offset; }
-    .suffix-mobile-#{$num} { margin-right: $content-width-offset; }
-    .push-mobile-#{$num} { left: $content-width-offset; }
-    .pull-mobile-#{$num} { left: -$content-width-offset; }
+    $contentWidth: 100% * ($num/$columnsCount) - 2 * $gutterWidth;
+    $contentWidthOffset: 100% * ($num/$columnsCount) + $gutterWidth;
+    .grid-mobile-#{$num} { width: $contentWidth; }
+    .prefix-mobile-#{$num} { #{$gutterTypeMobileOffset}-left: $contentWidthOffset; }
+    .suffix-mobile-#{$num} { #{$gutterTypeMobileOffset}-right: $contentWidthOffset; }
+    .push-mobile-#{$num} { left: $contentWidthOffset; }
+    .pull-mobile-#{$num} { left: -$contentWidthOffset; }
   }
 }

data/vendor/assets/stylesheets/droidcss/partials/setup.scss

@@ -0,0 +1,17 @@
+// Responsive vars
+$mediaMobileMax: 767px !default;
+$mediaTabletMin: 768px !default;
+$mediaTabletMax: 1024px !default;
+$mediaDesktopMin: 1025px !default;
+
+// Grids settings
+$gridWidth: 960px !default;
+$columnsCount: 12 !default;
+
+// Gutters
+$gutterWidth: 1.04166666666% !default;
+$gutterType: margin !default;
+$gutterTypeTablet: padding !default;
+$gutterTypeTabletOffset: margin !default;
+$gutterTypeMobile: padding !default;
+$gutterTypeMobileOffset: margin !default;

data/vendor/assets/stylesheets/droidcss.css

@@ -185,6 +185,24 @@ nav ul li {
   padding: 0;
 }
 
+::selection {
+  text-shadow: none;
+  color: #333;
+  background: #FF9;
+}
+
+::-moz-selection {
+  text-shadow: none;
+  color: #333;
+  background: #FF9;
+}
+
+::-webkit-selection {
+  text-shadow: none;
+  color: #333;
+  background: #FF9;
+}
+
 .hide, .hidden {
   display: none;
 }
@@ -243,10 +261,21 @@ nav ul li {
   clear: both;
 }
 
+.row {
+  margin-right: -1.04167%;
+  margin-left: -1.04167%;
+}
+.row:after {
+  content: '';
+  display: table;
+  clear: both;
+}
+
 .grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12 {
   margin-left: 1.04167%;
   margin-right: 1.04167%;
   float: left;
+  min-height: 1px;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: droidcss
 version: !ruby/object:Gem::Version
-  version: 1.0.11
+  version: '1.1'
 platform: ruby
 authors:
 - Ilya Gorenburg
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-12-08 00:00:00.000000000 Z
+date: 2013-12-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -57,6 +57,7 @@ files:
 - vendor/assets/stylesheets/droidcss/partials/defaults.scss
 - vendor/assets/stylesheets/droidcss/partials/grid.scss
 - vendor/assets/stylesheets/droidcss/partials/reset.scss
+- vendor/assets/stylesheets/droidcss/partials/setup.scss
 homepage: https://github.com/droidlabs/droidcss
 licenses:
 - MIT