/layout-scss

basic scss setup for translating visual layout into responsive design

Primary LanguageCSS

#SASS Library

##Basic Project setup

Read about Content First

###Typography Rule: Modular Scale and Vertical Rhythm

Read about modular-scale which exists as a library and how it is implemented in Bourbon. Modular scale forms the basis of Vertical Rhythm preset based on modular scales.

3 Libraries for establishing Vertical Rhythm

  • Gridlover preffered. clean codebase

  • Sassline Sassline may have best setup for Overide section

  • Typeplate provides styling for specific font (Ampersand)

###Responsive Layout

Flexbox is the future

Float based Libraries

  • Singularity

  • Bourbon Neat

###File Setup

Project
|
|-- base.scss
|    
+-- utils
|  |  
|  |-- reset.scss
|  |-- media-queries.scss    
|    
+-- typography
|  |  
|  |-- base.scss  modular-scale/vertical-rhythm - GridLover
|  |-- custom.scss  project fonts etc
|
+-- layout
|  |  
|  |-- custom.scss
|    
+-- libs
|  |  
|  +-- Sassy-Gridlover/        
|  +-- bourbon/  
|  +-- neat/

   variables - colors schemes etc?
   layouts - Responsive Structure base on Neat