Pages
Basic Styles: index of many common site elements and stylesItem flows: describes how content is reflowed within specific breakpointsFixed Images: Examples of how flexible images are composed, sized and used in the RL responsive environmentFlexible Images: Examples of how flexible images are composed, sized and used in the RL responsive environment
This is the Rocket Lawyer Responsive Web Design Style Guide.
Current as of: February 07, 2014
Notes
The best way to use this guide is to start making a document.
Best Practices
Images - Refer to the Images section for best practices on Images, but in general use the Adobe Illustrator guide to help you create images that are the right size and are compositionally correct for each breakpoint
Columns - Column blocks by default require a -10px margin on their Row element containers in order to keep their column content aligned to the default grid.
To get around this is a two part process:
1. append a "margin-zero" class to the parent Row of the column block, and
2. set the padding of the columns within the Row as you like manually, in order to ensure they align to the grid as desired.
Spacing - All elements have margin and padding. You will need to adjust on a case by case basis to ensure appropriate spacing because of how CSS attributes collapse.
Coming Soon
These necessary features are coming soon:
1. Symbol libraries: so you can have repeated and stored re-usable elements stored and maintained in a common place
2. Grids: Fully customizable grids and breakpoints
3. Icon fonts: We should be able to handle the icon font of our site soon
Devices - I'm considering removing one of the button sizes from the phone devices, as we don't need three button sizes on phones and may only need one but I'm reviewing this
