Skip to content

Commit

Permalink
Added node-sass to compile SASS files and changed the folder struct…
Browse files Browse the repository at this point in the history 
…ure.

Updated © message.
  • Loading branch information
@hefler
hefler committed Apr 16, 2018
1 parent c402fdc commit e238d51
Show file tree
Hide file tree
Showing 8 changed files with 1,825 additions and 104 deletions.
6 changes: 3 additions & 3 deletions bower.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@
"Felipe Hefler", "Zoopit AS"
],
"main": [
"dist/z-grid.css",
"sass/z-grid.scss"
"src/z-grid.scss"
],
"private": true,
"repository": {
"type": "git",
"url": "git://github.com/zoopit/z-grid.git"
Expand All @@ -24,6 +24,6 @@
"ignore": [
".*",
"bower_components",
"config.codekit"
"node_modules"
]
}
302 changes: 206 additions & 96 deletions dist/z-grid.css
View file
Original file line number Diff line number Diff line change
@@ -1,103 +1,213 @@
/*! Copyright (c) 2017 Felipe Hefler/Zoopit AS. This file is part of Z-Grid. Z-Grid is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or any later version. Z-Grid is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. A copy of the GNU General Public License can be found at <http://www.gnu.org/licenses/>. */
.z-grid-row::before, .z-grid-row::after { content: ''; display: block; clear: both; }

.z-grid-row { box-sizing: border-box; }

.z-grid-mosaic, .z-grid-tile, .z-grid-column { box-sizing: border-box; }
/*!
Copyright (c) 2018 Felipe Hefler/Zoopit AS.
This file is part of Z-Grid.
Z-Grid is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
any later version.
Z-Grid is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
A copy of the GNU General Public License can be found at
<http://www.gnu.org/licenses/>.
*/
.z-grid-row::before, .z-grid-row::after {
content: '';
display: block;
clear: both; }

.z-grid-row {
box-sizing: border-box; }

.z-grid-mosaic, .z-grid-tile, .z-grid-column {
box-sizing: border-box; }

/*Percentage columns 1/4 */
.colflex-100p { width: 100%; }

.colflex-100p.z-grid-column:not(:first-of-type) { width: calc(100% - 20px); }

.colflex-75p { width: 75%; }

.colflex-75p.z-grid-column:not(:first-of-type) { width: calc(75% - 20px); }

.colflex-50p { width: 50%; }

.colflex-50p.z-grid-column:not(:first-of-type) { width: calc(50% - 20px); }

.colflex-25p { width: 25%; }

.colflex-25p.z-grid-column:not(:first-of-type) { width: calc(25% - 20px); }
.colflex-100p {
width: 100%; }
.colflex-100p.z-grid-column:not(:first-of-type) {
width: calc(100% - 20px); }

.colflex-75p {
width: 75%; }
.colflex-75p.z-grid-column:not(:first-of-type) {
width: calc(75% - 20px); }

.colflex-50p {
width: 50%; }
.colflex-50p.z-grid-column:not(:first-of-type) {
width: calc(50% - 20px); }

.colflex-25p {
width: 25%; }
.colflex-25p.z-grid-column:not(:first-of-type) {
width: calc(25% - 20px); }

/*Percentage columns 1/3 */
.colflex-67p { width: 67%; }

.colflex-67p.z-grid-column:not(:first-of-type) { width: calc(67% - 20px); }

.colflex-33p { width: 33%; }
.colflex-67p {
width: 67%; }
.colflex-67p.z-grid-column:not(:first-of-type) {
width: calc(67% - 20px); }

.colflex-33p.z-grid-column:not(:first-of-type) { width: calc(33% - 20px); }
.colflex-33p {
width: 33%; }
.colflex-33p.z-grid-column:not(:first-of-type) {
width: calc(33% - 20px); }

/*Percentage columns 1/2 */
.colflex-80p { width: 80%; }

.colflex-80p.z-grid-column:not(:first-of-type) { width: calc(80% - 20px); }

.colflex-60p { width: 60%; }

.colflex-60p.z-grid-column:not(:first-of-type) { width: calc(60% - 20px); }

.colflex-40p { width: 40%; }

.colflex-40p.z-grid-column:not(:first-of-type) { width: calc(40% - 20px); }

.colflex-20p { width: 20%; }

.colflex-20p.z-grid-column:not(:first-of-type) { width: calc(20% - 20px); }

.colflex-10p { width: 10%; }

.colflex-10p.z-grid-column:not(:first-of-type) { width: calc(10% - 20px); }

.z-grid-column[class^="singlet-"], .z-grid-column[class*=" singlet-"] { width: 100%; float: none; margin-left: auto; margin-right: auto; }

.z-grid-column[class^="singlet-"]:not(:first-of-type), .z-grid-column[class*=" singlet-"]:not(:first-of-type) { margin-left: auto; }

.singlet-colflex-max-6c-min-4c { max-width: 460px; min-width: 300px; }

.singlet-colflex-max-12c-min-4c { max-width: 940px; min-width: 300px; }

