Editorially Application Styleguide

This is the styleguide for the application portion of Editorially, hopefully it will get the marketing site styles added on to it quickly. I am using as much as I can some base layout things from the application itself and will be using all the application CSS to create the modules, buttons, etc that are currently in the code. The hope is that if styles are old or not in use, we will find them and be able to delete them as we go through this as a team.

Layout styles for the app are contained in two places, dashboard.scss and editor.scss (and the files it includes). I'm using the basic dashboard.scss layout for this page.

We are using Sass and Compass throughout the CSS, so where applicable this guide shows the variables or mixins.

NOTE: there are some inline styles being used here, this is just to make things layout and visible, such as div sizing for the color blocks. In production we would obviously not do this. In addition - we need to start using Sass more, for variables and other features to make the CSS a bit leaner.

List of styles I can't see where they are used

• .help-tips
• .scrolltest
• .sect-account (SR - I think these are from the old account modal in dashboard.scss)
• The portion in editor.scss where it is all the margin-bottoms and min-heights
• Are we using rounded icons? There are styles but not sure if I've seen any in the app.

Color palette used

This is all inline. TODO: Make all these colors variables and grep through the styles to swap them out.

Global Link and Button Styles

Buttons shown as a links, BUT, they can be used with labels and inputs in forms and also button tags, actually that's probably how they SHOULD be used There are examples below for the button and the label/input styles. Any divs with background colors or padding are simply there to be able to see these buttons in the guide.

A note on the above button styles, the .btn-ico style needs to be used in conjunction with a icon style so the icon appears, but you get the drift of sizing and how much padding is added in here. There are small, medium and large styles for this. In addition the small, medium, and large button styles could be used with any of the above, these are all just extensions of the main button style.