Method 1: Globals into Sections – Method 2: The MVC Approach – Method 3: SMACSS Based

View Github Repository Open presentation in a new window

una

See all presentation from una

Method 1: Globals into Sections – Method 2: The MVC Approach – Method 3: SMACSS Based

0 0

20140106-file-structure

Reveal.js Slides for SassyDC Meetup January 6

On Github una / 20140106-file-structure

Perspectives on File Structure

Oooh Perspectives on File Structure. This sounds pretty dry, but its super important and it affects every project. Everyone structures their projects a little differently, but we're going to look at some perspectives of some very intelligent people, that I admire very much, and then we can break up into groups to chat about our personal preferences.. or about anything :)

Hello! I'm Una Kravets / @una

  • Front End Designer
  • Illustrator
  • Co-Organizer of SassyDC

So, my name is Una. Feel free to tweet at me at any time. My handle is right up there. I originally come from a design background, and have since delved into coding because I love bringing those designs to life. I illustrate sometimes, and I'm one of the people who organizes this meetup, with the help of Welch, who is wonderful! I basically just make the cookies. So let's talk Sass.

The Need For Control

The flexibility we have in Sass is both a blessing an a curse at times. And this gif is a great analogy for that. You have a clean slate and you're super excited about it, but then you begin. Everything seems fine for a while, you're chugging along, super organized, but then the designer gives you some client changes, and maybe you have to make some tweaks and add sections. Before you know it, you're this guy. Especially for large projects.

Considerations

  • Team Size
  • Project Depth
  • Coding Style
  • Personal Preference
So like I mentioned earlier, everyone has their own unique style of organizing their files. People are very weded to their methods. But the best way to organize your project is highly dependent on a few variables. And those are: Project depth, coding style, and really just whatever you're comfortable with.

That being said, Let's not do this.

Method 1: Globals into Sections

  • Number of Folders:Medium
  • Amount of Files:High
  • Average Size of Files:Medium
  • Author:Matthew Anderson
  • Ideal for:Mid-Sized to Large Projects
So when I was doing some research for this talk, I came across a short little blog post written by Mathew Anderson about structuring large Sass Projects. He was really excited about the ability to break down your Sass project into partials and suggested that this should be a key in organizing files. This is a great way to modularize your CSS and help keep things easier to maintain.

Partials

A partial is simply a Sass file named with a leading underscore

								|-- _wow.scss
							|-- _such.scss
						|-- _partials.scss
In order to understand any of these methods, we need to take a look at partials. Plain and simple, a partial is simply a Sass file named with a leading underscore. The underscore lets Sass know that the file is only a partial file and that it should be generated (imported) into a CSS file with the @import directive.

Partials, Parials, Everywhere

