From 8c7443fbc6a3bcf130cc99e8b2974f011179a08b Mon Sep 17 00:00:00 2001 From: Carlos Menezes Date: Fri, 13 Jul 2018 14:42:34 -0300 Subject: [PATCH] Remove horizontal from styleguide --- README.md | 76 +------------------------------------------------------ 1 file changed, 1 insertion(+), 75 deletions(-) diff --git a/README.md b/README.md index 70ee116..a9b71de 100644 --- a/README.md +++ b/README.md @@ -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) @@ -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.