Skip to content

Commit

Permalink
merge gridlev4 repo
Browse files Browse the repository at this point in the history
  • Loading branch information
@olivierbossel
olivierbossel committed Apr 7, 2019
1 parent e30b093 commit 27092b6
Show file tree
Hide file tree
Showing 77 changed files with 9,601 additions and 44,804 deletions.
Binary file added .resources/gridle-head.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
193 changes: 39 additions & 154 deletions README.md
View file
@@ -1,3 +1,5 @@
![Gridle](.resources/gridle-head.png)

# Coffeekraken Gridle <img src=".resources/coffeekraken-logo.jpg" height="25px" />

<p>
Expand Down Expand Up @@ -27,33 +29,28 @@
</a>
</p>

> One grid system to rule them all (.scss)
<p class="lead">Gridle is a set of complete and simple settings, mixins and classes that make the creation and usage of grid systems (even complex ones) really simple. All of this with full responsive capabilities</p>
Gridle is a simple but powerful and convenient grid that make use of the CSS grid model. It has been rewritten from the ground up to be more simple to use without loosing his principle goals that are the flexibility and his responsive capabilities.

## Table of content

1. [Install](#install)
2. [Get started](doc/00.get-started.md)
3. [Setup](doc/01.setup.md)
4. [States](doc/02.states.md)
5. [Mobile first](doc/03.modile-first.md)
6. [Classes](doc/04.classes.md)
7. [Mixins](doc/05.mixins.md)
8. [Functions](doc/06.functions.md)
9. [Advanced settings](doc/07.advanced-settings.md)
10. [Gridle JS](doc/08.gridle-js.md)
11. [Browsers Support](#readme-browsers-support)
12. [Contribute](#readme-contribute)
13. [Who are Coffeekraken](#readme-who-are-coffeekraken)
14. [License](#readme-license)

3. [States](doc/01.states.md)
4. [Classes](doc/02.classes.md)
5. [Functions](doc/03.functions.md)
6. [Mixins](doc/04.mixins.md)
7. [Browsers Support](#readme-browsers-support)
8. [Contribute](#readme-contribute)
9. [Who are Coffeekraken](#readme-who-are-coffeekraken)
10. [License](#readme-license)

<a id="readme-install"></a>
## Install

Gridle is available through NPM. To install it, just launch this command line:

```
npm install coffeekraken-gridle --save
npm install coffeekraken-gridle@4.0.0-beta --save
```

## Quick start
Expand All @@ -67,29 +64,29 @@ import 'node_modules/coffeekraken-gridle/index';
Configure your grid :

```scss
@include g-setup( (
context : 12,
gutter-width : 20px,
direction : rtl,
// etc...
) );
@include g-setup((
columns: 12,
column-width: 60, // unitless value
width: 1200, // unitless value
container-width: 85vw, // absolute value
container-max-width: 1440px
));
```

Register states (media queries) (optional) :

```scss
@include g-register-state ( mobile , (
max-width : 480px
) );
@include g-register-state ( tablet , (
min-width : 481px,
max-width : 1024px
) ) ;
@include g-register-state(tablet, (
min-width : 640px
));
@include g-register-state(desktop, (
min-width : 992px
));

// even with full custom queries :
@include g-register-state ( landscape, (
@include g-register-state (landscape, (
query : "(orientation : landscape)"
) );
));
```

Generate all classes :
Expand All @@ -100,163 +97,51 @@ Generate all classes :

Use your grid in html :

```markup
<div class="row">
<div class="gr-12 hide-print">
```html
<div class="gr">
<div class="col col--12 hide@tablet">
Header
</div>
<div class="gr-8 gr-12@mobile">
<div class="col col--12 col--4@tablet">
Content
</div>
<div class="gr-4 gr-12@mobile">
<div class="col col--12 col--4@tablet">
Sidebar
</div>
</div>
```

Or with mixins :

```scss
.row {
@include g-row();
max-width:960px;
margin:0 auto;
}
#header {
@include g-grid(12);
}
#sidebar {
@include g-grid(8);
@include g-state( mobile tablet ) {
@include g-grid(12);
content : "#{g-current-state-name()}";
}
}
#sidebar {
@include g-set( (
grid : 4,
mobile : (
hide : true
)
) );
}
@footer {
@include g-grid(12);
}
```

Customize your content look and feel with Gridle mixins

```scss
#sidebar {
background : red;

@include g-state(mobile) {
@include g-state(tablet) {
background : green;
}
}
```

## Element queries support

Gridle has support for element queries with an easy mixin as all the rest of the framework. Thanks to [Marc J Schmidt](https://github.com/marcj/css-element-queries) for his awesome work on the hight efficient "polyfill".

```scss
.component {
background: yellow;

@include g-eq(+600px) {
// when the component is 600px and greater
background: pink;
}
@include g-eq(-300px) {
// when the component is 300px and lower
background: green;
}
@include g-eq(-100px) {
// when the component is 100px and lower
background: black;

.my-nested-element {
display: none;
}
}
}
```

## Flex as a choice

Gridle allows you to choose between a standard grid generated with float, etc... and a flex one that use the flexbox model. All of this power with the same exact classes.

```scss
// default driver
@import 'node_modules/coffeekraken-gridle/index';
// flex driver
@import 'node_modules/coffeekraken-gridle/flex';
```

## Generate custom classes

Gridle allows you to generate custom classes that will be available for each of your states. Here's an exemple

```scss
@include g-custom-class( ( 'center', '-', '%state' ) ) {
@include g-custom-class('center') {
text-align : center;
}
```

This will produce the classes : center, center-mobile, center-tablet and center-landscape automatically


## Set multiple grid properties at one

Gridle offer you multiple ways to set grid properties on your elements, the g-set and gridle universal mixin are some of these ways

```scss
#sidebar {
@include g-set((
grid : 8,
push : 4,
tablet : (
grid : 10,
push : 2
),
mobile : (
grid : 12,
push : 0
)
));

// same with universal mixin
@include gridle(8 push 4 tablet 10 push 2 mobile 12 push 0);
}
```


## More control with Gridle{.js}

Gridle{.js} allows you to be notified when states changes. It find automatically your states registered in your sass. Simple but powerful

```javascript
import Gridle from 'coffeekraken-gridle';
Gridle.on('update', function(updatedStates, activeStates, unactiveStates) {
// do something here...
});
// see documentation for more informations...
```


## And more...

That's not finished. Gridle offer you a lot of features and advanced settings that you can discover on the full website. When I say that Gridle is powerful and fully customizable, I really mean it!
This will produce the classes : center, center@tablet, center@desktop and center@landscape automatically


<a id="readme-browsers-support"></a>
## Browsers support

| <img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/edge.png" alt="IE / Edge" width="16px" height="16px" /></br>IE / Edge | <img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/firefox.png" alt="Firefox" width="16px" height="16px" /></br>Firefox | <img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/chrome.png" alt="Chrome" width="16px" height="16px" /></br>Chrome | <img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/safari.png" alt="Safari" width="16px" height="16px" /></br>Safari |
| <img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/edge.png" alt="IE / Edge" width="16px" height="16px" /></br>Edge | <img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/firefox.png" alt="Firefox" width="16px" height="16px" /></br>Firefox | <img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/chrome.png" alt="Chrome" width="16px" height="16px" /></br>Chrome | <img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/safari.png" alt="Safari" width="16px" height="16px" /></br>Safari |
| --------- | --------- | --------- | --------- |
| IE11+ | last 2 versions| last 2 versions| last 2 versions
| Edge16+ | last 2 versions| last 2 versions| last 2 versions

> As browsers are automatically updated, we will keep as reference the last two versions of each but this package can work on older ones as well.
Expand Down
1 change: 0 additions & 1 deletion _flex.scss
View file

This file was deleted.

1 change: 1 addition & 0 deletions _gridle.scss
View file
@@ -0,0 +1 @@
@import 'src/sass/index';
2 changes: 1 addition & 1 deletion _index.scss
View file
@@ -1 +1 @@
@import 'src/sass/gridle';
@import 'src/sass/index';
88 changes: 36 additions & 52 deletions carpenter.displays.js
View file
Expand Up @@ -44,58 +44,42 @@ module.exports = {
<td class="t-right">{{gridle-query}}</td>
</tr>
{{/if}}
<tr>
<td>Classes</td>
<td class="t-right">{{gridle-classes}}</td>
</tr>
<tr>
<td>Context</td>
<td class="t-right">{{gridle-context}}</td>
</tr>
<tr>
<td>Gutters width</td>
<td class="t-right">{{gridle-gutter-width}}</td>
</tr>
<tr>
<td>Gutters height</td>
<td class="t-right">{{gridle-gutter-height}}</td>
</tr>
<tr>
<td>Gutters top</td>
<td class="t-right">{{gridle-gutter-top}}</td>
</tr>
<tr>
<td>Gutters right</td>
<td class="t-right">{{gridle-gutter-right}}</td>
</tr>
<tr>
<td>Gutters bottom</td>
<td class="t-right">{{gridle-gutter-bottom}}</td>
</tr>
<tr>
<td>Gutters left</td>
<td class="t-right">{{gridle-gutter-left}}</td>
</tr>
<tr>
<td>Direction</td>
<td class="t-right">{{gridle-direction}}</td>
</tr>
<tr>
<td>"dir" attribute support</td>
<td class="t-right">{{gridle-dir-attribute}}</td>
</tr>
<tr>
<td>Name multiplicator</td>
<td class="t-right">{{gridle-name-multiplicator}}</td>
</tr>
<tr>
<td>States classes</td>
<td class="t-right">{{gridle-states-classes}}</td>
</tr>
<tr>
<td>Classes prefix</td>
<td class="t-right">{{gridle-classes-prefix}}</td>
</tr>
{{#if gridle-columns}}
<tr>
<td>Columns</td>
<td class="t-right">{{gridle-columns}}</td>
</tr>
{{/if}}
{{#if gridle-rows}}
<tr>
<td>Rows</td>
<td class="t-right">{{gridle-rows}}</td>
</tr>
{{/if}}
{{#if gridle-column-width}}
<tr>
<td>Column width</td>
<td class="t-right">{{gridle-column-width}}</td>
</tr>
{{/if}}
{{#if gridle-width}}
<tr>
<td>Width</td>
<td class="t-right">{{gridle-width}}</td>
</tr>
{{/if}}
{{#if gridle-container-width}}
<tr>
<td>Container width</td>
<td class="t-right">{{gridle-container-width}}</td>
</tr>
{{/if}}
{{#if gridle-container-max-width}}
<tr>
<td>Container max width</td>
<td class="t-right">{{gridle-container-max-width}}</td>
</tr>
{{/if}}
</tbody>
</table>
</div>
Expand Down

0 comments on commit 27092b6

Please sign in to comment.