Skip to content

Commit 6ba50fc

Browse files
committed
Uinified the grid variables
1 parent b870193 commit 6ba50fc

File tree

8 files changed

+22
-19
lines changed

8 files changed

+22
-19
lines changed

README.md

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,14 +28,24 @@ The best practice is to create a row.scss component that wraps all the grid gene
2828
following code:
2929

3030
```scss
31-
$grid-row-type: 'adaptive';
32-
$grid-row-column-count: 12;
31+
$grid-type: 'adaptive'; // also, it can be fluid
32+
33+
$row-padding: 15px;
34+
$row-width: 1290;
35+
36+
$column-count: 12;
37+
$column-gutter: 30px;
3338

3439
$small-cols: 6;
3540
$medium-cols: 3, 4, 6;
3641
$large-cols: 1, 2, 3, 4, 6;
3742
$xlarge-cols: 6;
3843

44+
$small-breakpoint: 640;
45+
$medium-breakpoint: 1024;
46+
$large-breakpoint: 1279;
47+
$xlarge-breakpoint: 1440;
48+
3949
@import '../../node_modules/lin3s-css-grid/scss/row';
4050
```
4151

example/index.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,16 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<title>untitled</title>
5+
<title>LIN3S CSS Grid</title>
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
88

99
<link rel="stylesheet" type="text/css" href="https://raw.github.com/necolas/normalize.css/master/normalize.css"/>
1010
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"/>
11-
<link rel="stylesheet" type="text/css" href="/css/app.css"/>
11+
<link rel="stylesheet" type="text/css" href="css/app.css"/>
1212
</head>
1313
<body>
14-
<h1>LIN3S CSS Adaptive Grid</h1>
14+
<h1>LIN3S CSS Grid | Adaptive example</h1>
1515
<div class="row">
1616
<div class="row__column row__column--large-1 row__column--medium-3 row__column--small-6">1</div>
1717
<div class="row__column row__column--large-1 row__column--medium-3 row__column--small-6">1</div>

example/scss/_row.scss

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,6 @@
99
// @author Beñat Espiña <benatespina@gmail.com>
1010
// @author Mikel Tuesta <mikeltuesta@gmail.com>
1111

12-
$grid-row-type: 'adaptive';
13-
$grid-row-column-count: 12;
14-
1512
$small-cols: 6;
1613
$medium-cols: 3, 4, 6;
1714
$large-cols: 1, 2, 3, 4, 6;

package.json

Lines changed: 1 addition & 1 deletion
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.2.0",
4+
"version": "0.3.0",
55
"license": "MIT",
66
"keywords": [
77
"adaptive-grid",

scss/_placeholders.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020

2121
%grid__row--fluid {
2222
@extend %grid__row;
23-
max-width: $fluid-row-width + $column-gutter;
23+
max-width: $row-width + $column-gutter;
2424
}
2525

2626
%grid__row--fluid-one-column {

scss/_row.scss

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,18 +13,17 @@
1313
@import 'mixins';
1414
@import 'variables';
1515

16-
$grid-row-type: 'adaptive' !default;
17-
$grid-row-column-count: 12 !default;
16+
$grid-type: 'adaptive' !default;
1817

1918
$small-cols: 6 !default;
2019
$medium-cols: 3, 4, 6 !default;
2120
$large-cols: 1, 2, 3, 4, 6 !default;
2221
$xlarge-cols: 6 !default;
2322

24-
@include grid__row('.row', $grid-row-type);
23+
@include grid__row('.row', $grid-type);
2524

2625
.row__column {
27-
@include grid__column($grid-row-column-count);
26+
@include grid__column($column-count);
2827
}
2928

3029
.row .row {

scss/_variables.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,13 +46,13 @@ $column-count: 12 !default;
4646
$column-gutter: 30px !default;
4747
$row-padding: 15px !default;
4848

49-
$fluid-row-width: 1290 !default;
49+
$row-width: 1290 !default;
5050

5151
$adaptive-row-small-width: 666 !default;
5252
$adaptive-row-medium-width: 666 !default;
5353
$adaptive-row-large-width: 930 !default;
5454
$adaptive-row-xlarge-width: 1170 !default;
55-
$adaptive-row-xxlarge-width: $fluid-row-width;
55+
$adaptive-row-xxlarge-width: $row-width;
5656

5757
$grid: (
5858
'adaptive': (

scss/dist.scss

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,6 @@
99
// @author Beñat Espiña <benatespina@gmail.com>
1010
// @author Mikel Tuesta <mikeltuesta@gmail.com>
1111

12-
$grid-row-type: 'adaptive';
13-
$grid-row-column-count: 12;
14-
1512
$small-cols: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12;
1613
$medium-cols: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12;
1714
$large-cols: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12;

0 commit comments

Comments
 (0)