Moving to separate issue so I no longer clutter up #1744592: [META] Omega 4.x Documentation.

See: Original comment, Response to original comment, My response back, aaaaand... response to my response.

Basically, the goal is to create a series of charts that anyone can update that will provide a "bird's eye view" of how the SASS is structured in 4.x. This is to hopefully create a visual guide of the SASS file structure. I started making this for myself because I'm a visual learner but I thought I should share it.

  • Fix issues with the original chart
  • Create chart for Ohm
  • Create chart with additional context
  • Provide source files so it's easy for anyone to update them

If someone can suggest an alternative method for providing the source files, I will happily oblige. Unfortunately, the Adobe Illustrator extension is not allowed and Drupal.org is returning an error message when I try to attach my source file in a zip.

CommentFileSizeAuthor
#4 rabbit-01.png6.27 KBdddbbb
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

msmithcti’s picture

msmithcti CreditAttribution: msmithcti commented

Hi Courtney,

I think this is a great idea. I'm pretty sure the Sass structure will be one of the more difficult things that people have to learn in order to use the Omega starterkits effectively. A couple of comments:

  • I'm not sure if we need a separate diagram for Ohm as it should pretty much follow the same format as the extended layout.
  • I think partials/components needs more examples in there and to show they are split up into more sub directories. This is the most important part of the structure for people to understand (as this is where the bulk of their CSS will go), so I think we should put more focus on this.

Nice one for putting the effort into this and sharing it, I'm interesting to see where you take it!

Courtney.B’s picture

Courtney.B CreditAttribution: Courtney.B commented

Splatio,

Duly noted! I'll hold off on an Ohm chart and see what, if any, requests I get for Ohm.

partials/components was and kind of still is one of the harder aspects for me to wrap my brain around.

That being said, I'll adjust my plans to:

  • Fix problems with original chart - make it the shortened version (at-a-glance type thing)
  • Expand fixed original with lots and lots of context, especially focusing on partials/components - I hope you guys won't mind if I pop into #drupal-omega if I need some clarification!

Posting this as of 8/5/2013, I am in the middle of wrapping up a huge project at work which means this will need to wait. I really hope I can get to these charts done this coming weekend though. I absolutely love doing stuff like this—distilling something complicated into digestible chunks. :)

fubhy’s picture

fubhy CreditAttribution: fubhy commented

Sure, join us on IRC anytime. Contributing to the project is a great way to engage with the Omega team and get any kind of help in return ;). So feel free to ask anytime.

dddbbb’s picture

dddbbb CreditAttribution: dddbbb commented
FileSize
rabbit-01.png6.27 KB

Not sure how I missed this branched issue given that I suggested it but hey ho, apologies for not getting here sooner.

If D.O has beef with your Zip files, could we not stick something up on DropBox / Github / BitBucket and then just share the link?

I'd be up for sharing some of the Illustrator work if that helps. I'm no wizard but I can do a mean rabbit with the pen tool!

Courtney.B’s picture

Courtney.B CreditAttribution: Courtney.B commented

I love the rabbit! :D

Yeah, I'll throw the source files on Github tonight. Especially since I have not been able to work at all on this lately. :/

Courtney.B’s picture

Courtney.B CreditAttribution: Courtney.B commented

So sorry about the wait—I pushed the files to a github repo.

Feel free to do whatever!

https://github.com/courtbee/Omega-4-Charts

fubhy’s picture

fubhy CreditAttribution: fubhy commented

We simplified/improved the Sass structure a bit today. @see #2089383: Further improve and simplify Ohm's Sass structure.

I applied the same structure to the starterkits (don't let that issue title misguide you). So new subthemes using the extended starterkit will get the new structure. You might want to update the chart accordingly ;).

Courtney.B’s picture

Courtney.B CreditAttribution: Courtney.B commented

Good to know! Thanks for the update. :)

Courtney.B’s picture

Courtney.B CreditAttribution: Courtney.B commented
Issue summary: View changes

Removed img of original chart.

steinmb’s picture

steinmb CreditAttribution: steinmb as a volunteer commented
Title: Visual Charts for 4.x & SASS » Visual Charts for 4.x & SASS - bird's eye view of how the SASS is structured
Assigned: Courtney.B » Unassigned
Issue summary: View changes
Related issues: +#2089383: Further improve and simplify Ohm's Sass structure.