Skip to content

Commit b870193

Browse files
benatespinabenatespina
committed
Simplified the usage of the grid, generate the standalone css distribution and other minor improvements
1 parent 480d91b commit b870193

18 files changed

+170
-88
lines changed

‎.editorconfig

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
; This file is part of the LIN3S CSS Grid library.
22
;
3-
; Copyright (c) 2016-2017 LIN3S <info@lin3s.com>
3+
; Copyright (c) 2016-present LIN3S <info@lin3s.com>
44
;
55
; For the full copyright and license information, please view the LICENSE
66
; file that was distributed with this source code.

‎.gitignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
# This file is part of the LIN3S CSS Grid library.
22
#
3-
# Copyright (c) 2016-2017 LIN3S <info@lin3s.com>
3+
# Copyright (c) 2016-present LIN3S <info@lin3s.com>
44
#
55
# For the full copyright and license information, please view the LICENSE
66
# file that was distributed with this source code.
77

8+
/dist
89
/node_modules
910
/yarn.lock

‎.scss_lint.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# This file is part of the LIN3S CSS Grid library.
22
#
3-
# Copyright (c) 2016-2017 LIN3S <info@lin3s.com>
3+
# Copyright (c) 2016-present LIN3S <info@lin3s.com>
44
#
55
# For the full copyright and license information, please view the LICENSE
66
# file that was distributed with this source code.

‎Gulpfile.js

Lines changed: 37 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,29 @@
1-
// This file is part of the LIN3S CSS Grid library.
2-
//
3-
// Copyright (c) 2016-2017 LIN3S <info@lin3s.com>
4-
//
5-
// For the full copyright and license information, please view the LICENSE
6-
// file that was distributed with this source code.
7-
//
8-
// @author Gorka Laucirica <gorka.lauzirika@gmail.com>
9-
// @author Beñat Espiña <benatespina@gmail.com>
1+
/*
2+
* This file is part of the LIN3S CSS Grid library.
3+
*
4+
* Copyright (c) 2016-present LIN3S <info@lin3s.com>
5+
*
6+
* For the full copyright and license information, please view the LICENSE
7+
* file that was distributed with this source code.
8+
*
9+
* @author Gorka Laucirica <gorka.lauzirika@gmail.com>
10+
* @author Beñat Espiña <benatespina@gmail.com>
11+
*/
1012

1113
var gulp = require('gulp');
14+
var fs = require('fs');
15+
var cssNano = require('gulp-cssnano');
16+
var license = require('gulp-header-license');
1217
var sass = require('gulp-sass');
1318
var scsslint = require('gulp-scss-lint');
19+
var rename = require('gulp-rename');
1420
var sourcemaps = require('gulp-sourcemaps');
1521

1622
var paths = {
1723
sass: './scss',
1824
exampleCss: './example/css',
19-
exampleSass: './example/scss'
25+
exampleSass: './example/scss',
26+
dist: './dist'
2027
};
2128

2229
gulp.task('scss-lint', function () {
@@ -26,6 +33,26 @@ gulp.task('scss-lint', function () {
2633
}));
2734
});
2835

