Welcome to the eMeals Styleguide 1.0

The style guide was written to help us be able to reuse elements and better organize our code for the front-end of the website. On this page you'll find a guide to the structure of the CSS files that we're using. You'll also find some basic guide elements to help with HTML setup for most of our pages that fit into the new style guide. Thanks for reading. Hope this helpful!

CSS Code Structure

This code right now all lives at /css/style-guide/ - that may change in the future but for now that is where it lives. The list below is alphabetical with what you'll see inside the SG directory.

  • bourbon - Bourbon is a SASS Framework that helps handle some functions for us. There are a lot of mixins that come with it naturally that you'll notice across the site. Things like font-size: em(35); are Bourbon elements. You should never need to edit anything inside of this folder. Bourbon Documentation.
  • build - build elements are 100% necessary to the full build of the site. These are things that will be called into the main CSS. Some of them actually spit out code, some of these are just support files that won’t actually cause any code to be written.
    • _columns.scss - this contains all the code that generates that different auto-columns and manual columns that we use on the site. These are global so any change here will effect anything using those mixins
    • _global.scss - as expected these are global and high-level elemtns. Things like Float classes, Clearfixing, Mobile and Desktop hiding. This file should grow as we start to share more and more elements we can move them into Global.
    • _grid-settings.css - this has all of the code that builds our grid that eMeals now lives on. The grid is a 12 column grid built at 952px wide site - with 61px for each column and a 20px gutter. Edit this file cautiously.
    • _mixins.scss - this contains Mixins that Bourbon uses. You'll find plugs for a lot of things that we do on the site. Columns, Headline and Body fonts, Clearfixing, Layout modules, Responsive Mixins to call @media queries, transitions, etc. Anything that could be reused as a plugin will go in here.
    • _reset.scss - Based on Eric Meyers CSS reset - this resets things like margins on paragraphs and junk like that. It's not something that needs to be edited.
    • _small-screens.scss - not currently being used.
    • _type.scss - Global Type Treatments. Includes font families, sizes, colors, over-rides, etc. If it's a font that would be reused it should get a class and be dropped in here for later use.
    • _variables.scss - Contains our color variables and all of our screen size variables.
  • emeals-styleguide.scss - This is our main CSS file. It's the builder file but it also has the code for Body, Header and Footer in it as well as media queries involving the Body, Header and Footer (Global Layout pieces). It's the frame code.
  • ie - contains only 1 file at this time which is ie-global.css (IE9 and Down ONLY). This is just the IE stuff that we're required to have until we stop supporting IE9.
  • neat - This is a Bourbon Plugin called "Bourbon Neat" - it's job is to help us with the GRID layouts. There is nothing to edit in here as this is a plugin. Bourbon Neat Docs. I'll give examples of the most commonly used mixins from there below.
  • pages - Pages elements are very specific pages. Homepage, Landing pages, Meal Plans Pages, Stores pages are all included in here. These pages don't really share anything between them.
    • _all-pages.scss - This contains Shared elements that all or some of the pages use together. Things like the Blue/Orange feature box on some of the pages at the top, or sidebar / content layouts shared. It will have styles for some specific pages that are related. If it was a very specific page that only happened once it would get it's own sheet in pages, but like Terms and Privacy use the same basic things, they live in here.
    • _homepage.scss - Anything related to the homepage goes here.
    • _meal-plans.scss - Specific to the single Meal Plans pages - like Clean Eating or Paleo.
    • _stores.scss - The Store specific pages
  • partials - These are more elemental elements. Things that would be shared between the different pages.
    • _buttons.scss - All the eMeals Button Configurations.
    • _elements.scss - Divs, Paragraphs, Ordered and Unordered Lists, Definition Lists, Special paragraphs, Links. Elements that all the pages will use.
    • _forms.scss - Forms, Inputs, Textareas, (Submit buttons are in buttons.scss), really anything to do with forms.
    • _meal-plan-grids.scss - The Different Meal Plan grid layouts. There is one for the homepage, one for the Meal Plans Overview page, etc. Anywhere the Meal Plans are spit out in a grid will use these styles.
    • _olark.scss - The Olark code for that little helper window.
    • _popup-build.scss - Contains all of the code for any popup on the site. It builds into 2 different files. One used to display the popups on the Style Guide reference - and one that actually builds popup.css that gets loaded into the popup windows.
    • _sidebars.scss - Code for the site's sidebars are in there. Sidebars currently only really appear on the Our Company and Press type of pages. We are calling a "sidebar" something that really runs the full height of the page. Not a side by side element. See Management Team
  • popup.css / popup.scss - This builds the CSS that the actual popups call. So instead of calling the full emeals-styleguide.css again in the Popups - this just called the pieces that we need to make the popups happen so changes we make say to Type would automatically appear in the Popups as well as on the site.