Library Tutorials
close
Font size options
Increase or decrease the font size for this website by clicking on the 'A's.
Contrast options
Choose a color combination to give the most comfortable contrast.
Sample Header

TITLE OF PAGE (HEADING 1, CAPS, AQUA)

Explanatory subtitle if you'd like (Heading 3, Gray, Sentence Case). If text is included in header, do not use aqua title. Graphics-only headers are just fine. 

Introductory text here. This should just be the plain old paragraph text. This is a good place for instructions, simplified policies, etc. For spacing purposes, it should be in a different content block than the title of the page and the subtitle. 

For reasons that are inexplicable to me, you need to check your spacing (margins and padding) for every single content block you create. They are not always predictable. Unless otherwise specified, set padding to 10, margins to 0. 

Colors, for reference: Gray (#807f83), Red (#a81e2f), Aqua (#40b6b8), Navy (#173864), Yellow (#Fdba12)

SUBHEADING (HEADING 3, GRAY, ALL CAPS)

This is where the real meat of your general explanation lives. It also serves as a spacer for your call to action box; the call to action box (at right) should be 4 grids wide. If possible, customize the action box to the page it lives on; what did people come to this page hoping to be able to do? 

  • Padding: 10
  • Margins: 0
  • Use square bullets

I WOULD LIKE TO...

GUIDELINES FOR USING IMAGES


Though you can certainly make any size image fit, an image 300 x 200 pixels will play very nicely with Communico's grid system. The image at the left is center-justified in its own content box that is 4 grids wide. 

There may be times that you want your image to wrap around your text; if this is the case, you are encouraged to reconsider your content. Image-wrapping occasionally does some weird spacing things when browsers are resized; having an image be center-justified helps images translate well to mobile. 

This is an example of a picture set in-line with text that will wrap around it. Honestly, it's not my favorite. I can't figure out how to increase the padding on just the image, but I know Brian could fix that. 
My bigger complaint is that once text has wrapped around an image, it just doesn't always look great. Shrink your browser to get the mobile view and compare this image block with the one above it. 
Text wrapping does weird things when browser size is changed. Text wrapping does weird things when browser size is changed. Text wrapping does weird things when browser size is changed. Text wrapping does weird things when browser size is changed. Text wrapping does weird things when browser size is changed. Text wrapping does weird things when browser size is changed. Text wrapping does weird things when browser size is changed. 
600 x 400 block

You may sometimes want a larger picture; larger pictures should be 600 x 400 pixels; for larger pictures, you are strongly encouraged to have each picture in its own content box. 

Bear in mind that larger images mean longer loading times. Use sparingly.  

988 x 707
Sometimes you may want a giant image. I guess that's okay. Images should be no more than 988 pixels wide.
If you need assistance with images for your page, contact Erika; it may require a graphic design request, or may require a stock photo. Do not go rogue with google image search; we want to make sure we have permission to use all the images on our site. 

SAMPLE LAYOUT GUIDELINES - MULTI-SECTION CONTENT

Below you will find guidelines for creating content sectioned off with boxes.  

SECTIONED CONTENT

(H3, AQUA, ALL CAPS)

Do as I say, not as I do: try to avoid having two lines of heading text. Text within a section should be left-justified, with headings centered on the box. 

To include the border, click on block settings and add a border. The border should be Navy (#173864) at 3 wide. 

Your content box width can vary depending on your needs. Bulleted lists should utilize square bullets

Spacing for content boxes: 

  • Padding
    • Top & Bottom: 18
    • Left & Right: 20
  • Margins
    • 5 all the way around 

SECTIONED CONTENT

It is acceptable to have content boxes of differing heights next to one another, though do your best to avoid a difference such as these three. Consider reconfiguring your layout or simplifying your content to make things look more streamlined. 

SECTIONED CONTENT

Please use no more than 3 sections per row. 

Some general guidelines: use your sections to convey the importance of information. Whole row-sections will get more attention than multiple items in a row. 

Grouping items by row conveys similar theme, action, or interest level. 

IF A SECTION TAKES UP A FULL ROW, LEFT JUSTIFY THE HEADING

Having a section take up a full row conveys importance; it can also be a nice visual break. In all things, remember this: if you're worried that your page looks too busy, it does. Sectioned content should break information into digestible bits and should be easily scannable. 

When designing a page, be sure to shrink your browser to preview your layout on mobile as well! 

SAMPLE LAYOUT GUIDELINES - MULTI-SECTION CONTENT WITH IMAGES

Sometimes, you will want content but not necessarily the boxes. Here are some image sizes to help distinguish content with images. 

SECTIONED CONTENT WITH IMAGES - 3

Please use no more than 3 sections per row. 

For a row with 3 sections, use images that are 300 x 200 pixels. 

Grouping items by row conveys a similar theme, action, or interest level. 

You may find a container box useful in helping you achieve all your layout goals. 

SECTIONED CONTENT WITH IMAGES - 3

Please use no more than 3 sections per row. 

For a row with 3 sections, use images that are 300 x 200 pixels. 

Grouping items by row conveys a similar theme, action, or interest level. 

You may find a container box useful in helping you achieve all your layout goals. 

SECTIONED CONTENT WITH IMAGES

Please use no more than 3 sections per row. 

For a row with 3 sections, use images that are 300 x 200 pixels. 

Grouping items by row conveys similar theme, action, or interest level. 

SECTIONED CONTENT WITH IMAGES - 2 sections

If you find that two sections per row suits your purposes, use images that are 450 x 255 pixels. 

Center justify headings, left justify copy. 

SECTIONED CONTENT WITH IMAGES - 2 sections

If you find that two sections per row suits your purposes, use images that are 450 x 255 pixels. 

Center justify headings, left justify copy. 

HERE ARE LAYOUT EXAMPLES

Example 1: Equally distributed content boxes feel clean and organized.

SECTIONED CONTENT

Please use no more than 3 sections per row. 

Some general guidelines: use your sections to convey the importance of information. Whole row-sections will get more attention than multiple items in a row. 

Grouping items by row conveys similar theme, action, or interest level. 

SECTIONED CONTENT

Please use no more than 3 sections per row. 

Some general guidelines: use your sections to convey the importance of information. Whole row-sections will get more attention than multiple items in a row. 

Grouping items by row conveys similar theme, action, or interest level. 

SECTIONED CONTENT

Please use no more than 3 sections per row. 

Some general guidelines: use your sections to convey the importance of information. Whole row-sections will get more attention than multiple items in a row. 

Grouping items by row conveys similar theme, action, or interest level. 

SECTIONED CONTENT

Please use no more than 3 sections per row. 

Some general guidelines: use your sections to convey the importance of information. Whole row-sections will get more attention than multiple items in a row. 

Grouping items by row conveys similar theme, action, or interest level. 

Example 2: Too many boxes in different sizes ends up looking chaotic! If you have content that calls for this kind of layout, break it up with a section that doesn't have a border. White space is your friend. 

SECTIONED CONTENT

Please use no more than 3 sections per row. 

Some general guidelines: use your sections to convey the importance of information. Whole row-sections will get more attention than multiple items in a row. 

Grouping items by row conveys similar theme, action, or interest level. 

SECTIONED CONTENT

Please use no more than 3 sections per row. 

Some general guidelines: use your sections to convey the importance of information. Whole row-sections will get more attention than multiple items in a row. 

Grouping items by row conveys similar theme, action, or interest level. 

SECTIONED CONTENT

Please use no more than 3 sections per row. 

Some general guidelines: use your sections to convey the importance of information. Whole row-sections will get more attention than multiple items in a row. 

Grouping items by row conveys similar theme, action, or interest level. 

SECTIONED CONTENT

Please use no more than 3 sections per row. 

Some general guidelines: use your sections to convey the importance of information. Whole row-sections will get more attention than multiple items in a row. 

Grouping items by row conveys similar theme, action, or interest level.