Proje klasör düzeni

main.scss

|-- main.scss						# Ana kapsayıcı (direkt olarak css yazılmaz sadece import edilir)
|	|-- // Option
|	|-- @import "option/values"
|	|-- @import "option/function"
|	|-- @import "option/mixing"
|	|--
|	|-- // Helper
|	|-- @import "helper/normalize"
|	|-- @import "helper/formalize"
|	|--
|	|-- // Plugin
|	|-- ...

Proje Klasör Düzeni

root/
|-- scss/						# https://gist.github.com/ademilter/746cb307f14bd4e32de1#file-scss
|
|-- js/							# Script klasörü
| |-- plugin/						- Eklentilere ait scriptler
| |-- pages/						- Sayfalara özel scriptler
| |-- plugin.js						- Plugin klasöründeki dosyaları bu dosya içinde birleştiriyoruz
| |-- main.js						- Global olan bütün scriptleri buraya yazıyoruz
|
|-- img/						# Ham tasarım ve sprite gibi dosyalar (psd, sketch, ai, vs...)
|
|-- font/						# Fontlar (web-font'a dönüştürülmemiş halleri)
|
|-- www/						# Yayına alınmaya hazır klasör dizini. Ana dizindeki bütün dosyalar sıkıştırılarak bu dizindeki yerlerine eklenir.
| |-- css/
| | |-- main.min.css
| | 
| |-- js/
| | |-- vendor/
| | | |-- jquery.min.js					- Sayfaya CDN ile eklenmediyse fallback olarak buradan alınır [Konum:"Footer", Sıra:"1"]
| | | |-- modernizr.min.js				- Projeye göre gereklilik taşıyorsa eklenir [Konum:"Head"]
| | | |-- ...
| | |-- pages/						- Sayfaya özel scriptler [Konum:"Footer", Sıra:"4"]
| | | |-- register.min.js
| | | |-- basket.min.js
| | | |-- ...
| | |-- plugin.min.js					- Birleştirilmiş plugin dosyalarını sıkıştırıp jqueryden sonra ekliyoruz [Konum:"Footer", Sıra:"2"]
| | |-- main.min.js					- Sayfaya CDN ile eklenmediyse fallback olarak buradan alınır. [Konum:"Footer", Sıra:"3"]
| | 
| |-- img/						# Global olan bütün image dosyaları burada barınır
| | |-- logo.png
| | |-- ...
| | |-- pages/						- Sayfaya özel görseller ayrı ayrı eklenir
| | | |-- home/
| | | | |-- cover-slider/
| | | |-- ...
| | 
| |-- font/						# Font-face dosyaları (svg, woff, otf, vs...)
| | 
| |-- index.html

SCSS Klasör düzeni

scss/
|-- option/						# Ayarlar, Değişkenler ve Fonksiyonlar
|	|-- _values.scss				- offset, size, genel font ayarları ve diğer bütün değişkenler...
|	|-- _function.scss
|	|-- _mixin.scss
|	
|-- helper/						# Yardımcı dosyalar
|	|-- _normalize.scss				- https://github.com/necolas/normalize.css
|	|-- _formalize.scss				- https://github.com/interacthings/formalize.css/
|	
|-- plugin/						# Eklentilere ait stil dosyaları
|	|-- ...
|	
|-- utility/						# İnce ayarlar
|	|-- _typography.scss			        - h, p, em, sub gibi tipografi ayarları
|	|-- _icons.scss					- svg veya font ikon tanımlamaları
|	|-- ...
|	
|-- component/						# Tamamlayıcılar
|	|-- _form.scss					- button, textbox, checkbox, select gibi sitiller
|	|-- _grid.scss					- grid
|	|-- ...
|	
|-- global/						# Global stil dosyaları
|	|-- _header.scss
|	|-- _footer.scss
|	|-- _breadcrumbs.scss
|	|-- ...
|	
|-- pages/						# Sayfaya özel still tanımlamaları
|	|-- _home.scss
|	|-- _categories.scss

root/ altındaki scss/, js/, img/, font/ klasörleri içindeki herşey ham dosyalardır, bütün değişiklikler burada yapılır. www/ altındaki css/, js/ klasörler içindekiler birleştirilmiş ve sıkıştırılmış versiyonlarıdır, değişiklik yapılmaz.