Style main reference guide

The Assembla’s styles has been updated and the stylesheets files reorganized. Designers and developers who are about to implement a mockup, create a new page or modify existing styles should use the following references.

Style guides

In the following wiki pages you can find graphic and code samples of common layout objects used on Assembla pages:

• Code style
• Style - Basics
• Style - Forms
• Style - Links and Buttons

Stylesheets files structure information

On the stylesheet restructure, we organized the styles on “breakout/public/stylesheets/” as base styles, tools styles, user styles and home page styles.

Base stylesheets

The standard base styles can be found on the base stylesheet “blue_site.css”. This is where are located the basic and general styles that are used through Assembla’s pages. Any style that are commonly used on Breakout pages must be here, be sure to check this stylesheet before creating new styles.

The styles used on Assembla header are in: “top-bar.css”. Also here you can find the submenu standard styles used on the User/Money page and on Tickets, Staffing and Portfolio Manager tools.

Important:

• Be aware that a modification to a style in “blue_site.css” or “top-bar.css” will affect the entire system.
• Try not to create new styles, check above linked Style Guides and “blue_site.css”, you'll find that almost any interface layout element needed are defined there. Check existing layouts, find out the styles used there and reuse it as much as possible.
• If you need to modify any property of an existing style, ie: the paddings or margins of ".box", you can add a cascade style that only affects that particular layout element, like "#content .tickets .sidebar .menu-sidebar .box".
• Don't create new stylesheet files unless you are building a layout with specific characteristics like the Tickets or Milestones tool pages. Consult with the Team if you consider that a new stylesheet file is necessary.
• Read this page before adding new styles to be sure where that style belongs. When adding a new style to its correspondent stylesheet, always add a reference comment.
• If you are modifying an existing page that uses specific "no standard" styles, check if the old styles that you are replacing are used on other pages, if not, delete it, if you are not sure, comment it on the stylesheet and move it at the bottom of the stylesheet, under the questionable styles comment block.
• Always avoid the use of inline styles, in “blue_site.css” you'll find a block of "Utilities" styles that were created to prevent the use of inline styles for floats, display, center text and to add or remove margins and paddings.
• On the bottom of the stylesheets, there are a commented line that separates old and questionable styles, don't use those styles.

Tools styles

Some tools don’t have its own stylesheet becasue they use simple layouts and needs just a few specifc styles. These Tool’s specific styles can be found on “blue_spaces.css”, if you are creating a new tool or style for an existing tool, this where it belongs. The rule is that if some of these styles are needed and used on more than one tool, that style should be considered as a standard style and moved to the base stylesheet: “blue_site.css”. These are the tools that uses its own stylesheet file:

• Wiki - “wiki_content_space.css”
• Tickets - “tickets.css”
• Milestones - “milestones.css”
• Branding - “branding.css”
• Chat - “chat-tool.css”, “chat-log.css”, "assembla_chat_tool.css"
• Stream - “event.css”
• Staffing - "jobs.css"
• Fork - "fork.css"
• Files - "files_tool.css"
• Messages - "messages-tool.css"
• Branding - "Branding.css"
• Portfolio Manager - "portfolio_manager.css"

User styles

The general styles used on user pages (Start page, Profile, Time, Money and Orientation) are located in “blue_user.css”.

Home page styles

This styles are used on the Assembla home page as well on public Assembla pages:

• Home Page - “index.css”, “index-ie7.css”, “index-ie6.css”
• Features - "features.css"
• Catalog - “catalog.css”
• Jobs - “jobs.css”
• Plans - “plans.css”

General stylesheets

The following styles are shared on Assembla pages and controllers:

• Layout's header and menu styles - "top-bar.css" and "top-bar-ie7.css"
• Internet Explorer fixes - "ie_only.cs"
• Print styles - "print.css"

Stylesheets under revision

This styles are still under revision and should not be used or modified:

• redbox.css
• scaffold.css
• typo.css
• calendar.css