.singlet-colflex-single-max-6c-min-3c { max-width: 460px; min-width: 220px; }

/** MEDIA QUERIES Reduce overwriting rules and easily turn the grid into mobile friendly. #1 screens equal or greater than 768px #2 screen less than 768px */
@media screen and (min-width: 768px) { .z-grid-column { float: left; }
.z-grid-column:not(:first-of-type) { margin-left: 20px; }
.z-grid-mosaic { -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; }
.z-grid-mosaic .z-grid-tile { display: inline-block; width: 100%; }
.colfix-1c { width: 60px; }
.colfix-2c { width: 140px; }
.colfix-3c { width: 220px; }
.colfix-4c { width: 300px; }
.colfix-5c { width: 380px; }
.colfix-6c { width: 460px; }
.colfix-7c { width: 540px; }
.colfix-8c { width: 620px; }
.colfix-9c { width: 700px; }
.colfix-10c { width: 780px; }
.z-grid-column[class^="colflex-shrink-1c"], .z-grid-column[class*=" colflex-shrink-1c"] { width: calc(100% - 80px); }
.z-grid-column[class^="colflex-shrink-2c"], .z-grid-column[class*=" colflex-shrink-2c"] { width: calc(100% - 160px); }
.z-grid-column[class^="colflex-shrink-3c"], .z-grid-column[class*=" colflex-shrink-3c"] { width: calc(100% - 240px); }
.z-grid-column[class^="colflex-shrink-4c"], .z-grid-column[class*=" colflex-shrink-4c"] { width: calc(100% - 320px); }
.z-grid-column[class^="colflex-shrink-5c"], .z-grid-column[class*=" colflex-shrink-5c"] { width: calc(100% - 400px); }
.z-grid-column[class^="colflex-shrink-6c"], .z-grid-column[class*=" colflex-shrink-6c"] { width: calc(100% - 480px); }
.z-grid-column[class^="colflex-shrink-7c"], .z-grid-column[class*=" colflex-shrink-7c"] { width: calc(100% - 560px); }
.z-grid-column[class^="colflex-shrink-8c"], .z-grid-column[class*=" colflex-shrink-8c"] { width: calc(100% - 640px); }
.z-grid-column[class^="colflex-shrink-9c"], .z-grid-column[class*=" colflex-shrink-9c"] { width: calc(100% - 720px); }
.z-grid-column[class^="colflex-shrink-10c"], .z-grid-column[class*=" colflex-shrink-10c"] { width: calc(100% - 800px); }
.z-grid-column[class^="colflex-shrink-11c"], .z-grid-column[class*=" colflex-shrink-11c"] { width: calc(100% - 880px); }
.z-grid-column[class^="colflex-shrink-12c"], .z-grid-column[class*=" colflex-shrink-12c"] { width: calc(100% - 960px); }
.mcolumns-1c { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; -webkit-column-width: 700px; -moz-column-width: 700px; column-width: 700px; }
.mcolumns-2c { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-width: 620px; -moz-column-width: 620px; column-width: 620px; }
.mcolumns-3c { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-width: 540px; -moz-column-width: 540px; column-width: 540px; }
.mcolumns-4c { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; -webkit-column-width: 460px; -moz-column-width: 460px; column-width: 460px; }
.mcolumns-5c { -webkit-column-count: 5; -moz-column-count: 5; column-count: 5; -webkit-column-width: 380px; -moz-column-width: 380px; column-width: 380px; }
.mcolumns-6c { -webkit-column-count: 6; -moz-column-count: 6; column-count: 6; -webkit-column-width: 300px; -moz-column-width: 300px; column-width: 300px; }
.mcolumns-7c { -webkit-column-count: 7; -moz-column-count: 7; column-count: 7; -webkit-column-width: 220px; -moz-column-width: 220px; column-width: 220px; }
.mcolumns-8c { -webkit-column-count: 8; -moz-column-count: 8; column-count: 8; -webkit-column-width: 140px; -moz-column-width: 140px; column-width: 140px; }
.mcolumns-9c { -webkit-column-count: 9; -moz-column-count: 9; column-count: 9; -webkit-column-width: 60px; -moz-column-width: 60px; column-width: 60px; }
.mcolumns-10c { -webkit-column-count: 10; -moz-column-count: 10; column-count: 10; -webkit-column-width: -20px; -moz-column-width: -20px; column-width: -20px; } }

@media screen and (max-width: 767px) { .z-grid-column[class^="colflex-"]:not(:first-of-type), .z-grid-column[class*=" colflex-"]:not(:first-of-type), .z-grid-column:not(:first-of-type), .z-grid-column { width: auto; } }
.colflex-80p {
width: 80%; }
.colflex-80p.z-grid-column:not(:first-of-type) {
width: calc(80% - 20px); }

.colflex-60p {
width: 60%; }
.colflex-60p.z-grid-column:not(:first-of-type) {
width: calc(60% - 20px); }

.colflex-40p {
width: 40%; }
.colflex-40p.z-grid-column:not(:first-of-type) {
width: calc(40% - 20px); }