36+
gulp.task('dist', function () {
37+
var year = (new Date()).getFullYear();
38+
39+
gulp.src(paths.sass + '/dist.scss')
40+
.pipe(sass().on('error', sass.logError))
41+
.pipe(cssNano({
42+
keepSpecialComments: 1,
43+
rebase: false
44+
}))
45+
.pipe(rename({
46+
basename: 'lin3s-css-grid',
47+
suffix: '.min'
48+
}))
49+
.pipe(license(
50+
fs.readFileSync('header.txt', 'utf8'),
51+
{year: year}, 0.9)
52+
)
53+
.pipe(gulp.dest(paths.dist));
54+
});
55+
2956
gulp.task('example-css', function () {
3057
gulp.src(paths.exampleSass + '/app.scss')
3158
.pipe(sass().on('error', sass.logError))

‎LICENSE

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
Copyright (c) 2016-2017 LIN3S
1+
Copyright (c) 2016-present LIN3S
22

33
Permission is hereby granted, free of charge, to any person obtaining
44
a copy of this software and associated documentation files (the

‎README.md

Lines changed: 4 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -21,50 +21,22 @@ $ bower install --save lin3s-css-grid
2121

2222
After installation process, you can include css file in your html.
2323
```html
24-
<link href="/your/path/lin3s-css-grid/dist/lin3scssgrid.min.css" type="text/css" rel="stylesheet">
24+
<link href="/your/path/lin3s-css-grid/dist/lin3s-css-grid.min.css" type="text/css" rel="stylesheet">
2525
```
2626
However is highly recommend to use the Sass version of the grid including files as Sass's imports.
2727
The best practice is to create a row.scss component that wraps all the grid generation logic. Basic example can be the
2828
following code:
2929

3030
```scss
31-
@import '../../scss/functions';
32-
@import '../../scss/mixins';
33-
@import '../../scss/variables';
31+
$grid-row-type: 'adaptive';
32+
$grid-row-column-count: 12;
3433

3534
$small-cols: 6;
3635
$medium-cols: 3, 4, 6;
3736
$large-cols: 1, 2, 3, 4, 6;
3837
$xlarge-cols: 6;
3938

40-
@include grid__row('.row', 'adaptive');
41-
42-
.row__column {
43-
@include grid__column(12);
44-
}
45-
46-
.row--centered {
47-
margin-left: auto;
48-
margin-right: auto;
49-
}
50-
51-
.row--collapse {
52-
padding-left: $column-gutter / 2;
53-
padding-right: $column-gutter / 2;
54-
55-
> .row__column {
56-
padding-left: 0;
57-
padding-right: 0;
58-
}
59-
}
60-
61-
@include grid-column-for-media-query('small', $small-cols, $small-up);
62-
@include grid-column-for-media-query('medium', $medium-cols, $medium-up);
63-
@include grid-column-for-media-query('large', $large-cols, $large-up);
64-
@include grid-column-for-media-query('xlarge', $xlarge-cols, $xlarge-up);
65-
66-
@include grid-column-push-for-media-query('large', $large-cols, $large-up);
67-
@include grid-column-push-for-media-query('xlarge', $xlarge-cols, $xlarge-up);
39+
@import '../../node_modules/lin3s-css-grid/scss/row';
6840
```
6941

7042
##Licensing Options

‎example/css/app.css

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,14 +31,18 @@
3131
padding-right: 15px;
3232
width: 100%; }
3333

34+
.row .row {
35+
margin-left: -15px;
36+
margin-right: -15px; }
37+
3438
.row--centered {
3539
margin-left: auto;
3640
margin-right: auto; }
3741

38-
.row--collapse {
42+
.row--collapsed {
3943
padding-left: 15px;
4044
padding-right: 15px; }
41-
.row--collapse > .row__column {
45+
.row--collapsed > .row__column {
4246
padding-left: 0;
4347
padding-right: 0; }
4448

@@ -80,6 +84,18 @@
8084
flex: 1 1 50%;
8185
max-width: 50%; } }
8286

87+
@media only screen {
88+
.row__column-push--small-6 {
89+
margin-left: calc(50%); } }
90+
91+
@media only screen and (min-width: 641px) {
92+
.row__column-push--medium-3 {
93+
margin-left: calc(25%); }
94+
.row__column-push--medium-4 {
95+
margin-left: calc(33.33333%); }
96+
.row__column-push--medium-6 {
97+
margin-left: calc(50%); } }
98+
8399
@media only screen and (min-width: 1025px) {
84100
.row__column-push--large-1 {
85101
margin-left: calc(8.33333%); }

‎example/scss/_row.scss

Lines changed: 4 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// This file is part of the LIN3S CSS Grid library.
22
//
3-
// Copyright (c) 2016-2017 LIN3S <info@lin3s.com>
3+
// Copyright (c) 2016-present LIN3S <info@lin3s.com>
44
//
55
// For the full copyright and license information, please view the LICENSE
66
// file that was distributed with this source code.
@@ -9,40 +9,12 @@
99
// @author Beñat Espiña <benatespina@gmail.com>
1010
// @author Mikel Tuesta <mikeltuesta@gmail.com>
1111

12-
@import '../../scss/functions';
13-
@import '../../scss/mixins';
14-
@import '../../scss/variables';
12+
$grid-row-type: 'adaptive';
13+
$grid-row-column-count: 12;
1514

1615
$small-cols: 6;
1716
$medium-cols: 3, 4, 6;
1817
$large-cols: 1, 2, 3, 4, 6;
1918
$xlarge-cols: 6;
2019

21-
@include grid__row('.row', 'adaptive');
22-
23-
.row__column {
24-
@include grid__column(12);
25-
}
26-
27-
.row--centered {
28-
margin-left: auto;
29-
margin-right: auto;
30-
}
31-
32-
.row--collapse {
33-
padding-left: $column-gutter / 2;
34-
padding-right: $column-gutter / 2;
35-
36-
> .row__column {
37-
padding-left: 0;
38-
padding-right: 0;
39-
}
40-
}
41-
42-
@include grid-column-for-media-query('small', $small-cols, $small-up);
43-
@include grid-column-for-media-query('medium', $medium-cols, $medium-up);
44-
@include grid-column-for-media-query('large', $large-cols, $large-up);
45-
@include grid-column-for-media-query('xlarge', $xlarge-cols, $xlarge-up);
46-
47-
@include grid-column-push-for-media-query('large', $large-cols, $large-up);
48-
@include grid-column-push-for-media-query('xlarge', $xlarge-cols, $xlarge-up);
20+
@import '../../scss/row';

‎example/scss/_theme.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// This file is part of the LIN3S CSS Grid library.
22
//
3-
// Copyright (c) 2016-2017 LIN3S <info@lin3s.com>
3+
// Copyright (c) 2016-present LIN3S <info@lin3s.com>
44
//
55
// For the full copyright and license information, please view the LICENSE
66
// file that was distributed with this source code.

‎example/scss/app.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// This file is part of the LIN3S CSS Grid library.
22
//
3-
// Copyright (c) 2016-2017 LIN3S <info@lin3s.com>
3+
// Copyright (c) 2016-present LIN3S <info@lin3s.com>
44
//
55
// For the full copyright and license information, please view the LICENSE
66
// file that was distributed with this source code.

‎header.txt

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/**
2+
* Copyright (c) 2016-present LIN3S <info@lin3s.com>
3+
*
4+
* LIN3S CSS Grid - Simple CSS grid based on Flexbox in the LIN3S way.
5+
*
6+
* @version v0.2.0
7+
* @link https://github.com/LIN3S/CSSGrid
8+
* @author LIN3S <info@lin3s.com>
9+
*
10+
* @license MIT
11+
*/

‎package.json

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "lin3s-css-grid",
33
"description": "Simple CSS grid based on Flexbox in the LIN3S way",
4-
"version": "0.1.0",
4+
"version": "0.2.0",
55
"license": "MIT",
66
"keywords": [
77
"adaptive-grid",
@@ -20,6 +20,7 @@
2020
}
2121
],
2222
"files": [
23+
"dist",
2324
"scss",
2425
"LICENSE",
2526
"README.md"
@@ -33,10 +34,14 @@
3334
},
3435
"scripts": {
3536
"prebuild": "rimraf example/css",
36-
"build": "yarn run prebuild && node_modules/.bin/gulp example-css"
37+
"build": "yarn run prebuild && node_modules/.bin/gulp example-css && node_modules/.bin/gulp dist"
3738
},
3839
"devDependencies": {
40+
"fs": "^0.0.1-security",
3941
"gulp": "^3.9.0",
42+
"gulp-cssnano": "^2.1.2",
43+
"gulp-header-license": "^1.0.9",
44+
"gulp-rename": "^1.2.2",
4045
"gulp-sass": "^2.1.1",
4146
"gulp-scss-lint": "^0.4.0",
4247
"gulp-sourcemaps": "^1.6.0",

‎scss/_functions.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// This file is part of the LIN3S CSS Grid library.
22
//
3-
// Copyright (c) 2016-2017 LIN3S <info@lin3s.com>
3+
// Copyright (c) 2016-present LIN3S <info@lin3s.com>
44
//
55
// For the full copyright and license information, please view the LICENSE
66
// file that was distributed with this source code.

‎scss/_mixins.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// This file is part of the LIN3S CSS Grid library.
22
//
3-
// Copyright (c) 2016-2017 LIN3S <info@lin3s.com>
3+
// Copyright (c) 2016-present LIN3S <info@lin3s.com>
44
//
55
// For the full copyright and license information, please view the LICENSE
66
// file that was distributed with this source code.

‎scss/_placeholders.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// This file is part of the LIN3S CSS Grid library.
22
//
3-
// Copyright (c) 2016-2017 LIN3S <info@lin3s.com>
3+
// Copyright (c) 2016-present LIN3S <info@lin3s.com>
44
//
55
// For the full copyright and license information, please view the LICENSE
66
// file that was distributed with this source code.

‎scss/_row.scss

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
// This file is part of the LIN3S CSS Grid library.
2+
//
3+
// Copyright (c) 2016-present LIN3S <info@lin3s.com>
4+
//
5+
// For the full copyright and license information, please view the LICENSE
6+
// file that was distributed with this source code.
7+
//
8+
// @author Gorka Laucirica <gorka.lauzirika@gmail.com>
9+
// @author Beñat Espiña <benatespina@gmail.com>
10+
// @author Mikel Tuesta <mikeltuesta@gmail.com>
11+
12+
@import 'functions';
13+
@import 'mixins';
14+
@import 'variables';
15+
16+
$grid-row-type: 'adaptive' !default;
17+
$grid-row-column-count: 12 !default;
18+
19+
$small-cols: 6 !default;
20+
$medium-cols: 3, 4, 6 !default;
21+
$large-cols: 1, 2, 3, 4, 6 !default;
22+
$xlarge-cols: 6 !default;
23+
24+
@include grid__row('.row', $grid-row-type);
25+
26+
.row__column {
27+
@include grid__column($grid-row-column-count);
28+
}
29+
30+
.row .row {
31+
margin-left: -#{$column-gutter / 2};
32+
margin-right: -#{$column-gutter / 2};
33+
}
34+
35+
.row--centered {
36+
margin-left: auto;
37+
margin-right: auto;
38+
}
39+
40+
.row--collapsed {
41+
padding-left: $column-gutter / 2;
42+
padding-right: $column-gutter / 2;
43+
44+
> .row__column {
45+
padding-left: 0;
46+
padding-right: 0;
47+
}
48+
}
49+
50+
@include grid-column-for-media-query('small', $small-cols, $small-up);
51+
@include grid-column-for-media-query('medium', $medium-cols, $medium-up);
52+
@include grid-column-for-media-query('large', $large-cols, $large-up);
53+
@include grid-column-for-media-query('xlarge', $xlarge-cols, $xlarge-up);
54+
55+
@include grid-column-push-for-media-query('small', $small-cols, $small-up);
56+
@include grid-column-push-for-media-query('medium', $medium-cols, $medium-up);
57+
@include grid-column-push-for-media-query('large', $large-cols, $large-up);
58+
@include grid-column-push-for-media-query('xlarge', $xlarge-cols, $xlarge-up);

‎scss/_variables.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// This file is part of the LIN3S CSS Grid library.
22
//
3-
// Copyright (c) 2016-2017 LIN3S <info@lin3s.com>
3+
// Copyright (c) 2016-present LIN3S <info@lin3s.com>
44
//
55
// For the full copyright and license information, please view the LICENSE
66
// file that was distributed with this source code.

0 commit comments

Comments
 (0)