Click here to Skip to main content
15,867,308 members
Articles / Web Development / HTML
Tip/Trick

Large Scale Application Architecture for CSS with SASS and SMACSS

Rate me:
Please Sign up or sign in to vote.
5.00/5 (2 votes)
5 Dec 2014CPOL5 min read 30.1K   228   5   4
Large Scale Application Architecture for CSS with SASS and SMACSS

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

Image 1

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:

Image 2

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.

Image 3

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.

Image 4

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.

Image 5

c.2) Base

The pictorial representation of base folder below.

Image 6

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. 

Image 7

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.

Image 8

c.4) Layout

The pictorial representation of layout folder below.

Image 9

c.5) Module

The pictorial representation of layout folder below.

Image 10

c.6) State

The pictorial representation of layout folder below.

Image 11

c.7) Theme

The pictorial representation of layout folder below.

Image 12

c.8) style.scss

All of the file will include into style.scss, The code representation of style.scss below.

/* Compass */
//@import "compass/css3/images";

/* Tools */
@import "tools/functions";
@import "tools/site-settings";
@import "tools/mixins";
@import "tools/helpers";

/* Fonts */
//@import "fonts/...";

/* Base */
@import "base/normalize";
@import "base/base";

/* Vendor */
@import "vendor/bootstrap/bootstrap";
@import "vendor/font-awesome";

/* Layout */
@import "layout/header";
@import "layout/nav";
@import "layout/footer";
@import "layout/constrained";
@import "layout/main";
@import "layout/form";
@import "layout/home";
@import "layout/dashboard";

/* Modules */
@import "module/button";
@import "module/icons";
@import "module/calender";
@import "module/table";
@import "module/animations";
@import "module/date-picker";
@import "module/time-picker";

/* State */
@import "state/class";
@import "state/pseudo-class";
@import "state/media-query";

/* Theme */
@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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
Bangladesh Bangladesh
I am expert in AngularJs, KnockoutJs, Breezejs, NodeJS, ExpressJS, Javascript, jQuery, JSON, Html5, CSS3, Asp.Net (WebForm, MVC), WCF, Restful service, EF, C# .NET, XAML, XML, UML, SQL-SERVER, MongoDB

Comments and Discussions

 
QuestionHow to contact you for a job? Pin
ELhajjNet10-Dec-14 22:05
ELhajjNet10-Dec-14 22:05 
AnswerRe: How to contact you for a job? Pin
mdshohelrana11-Dec-14 5:58
professionalmdshohelrana11-Dec-14 5:58 
GeneralMy vote of 5 Pin
Humayun Kabir Mamun6-Dec-14 22:10
Humayun Kabir Mamun6-Dec-14 22:10 
GeneralRe: My vote of 5 Pin
mdshohelrana6-Dec-14 22:20
professionalmdshohelrana6-Dec-14 22:20 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.