partials/
|-- _alerts.scss
|-- _buttons.scss
|-- _checkboxes.scss
|-- _choices.scss
|-- _countdowns.scss
|-- _footer.scss
|-- _forms.scss
|-- _icons.scss
|-- _menus.scss
|-- _messages.scss
|-- _modifiers.scss
|-- _panes.scss
|-- _ratings.scss
|-- _results.scss
|-- _selectboxes.scss
|-- _tableviews.scss
|-- _textboxes.scss
|-- _throbbers.scss
`-- _typography.scss
So these are a bunch of uses for partials. I don't know where I pulled that from or what throbbers.scss is... so don't judge me

Overall Proposed Structure

						/framework
						/modules
						/vendor
						/section 
						_bootstrap.scss
						section.scss
This is the overall structure which Mathew Suggests. - In Frameworks, you'd have variables, mixins for breakpoints, and project-wide CSS -- keeping it as agnostic as possible. - Modules contains buttons, icons, forms, and whatever else you can easily extend in your project. - Vendor is reserved for 3rd party code, such as jquery UI AND should always end with an overrides.scss file where you specifically changes the vendor CSS. - The Section folder corresponds to specific items, such as an admin panel or login, which haven't been modularized yet. Section.scss would be where you import related files. We'll get to that in a second.

What is Bootstrap.scss

								@import ‘compass’;
								@import ‘compass/reset’;
								@import ‘framework/all’;
								@import ‘vendor/jquery.ui.core’;
								@import ‘vendor/overrides’;
								@import ‘modules/buttons’;
								@import ‘modules/icons’;
Everything seems pretty simple and self explanatory while reading the other files, but I had no idea what he meant by bootstrap.scss. Well basically, its just a section with very little code, that becomes a way to include your global files into any other section.

Section.scss

								// admin.scss
								@import ‘bootstrap’;
								@import ‘modules/forms’;
								@import ‘admin/accounts’;
								@import ‘admin/dashboards’;
Each section file (this is an example of the admin area) contains: - Bootstrap itself - Import any additional modules/vendor used in that section - Import all partials from the matching section folder So you would end up having as many sections as you need at the root of your sass folder, and then importing THOSE into a main.scss file which you can watch and that will be what converts to CSS.

Method 2: The MVC Approach

  • Number of Folders:High
  • Amount of Files:High
  • Average Size of Files:Low
  • Author:Dale Sande
  • Ideal for:Large Websites and Teams
To Dale, decreasing complexity means decreasing the length of your sass files, and increasing the number of folders. This method takes a little getting used to as far as navigation is concerned, but it is very consistent and great for normalizing the work flow of a large team.

MV What?

Explain MVC Structure here and how it relates to Sass

Elements, Modules, Layouts

Overview

Subdirectories

And what files go under a module, for instance

The Dale Sande Suggestion

|- sass/
|--- buttons/
|--- color/
|--- forms/
|--- layouts/
|--- modules/
|--- typography/
|--- ui_patterns/
|--- _buttons.scss
|--- _config.scss
|--- _forms.scss
|--- _global_design.scss
|--- _reset.scss
|--- _typography.scss
|--- style.scss

Diving into Modules

|- sass/
|--- modules/
|----- registration/
|------- _extends.scss
|------- _functions.scss
|------- _mixin.scss
|------- _module_registration.scss
|------- _module_personalInfo.scss
|----- purchase/
|------- _extends.scss
|------- _functions.scss
|------- _mixin.scss
|------- _module_summary.scss
|------- _module_purchase.scss

Method 3: SMACSS Based

  • Number of Folders:Low
  • Amount of Files:Medium
  • Average Size of Files:High
  • Authors:Jakob, John W. Long
  • Ideal for:Web Apps and Smaller Sites
notes

SMACC Who?

stuff

A Step Back

stylesheets/
|
|-- modules/              # Common modules
|   |-- _all.scss         # Include to get all modules
|   |-- _utility.scss     # Module name
|   |-- _colors.scss      # Etc...
|   ...
|
|-- partials/             # Partials
|   |-- _base.sass        # imports for all mixins + global project variables
|   |-- _buttons.scss     # buttons
|   |-- _figures.scss     # figures
|   |-- _grids.scss       # grids
|   |-- _typography.scss  # typography
|   |-- _reset.scss       # reset
|   ...
|
|-- vendor/               # CSS or Sass from other projects
|   |-- _colorpicker.scss
|   |-- _jquery.ui.core.scss
|   ...
|
`-- main.scss            # primary Sass file

Pulling It Together

stylesheets/
|
|-- admin/           # Admin sub-project
|   |-- modules/
|   |-- partials/
|   `-- _base.scss
|
|-- account/         # Account sub-project
|   |-- modules/
|   |-- partials/
|   `-- _base.scss
|
|-- site/            # Site sub-project
|   |-- modules/
|   |-- partials/
|   `-- _base.scss
|
|-- vendor/          # CSS or Sass from other projects
|   |-- _colorpicker-1.1.scss
|   |-- _jquery.ui.core-1.9.1.scss
|   ...
|
|-- admin.scss       # Primary stylesheets for each project
|-- account.scss
`-- site.scss

Method 4: SMACSS + BEM + OOCSS Craziness

  • Number of Folders:High
  • Amount of Files:Medium
  • Average Size of Files:Low
  • Authors:Andrew Colclough
  • Ideal for:Web Apps, Small -Mid Sized Sites
notes

Overall Takeaways

Things we can probably all agree on

Modularity > Top-Down

Top-Down vs. Bottom-Up Processing. Here we want to go bottom-up.

Links

2 - Clean Out Your Sass Junk Drawer 2 - SASS Development w/SMACSS and BEM 3 - Modular CSS Naming Conventions

The End

Any Questions?