.colflex-20p {
width: 20%; }
.colflex-20p.z-grid-column:not(:first-of-type) {
width: calc(20% - 20px); }

.colflex-10p {
width: 10%; }
.colflex-10p.z-grid-column:not(:first-of-type) {
width: calc(10% - 20px); }

.z-grid-column[class^="singlet-"], .z-grid-column[class*=" singlet-"] {
width: 100%;
float: none;
margin-left: auto;
margin-right: auto; }

.z-grid-column[class^="singlet-"]:not(:first-of-type), .z-grid-column[class*=" singlet-"]:not(:first-of-type) {
margin-left: auto; }

.singlet-colflex-max-6c-min-4c {
max-width: 460px;
min-width: 300px; }

.singlet-colflex-max-12c-min-4c {
max-width: 940px;
min-width: 300px; }

.singlet-colflex-max-14c-min-4c {
max-width: 1100px;
min-width: 300px; }

.singlet-colflex-max-16c-min-4c {
max-width: 1260px;
min-width: 300px; }

.singlet-colflex-max-18c-min-4c {
max-width: 1420px;
min-width: 300px; }

.singlet-colflex-single-max-6c-min-3c {
max-width: 460px;
min-width: 220px; }

/**
* MEDIA QUERIES
* Reduce overwriting rules and easily turn the grid into mobile friendly.
* #1 screens equal or greater than 768px
* #2 screen less than 768px
*/
@media screen and (min-width: 768px) {
.z-grid-column {
float: left; }
.z-grid-column:not(:first-of-type) {
margin-left: 20px; }
.z-grid-mosaic {
column-gap: 20px; }
.z-grid-mosaic .z-grid-tile {
display: inline-block;
width: 100%; }
.colfix-1c {
width: 60px; }
.colfix-2c {
width: 140px; }
.colfix-3c {
width: 220px; }
.colfix-4c {
width: 300px; }
.colfix-5c {
width: 380px; }
.colfix-6c {
width: 460px; }
.colfix-7c {
width: 540px; }
.colfix-8c {
width: 620px; }
.colfix-9c {
width: 700px; }
.colfix-10c {
width: 780px; }
.z-grid-column[class^="colflex-shrink-1c"], .z-grid-column[class*=" colflex-shrink-1c"] {
width: calc(100% - 80px); }
.z-grid-column[class^="colflex-shrink-2c"], .z-grid-column[class*=" colflex-shrink-2c"] {
width: calc(100% - 160px); }
.z-grid-column[class^="colflex-shrink-3c"], .z-grid-column[class*=" colflex-shrink-3c"] {
width: calc(100% - 240px); }
.z-grid-column[class^="colflex-shrink-4c"], .z-grid-column[class*=" colflex-shrink-4c"] {
width: calc(100% - 320px); }
.z-grid-column[class^="colflex-shrink-5c"], .z-grid-column[class*=" colflex-shrink-5c"] {
width: calc(100% - 400px); }
.z-grid-column[class^="colflex-shrink-6c"], .z-grid-column[class*=" colflex-shrink-6c"] {
width: calc(100% - 480px); }
.z-grid-column[class^="colflex-shrink-7c"], .z-grid-column[class*=" colflex-shrink-7c"] {
width: calc(100% - 560px); }
.z-grid-column[class^="colflex-shrink-8c"], .z-grid-column[class*=" colflex-shrink-8c"] {
width: calc(100% - 640px); }
.z-grid-column[class^="colflex-shrink-9c"], .z-grid-column[class*=" colflex-shrink-9c"] {
width: calc(100% - 720px); }
.z-grid-column[class^="colflex-shrink-10c"], .z-grid-column[class*=" colflex-shrink-10c"] {
width: calc(100% - 800px); }
.z-grid-column[class^="colflex-shrink-11c"], .z-grid-column[class*=" colflex-shrink-11c"] {
width: calc(100% - 880px); }
.z-grid-column[class^="colflex-shrink-12c"], .z-grid-column[class*=" colflex-shrink-12c"] {
width: calc(100% - 960px); }
.mcolumns-1c {
column-count: 1;
column-width: 700px; }
.mcolumns-2c {
column-count: 2;
column-width: 620px; }
.mcolumns-3c {
column-count: 3;
column-width: 540px; }
.mcolumns-4c {
column-count: 4;
column-width: 460px; }
.mcolumns-5c {
column-count: 5;
column-width: 380px; }
.mcolumns-6c {
column-count: 6;
column-width: 300px; }
.mcolumns-7c {
column-count: 7;
column-width: 220px; }
.mcolumns-8c {
column-count: 8;
column-width: 140px; }
.mcolumns-9c {
column-count: 9;
column-width: 60px; }
.mcolumns-10c {
column-count: 10;
column-width: -20px; } }

@media screen and (max-width: 767px) {
.z-grid-column[class^="colflex-"]:not(:first-of-type), .z-grid-column[class*=" colflex-"]:not(:first-of-type), .z-grid-column:not(:first-of-type), .z-grid-column {
width: auto; } }
Loading

0 comments on commit e238d51

Please sign in to comment.