{"action":"created","comment":{"url":"https://api.github.com/repos/zumba/zumba.github.com/pulls/comments/27571983","id":27571983,"diff_hunk":"@@ -0,0 +1,173 @@\n+---\n+layout: post\n+title: How We Do CSS at Zumba\n+description: This is how we do CSS at Zumba.\n+tags: [technology, css, sass, front end, engineering]\n+author: neptunz\n+---\n+\n+As you may or may not know Zumba's website consists of a robust app that includes a fully custom ecommerce shop that supports international transactions, class and training search and registration, Zumba Instructor Network (ZIN) admin portal and many other apps. Our in-house tech department is responsible for managing the interactive products, developing, testing and deploying the projects.\n+\n+I was inspired by the teams at <a href=\"http://dev.ghost.org/css-at-ghost/\" target=\"_blank\">Ghost</a> and <a href=\"https://github.com/styleguide/css\" target=\"_blank\">Github</a> to write this article to give you an idea of how we do CSS at Zumba.\n+\n+\n+### Intro - Browser and Device Support\n+We try to keep our code as light, modular and DRY as possible. We use Modernizr, Autoprefixer and some Foundation components. We try to keep our nesting no more than 4 levels deep and we try to make sure that  our naming convention lends itself to reusable components.\n+\n+We support the last few versions of popular browsers (Chrome, Safari and Firefox). At the time of writing this we currently support IE 8+. About 2% of our users still use IE 8; we are not out of the woods yet.\n+\n+We made the leap to a responsive application with our recent redesign of the site. Therefore, we support a wide range of desktop, tablet and mobile devices. At the time of writing this we don’t currently support smart watches. We will soon, though… so, \"watch\" out for that... sorry.\n+\n+\n+### Preprocessor\n+We use Sass with Compass as our preprocessor. Our team is proficient and has much training on this popular pre-processor and it’s large following helps.\n+\n+\n+### Folder/Sandwich Structure\n+Here’s the fun stuff - we structured our css based on a few important factors:\n+\n+\n+#### + Modularity and Reusability\n+Develop components that can be reused throughout the application.\n+\n+\n+#### + CSS Rules\n+Consider the size of the compiled stylesheets per section of the site to not exceed IE9’s rules limit of 4,095. Our previous site was compiled into two massive stylesheets and we learned the hard way. We currently break it down per section of the site. See examples below.\n+\n+\n+#### + Light stylesheets\n+Keeping the stylesheet declaration low kills two birds with one stone. We break the stylesheets down into individual sheets that contain only the rules for each section of the site—this has the added benefit of avoiding unnecessary or redundant styles per section. Doing this helps us keep our stylesheets light.\n+\n+Can I have my sandwich with a side of css?\n+Zumba is a happy and energetic fitness lifestyle company. That doesn’t mean we can’t have our sandwich and eat it too. We decided to structure our css like a sandwich order.\n+\n+<div><img src=\"/img/blog/sandwich-breakdown.jpg\" alt=\"sandwich\" class=\"img-responsive\"/></div>\n+\n+\n+#### Plate\n+The plate represents the foundation of the code and is reused throughout the site.\n+Example:\n+\n+    plate\n+    |— _angular.scss\n+    |— _animations.scss\n+    |— _fonts.scss\n+    |— _icons.scss\n+    |— _mixins.scss\n+    |— _typography.scss\n+    |— _variables.scss\n+\n+\n+#### Toppings\n+These can be added to your sandwich to make it as delicious as you want it. These consist of mini components that can be reused throughout the site, but is not necessary for every page.\n+Example:\n+\n+\ttoppings\n+\t|— _button.scss\n+\t|— _input.scss\n+\t|— _shares.scss\n+\t|— _tooltip.scss\n+\n+\n+#### Sandwich\n+These nom noms can contain a combination of toppings to make a complete sandwich or component. These are usually a bit more complex and a little more specific. Sandwiches can be used throughout the entire site and can be customized per section of the site to meet that section's needs or requirements.\n+Example:\n+\n+\tsandwich\n+\t|— _accordion.scss\n+\t|— _featured.scss\n+\t|— _form.scss\n+\t|— _hero-slider.scss\n+\t|— _modal.scss\n+\t|— _pagination.scss\n+\t|— _rangeslider.scss\n+\n+\n+#### Example of our overall structure:\n+\n+\tassets-build/css-blt\n+\t|— checkout/\n+\t|— classes/\n+\t|— consumer/\n+\t|— header-footer/\n+\t|— plate/\n+\t|— sandwiches/\n+\t|— shop/\n+\t|— toppings/\n+\t|— _settings.scss\n+\t|— classes.scss\n+\t|— consumer.scss\n+\t|— header-footer.scss\n+\t|— main.scss\n+\t|— shop.scss\n+\n+\n+#### main.scss - Consists of the basics of our pages’ layout.","path":"_posts/2015-03-31-how-we-do-css.md","position":105,"original_position":105,"commit_id":"00e56f31640e28471bc55c7ccfdc209e31595c29","original_commit_id":"00e56f31640e28471bc55c7ccfdc209e31595c29","user":{"login":"erainey","id":259797,"avatar_url":"https://avatars.githubusercontent.com/u/259797?v=3","gravatar_id":"","url":"https://api.github.com/users/erainey","html_url":"https://github.com/erainey","followers_url":"https://api.github.com/users/erainey/followers","following_url":"https://api.github.com/users/erainey/following{/other_user}","gists_url":"https://api.github.com/users/erainey/gists{/gist_id}","starred_url":"https://api.github.com/users/erainey/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/erainey/subscriptions","organizations_url":"https://api.github.com/users/erainey/orgs","repos_url":"https://api.github.com/users/erainey/repos","events_url":"https://api.github.com/users/erainey/events{/privacy}","received_events_url":"https://api.github.com/users/erainey/received_events","type":"User","site_admin":false},"body":"Consists <strike>of the basics</strike> of our pages’ <strong>basic</strong> layout.","created_at":"2015-04-01T14:12:27Z","updated_at":"2015-04-01T14:12:27Z","html_url":"https://github.com/zumba/zumba.github.com/pull/37#discussion_r27571983","pull_request_url":"https://api.github.com/repos/zumba/zumba.github.com/pulls/37","_links":{"self":{"href":"https://api.github.com/repos/zumba/zumba.github.com/pulls/comments/27571983"},"html":{"href":"https://github.com/zumba/zumba.github.com/pull/37#discussion_r27571983"},"pull_request":{"href":"https://api.github.com/repos/zumba/zumba.github.com/pulls/37"}}},"pull_request":{"url":"https://api.github.com/repos/zumba/zumba.github.com/pulls/37","id":32326009,"html_url":"https://github.com/zumba/zumba.github.com/pull/37","diff_url":"https://github.com/zumba/zumba.github.com/pull/37.diff","patch_url":"https://github.com/zumba/zumba.github.com/pull/37.patch","issue_url":"https://api.github.com/repos/zumba/zumba.github.com/issues/37","number":37,"state":"closed","locked":false,"title":"My/Kaue's first article with profile, gists, and grammer fixes.","user":{"login":"neptunz","id":2848087,"avatar_url":"https://avatars.githubusercontent.com/u/2848087?v=3","gravatar_id":"","url":"https://api.github.com/users/neptunz","html_url":"https://github.com/neptunz","followers_url":"https://api.github.com/users/neptunz/followers","following_url":"https://api.github.com/users/neptunz/following{/other_user}","gists_url":"https://api.github.com/users/neptunz/gists{/gist_id}","starred_url":"https://api.github.com/users/neptunz/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/neptunz/subscriptions","organizations_url":"https://api.github.com/users/neptunz/orgs","repos_url":"https://api.github.com/users/neptunz/repos","events_url":"https://api.github.com/users/neptunz/events{/privacy}","received_events_url":"https://api.github.com/users/neptunz/received_events","type":"User","site_admin":false},"body":"","created_at":"2015-03-31T14:13:21Z","updated_at":"2015-04-01T14:12:27Z","closed_at":"2015-04-01T13:56:01Z","merged_at":"2015-04-01T13:56:01Z","merge_commit_sha":"d856f1976cf4ffab743bc4728dab29f565ffdf08","assignee":null,"milestone":null,"commits_url":"https://api.github.com/repos/zumba/zumba.github.com/pulls/37/commits","review_comments_url":"https://api.github.com/repos/zumba/zumba.github.com/pulls/37/comments","review_comment_url":"https://api.github.com/repos/zumba/zumba.github.com/pulls/comments{/number}","comments_url":"https://api.github.com/repos/zumba/zumba.github.com/issues/37/comments","statuses_url":"https://api.github.com/repos/zumba/zumba.github.com/statuses/00e56f31640e28471bc55c7ccfdc209e31595c29","head":{"label":"zumba:kaues-first-article-fixes","ref":"kaues-first-article-fixes","sha":"00e56f31640e28471bc55c7ccfdc209e31595c29","user":{"login":"zumba","id":67415,"avatar_url":"https://avatars.githubusercontent.com/u/67415?v=3","gravatar_id":"","url":"https://api.github.com/users/zumba","html_url":"https://github.com/zumba","followers_url":"https://api.github.com/users/zumba/followers","following_url":"https://api.github.com/users/zumba/following{/other_user}","gists_url":"https://api.github.com/users/zumba/gists{/gist_id}","starred_url":"https://api.github.com/users/zumba/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/zumba/subscriptions","organizations_url":"https://api.github.com/users/zumba/orgs","repos_url":"https://api.github.com/users/zumba/repos","events_url":"https://api.github.com/users/zumba/events{/privacy}","received_events_url":"https://api.github.com/users/zumba/received_events","type":"Organization","site_admin":false},"repo":{"id":5134698,"name":"zumba.github.com","full_name":"zumba/zumba.github.com","owner":{"login":"zumba","id":67415,"avatar_url":"https://avatars.githubusercontent.com/u/67415?v=3","gravatar_id":"","url":"https://api.github.com/users/zumba","html_url":"https://github.com/zumba","followers_url":"https://api.github.com/users/zumba/followers","following_url":"https://api.github.com/users/zumba/following{/other_user}","gists_url":"https://api.github.com/users/zumba/gists{/gist_id}","starred_url":"https://api.github.com/users/zumba/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/zumba/subscriptions","organizations_url":"https://api.github.com/users/zumba/orgs","repos_url":"https://api.github.com/users/zumba/repos","events_url":"https://api.github.com/users/zumba/events{/privacy}","received_events_url":"https://api.github.com/users/zumba/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/zumba/zumba.github.com","description":"Zumba Public Engineering Site","fork":false,"url":"https://api.github.com/repos/zumba/zumba.github.com","forks_url":"https://api.github.com/repos/zumba/zumba.github.com/forks","keys_url":"https://api.github.com/repos/zumba/zumba.github.com/keys{/key_id}","collaborators_url":"https://api.github.com/repos/zumba/zumba.github.com/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/zumba/zumba.github.com/teams","hooks_url":"https://api.github.com/repos/zumba/zumba.github.com/hooks","issue_events_url":"https://api.github.com/repos/zumba/zumba.github.com/issues/events{/number}","events_url":"https://api.github.com/repos/zumba/zumba.github.com/events","assignees_url":"https://api.github.com/repos/zumba/zumba.github.com/assignees{/user}","branches_url":"https://api.github.com/repos/zumba/zumba.github.com/branches{/branch}","tags_url":"https://api.github.com/repos/zumba/zumba.github.com/tags","blobs_url":"https://api.github.com/repos/zumba/zumba.github.com/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/zumba/zumba.github.com/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/zumba/zumba.github.com/git/refs{/sha}","trees_url":"https://api.github.com/repos/zumba/zumba.github.com/git/trees{/sha}","statuses_url":"https://api.github.com/repos/zumba/zumba.github.com/statuses/{sha}","languages_url":"https://api.github.com/repos/zumba/zumba.github.com/languages","stargazers_url":"https://api.github.com/repos/zumba/zumba.github.com/stargazers","contributors_url":"https://api.github.com/repos/zumba/zumba.github.com/contributors","subscribers_url":"https://api.github.com/repos/zumba/zumba.github.com/subscribers","subscription_url":"https://api.github.com/repos/zumba/zumba.github.com/subscription","commits_url":"https://api.github.com/repos/zumba/zumba.github.com/commits{/sha}","git_commits_url":"https://api.github.com/repos/zumba/zumba.github.com/git/commits{/sha}","comments_url":"https://api.github.com/repos/zumba/zumba.github.com/comments{/number}","issue_comment_url":"https://api.github.com/repos/zumba/zumba.github.com/issues/comments{/number}","contents_url":"https://api.github.com/repos/zumba/zumba.github.com/contents/{+path}","compare_url":"https://api.github.com/repos/zumba/zumba.github.com/compare/{base}...{head}","merges_url":"https://api.github.com/repos/zumba/zumba.github.com/merges","archive_url":"https://api.github.com/repos/zumba/zumba.github.com/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/zumba/zumba.github.com/downloads","issues_url":"https://api.github.com/repos/zumba/zumba.github.com/issues{/number}","pulls_url":"https://api.github.com/repos/zumba/zumba.github.com/pulls{/number}","milestones_url":"https://api.github.com/repos/zumba/zumba.github.com/milestones{/number}","notifications_url":"https://api.github.com/repos/zumba/zumba.github.com/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/zumba/zumba.github.com/labels{/name}","releases_url":"https://api.github.com/repos/zumba/zumba.github.com/releases{/id}","created_at":"2012-07-21T15:39:43Z","updated_at":"2015-04-01T13:56:03Z","pushed_at":"2015-04-01T14:11:58Z","git_url":"git://github.com/zumba/zumba.github.com.git","ssh_url":"git@github.com:zumba/zumba.github.com.git","clone_url":"https://github.com/zumba/zumba.github.com.git","svn_url":"https://github.com/zumba/zumba.github.com","homepage":"http://tech.zumba.com/","size":2236,"stargazers_count":4,"watchers_count":4,"language":"HTML","has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":true,"forks_count":3,"mirror_url":null,"open_issues_count":2,"forks":3,"open_issues":2,"watchers":4,"default_branch":"master"}},"base":{"label":"zumba:master","ref":"master","sha":"081b3a56d26f573ece3742d74d3ae7ec5890478f","user":{"login":"zumba","id":67415,"avatar_url":"https://avatars.githubusercontent.com/u/67415?v=3","gravatar_id":"","url":"https://api.github.com/users/zumba","html_url":"https://github.com/zumba","followers_url":"https://api.github.com/users/zumba/followers","following_url":"https://api.github.com/users/zumba/following{/other_user}","gists_url":"https://api.github.com/users/zumba/gists{/gist_id}","starred_url":"https://api.github.com/users/zumba/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/zumba/subscriptions","organizations_url":"https://api.github.com/users/zumba/orgs","repos_url":"https://api.github.com/users/zumba/repos","events_url":"https://api.github.com/users/zumba/events{/privacy}","received_events_url":"https://api.github.com/users/zumba/received_events","type":"Organization","site_admin":false},"repo":{"id":5134698,"name":"zumba.github.com","full_name":"zumba/zumba.github.com","owner":{"login":"zumba","id":67415,"avatar_url":"https://avatars.githubusercontent.com/u/67415?v=3","gravatar_id":"","url":"https://api.github.com/users/zumba","html_url":"https://github.com/zumba","followers_url":"https://api.github.com/users/zumba/followers","following_url":"https://api.github.com/users/zumba/following{/other_user}","gists_url":"https://api.github.com/users/zumba/gists{/gist_id}","starred_url":"https://api.github.com/users/zumba/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/zumba/subscriptions","organizations_url":"https://api.github.com/users/zumba/orgs","repos_url":"https://api.github.com/users/zumba/repos","events_url":"https://api.github.com/users/zumba/events{/privacy}","received_events_url":"https://api.github.com/users/zumba/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/zumba/zumba.github.com","description":"Zumba Public Engineering Site","fork":false,"url":"https://api.github.com/repos/zumba/zumba.github.com","forks_url":"https://api.github.com/repos/zumba/zumba.github.com/forks","keys_url":"https://api.github.com/repos/zumba/zumba.github.com/keys{/key_id}","collaborators_url":"https://api.github.com/repos/zumba/zumba.github.com/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/zumba/zumba.github.com/teams","hooks_url":"https://api.github.com/repos/zumba/zumba.github.com/hooks","issue_events_url":"https://api.github.com/repos/zumba/zumba.github.com/issues/events{/number}","events_url":"https://api.github.com/repos/zumba/zumba.github.com/events","assignees_url":"https://api.github.com/repos/zumba/zumba.github.com/assignees{/user}","branches_url":"https://api.github.com/repos/zumba/zumba.github.com/branches{/branch}","tags_url":"https://api.github.com/repos/zumba/zumba.github.com/tags","blobs_url":"https://api.github.com/repos/zumba/zumba.github.com/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/zumba/zumba.github.com/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/zumba/zumba.github.com/git/refs{/sha}","trees_url":"https://api.github.com/repos/zumba/zumba.github.com/git/trees{/sha}","statuses_url":"https://api.github.com/repos/zumba/zumba.github.com/statuses/{sha}","languages_url":"https://api.github.com/repos/zumba/zumba.github.com/languages","stargazers_url":"https://api.github.com/repos/zumba/zumba.github.com/stargazers","contributors_url":"https://api.github.com/repos/zumba/zumba.github.com/contributors","subscribers_url":"https://api.github.com/repos/zumba/zumba.github.com/subscribers","subscription_url":"https://api.github.com/repos/zumba/zumba.github.com/subscription","commits_url":"https://api.github.com/repos/zumba/zumba.github.com/commits{/sha}","git_commits_url":"https://api.github.com/repos/zumba/zumba.github.com/git/commits{/sha}","comments_url":"https://api.github.com/repos/zumba/zumba.github.com/comments{/number}","issue_comment_url":"https://api.github.com/repos/zumba/zumba.github.com/issues/comments{/number}","contents_url":"https://api.github.com/repos/zumba/zumba.github.com/contents/{+path}","compare_url":"https://api.github.com/repos/zumba/zumba.github.com/compare/{base}...{head}","merges_url":"https://api.github.com/repos/zumba/zumba.github.com/merges","archive_url":"https://api.github.com/repos/zumba/zumba.github.com/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/zumba/zumba.github.com/downloads","issues_url":"https://api.github.com/repos/zumba/zumba.github.com/issues{/number}","pulls_url":"https://api.github.com/repos/zumba/zumba.github.com/pulls{/number}","milestones_url":"https://api.github.com/repos/zumba/zumba.github.com/milestones{/number}","notifications_url":"https://api.github.com/repos/zumba/zumba.github.com/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/zumba/zumba.github.com/labels{/name}","releases_url":"https://api.github.com/repos/zumba/zumba.github.com/releases{/id}","created_at":"2012-07-21T15:39:43Z","updated_at":"2015-04-01T13:56:03Z","pushed_at":"2015-04-01T14:11:58Z","git_url":"git://github.com/zumba/zumba.github.com.git","ssh_url":"git@github.com:zumba/zumba.github.com.git","clone_url":"https://github.com/zumba/zumba.github.com.git","svn_url":"https://github.com/zumba/zumba.github.com","homepage":"http://tech.zumba.com/","size":2236,"stargazers_count":4,"watchers_count":4,"language":"HTML","has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":true,"forks_count":3,"mirror_url":null,"open_issues_count":2,"forks":3,"open_issues":2,"watchers":4,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/zumba/zumba.github.com/pulls/37"},"html":{"href":"https://github.com/zumba/zumba.github.com/pull/37"},"issue":{"href":"https://api.github.com/repos/zumba/zumba.github.com/issues/37"},"comments":{"href":"https://api.github.com/repos/zumba/zumba.github.com/issues/37/comments"},"review_comments":{"href":"https://api.github.com/repos/zumba/zumba.github.com/pulls/37/comments"},"review_comment":{"href":"https://api.github.com/repos/zumba/zumba.github.com/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/zumba/zumba.github.com/pulls/37/commits"},"statuses":{"href":"https://api.github.com/repos/zumba/zumba.github.com/statuses/00e56f31640e28471bc55c7ccfdc209e31595c29"}}}}