Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Remove horizontal from styleguide #1

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Remove horizontal from styleguide #1

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 1 addition & 75 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ This guide contains our best practices and suggestions that fit our work environ
- [Colors](#colors)
- [Css for JavaScript](#css-for-javascript)
- [Designing for different sized plataforms](#designing-for-different-sized-plataforms)
- [Grid](#grid)
- [Vertical Grid](#vertical-grid)
- [Print](#print)
- [Stylesheets folders architecutre](#stylesheets-folders-architecutre)
- [Tools](#tools)
Expand Down Expand Up @@ -322,80 +322,6 @@ Also, when setting dimensions for containers and main structural components, try
}
```

## Grid

## Horizontal grid

**Why columns? When to use?**

We believe in consistency, but also in a content-fluid decision. So that's why we built our own column grid system which should be used only in cases that you have to organize elements in a pre-defined horizontal system.

Not all layouts will have a column system, threfore the use of columns are not mandatory.

**Our Solution**

We aimed to create a framework that would work inside any container, regardless of its width. We just wanted to customize 3 variables: the width of the element container columns, the number of columns (`$nOfColumns`) and the gutter between columns (`$gutter`). Then the columns width would be adapted accordingly.

Our solution is a Sass based system that could be set in any layout/component.

It also includes custom settings for other sizes of screen you might be working with. It works by setting up a minimum screen size for tablet or mobile and later working out the columns, gutter variables for those screens.

**How to use?**

First things first: get to know your variables.

The code is really simple. And it will start as two variables only: number of columns and gutter.

```scss
$nOfColumns: 12;
$gutter: 1rem;
$columnWidth: ( 100%/#{$nOfColumns} - #{$gutter} );
```

You will notice that same variables applies for tablets and mobile.

```scss
$nOfColumnsTablet: 8;
$gutterTablet: .5rem;
$columnWidthTablet: ( 100%/#{$nOfColumnsTablet} - #{$gutterTablet} );
$nOfColumnsMobile: 4;
$gutterMobile: .5rem;
$columnWidthMobile: ( 100%/#{$nOfColumnsMobile} - #{$gutterMobile} );
```

And then, set up your maximum tablet and mobile width.

```scss
$tabletWidth: 640px;
$mobileWidth: 480px;
```

Second stuff comes right after: get to know the system.

There you'll see a bunch of _mixins_ for mobile and tablet. They will be setting up the grid the way it should be based on the variables you have set before. Apply it using `@include grid(number)`.


And also, there will be set some offset mixins in case you might wanna get off the grid for some reason. Apply it using `@include offSetRight(number)` or `@includeOffSetLeft(number)`.

Not all set, yet! Set up your container width too.

Mind that the grid works without setting a width, but it might be compromise the overall look of the application and it's certainly not the best approach for a multiple screen application.

```scss
.container {
width: calc(60% + 240px);
max-width: 100%;
margin-right: auto;
margin-left: auto;
overflow: auto;
}
```

_Need to talk about offest_

All set! You're good to go!
[Codepen](https://codepen.io/caepenna/pen/kXqyyJ)

## Vertical grid

In design, _vertical rhythm_ is the structure that guides a reader's eye through the content. Consistent vertical rhythm makes a layout more balanced and a more readable content.
Expand Down