Introduction
I am the big fan of SMACSS since the last one year, SMACSS is very helpful to create large scale application for CSS. I think there is no opportunity to create large scale application without SMACSS. Here I am describing large scale application with SMACSS and SASS. This article will be helpful for those who are actually good learner and wants to create large scale modular application. I tried to my best so that everyone who read this will be learn something new.
Walk–Through
1. SET UP
a) At first download mind scape web workbench visual studio extension for SASS compiler from here. and you have to download also Sassy Compiler from here. You must setup above two extension. By this extension you can easily create SASS file and compile SASS code by saving file. The Mindscape Web Workbench is a free plugin for Visual Studio 2010 - Visual Studio 2013 to provideCoffeeScript, Sass, Compass and Less editing!. Here I will use SASS.
b) SMACSS provided five category folder or file structure like this:
- Base
- Layout
- Module
- State
- Theme
You can get complete SMACSS guideline from here. Just read the core menu which is right side of the page. Now I am presenting the picture of that menu
c) Know the basic of SASS from here. Although I will describe SASS introduction into this article with proper example.
2. My Approach
I have worked hard to create this folder structure of SMASS and SASS. Since long time I wanted to create css architecture for large scale application but I did not find any better solution over online which will be easy to understand and manage with proper way. At last I did that. I have created the folder into visual studio MVC5 empty project below:
Now I will describe the content folder structure. The content folder contains three folders like fonts, images and sass. Here is my explanation of every folder like below.
a) FONTS:
You can keep the bootstrap font or font-awesome or you're likable font or all of these into this folder. But I am suggesting to you that font awesome is better because there has lots of ready mate icons. Many developer waste their valuable time to create icon for their website so I think all of the icons are very necessary for every web developer. You can get the font awesome from here or nuget. If you want to get from nugget. Write the command in package manager console. The command line is below.
PM> Install-Package FontAwesome
After completing installation you will see the font’s folder which is the outside of the content folder and two css file like font-awesome.css and font-awesome.min.css those are placed into content folder. Delete font-awesome.min.css file because no need min file when you are developing. Finally you have to minify this file but not now. I am showing in graphically below.
Now you have to copy the all fonts of font awesome and paste into content> fonts and copy the font-awesome.css file and paste into vendor folder. After placing the fonts and css file rename the font-awesome.css file into _ font-awesome.scss. Here I have used underscore means that this file won’t be generate css file. This will be only compile. I have used .scss extension because all of css file will be under into sass and will be combine into style.scss file. Here is the final folder structure below.
b) IMAGES
You can put here gallary, nav(menu), layout images. In the web png better image format so try to put here png images.
c) SASS
SASS (Syntactically Awesome Style Sheets) is a css generation language. By adding nested rules, variables, mixins, selector inheritance, and more. It’s make to well-formatted, standard CSS. Sass makes easy to write and controlling css.
My proposed architecture is not more complex. It will clear your understanding level that how will you organize your css. Now I will describe my proposed architecture step by step below.
c.1) Tools
The tools folder containing four files like function, helper, mixin and site-settings, The pictorial representation of tools folder below.
c.2) Base
The pictorial representation of base folder below.
c.3) Vendor
Here I have used two vendor one is font awesome and other is bootstrap. I have already shown that how can I add fontawesome into my project. Now I want to add twitter bootstrap into project by command line.
Install-Package Twitter.Bootstrap.Sass
After executing the command line. Sass is added into project like below.
Now I will cut the all bootstrap file and paste into content vendor folder like below. And delete the sass folder from project where bootstrap file was. And comment the normalize sass from bootstrap file because no need to normalize here I have already added normalize into project start.
c.4) Layout
The pictorial representation of layout folder below.
c.5) Module
The pictorial representation of layout folder below.
c.6) State
The pictorial representation of layout folder below.
c.7) Theme
The pictorial representation of layout folder below.
c.8) style.scss
All of the file will include into style.scss, The code representation of style.scss below.
@import "tools/functions";
@import "tools/site-settings";
@import "tools/mixins";
@import "tools/helpers";
@import "base/normalize";
@import "base/base";
@import "vendor/bootstrap/bootstrap";
@import "vendor/font-awesome";
@import "layout/header";
@import "layout/nav";
@import "layout/footer";
@import "layout/constrained";
@import "layout/main";
@import "layout/form";
@import "layout/home";
@import "layout/dashboard";
@import "module/button";
@import "module/icons";
@import "module/calender";
@import "module/table";
@import "module/animations";
@import "module/date-picker";
@import "module/time-picker";
@import "state/class";
@import "state/pseudo-class";
@import "state/media-query";
@import "theme/gray";
Conclusion
I have tried to my best to organize folder and file in css architecture. This architecture will be very helpful for advance. I have included full code into my project file. Please download any enjoy it.
