We are in release 3.5 "Pigeon" - Our website is fully Bootstrapped. Please refer to their documentation for information about how to use Bootstrap correctly.

This page is a reference with templates for SSW designers and web content editors. We have tried to make it as simple as possible, under the assumption that users know how to correctly format tags, add classes and understand basic CSS.

Each content page in SSW Metro have:

  • A Title
  • A Sidebar - See the Tips & FAQ for how to remove this feature

SharePoint is a good template to base your new pages from.

If you have difficulties with this document, please ask Rebecca or Tiago Araujo for help.

Heading Styles Templates and Use Guidelines

You may put a class "first" on any paragraph or heading if you wish the first word to be red. You may also do this manually with a <span class="red">

Heading 1 should be used sparingly.

Heading 1 will always have the first word as red. There must be no break between the heading tag and the text in the code. It must be all one line.

Heading 2 is a good size for content

We should use heading 2 as the default heading for most text. The heading already contents the title of the page in h1, so there is technically no reason to use anything other than h2 in content.

Heading 3 is a comfortable size for content

This is a good size for subheadings within content

Heading 3 .special should be used sparingly

Alternate bar style heading

Heading 4 is used for inline headings

This is a good heading to use for small paragraphs.

Heading 5 is smaller

This is a spare heading that is not used by much. I do not think we will have much use for it since headings 2-4 should cover most cases.

Heading 6 is a special heading used for mainly the sidebar

A fancy heading.

Lists Design Templates and Style Samples

  • UL no class
  • List styles work on multiple paragraphs within a list point, as shown in this example.

    Properly formatted, this is what the list styles should look like.

  • UL class="good"
  • List styles work on multiple paragraphs within a list point, as shown in this example.

    Properly formatted, this is what the list styles should look like.

  • UL class="bad"
  • List styles work on multiple paragraphs within a list point, as shown in this example.

    Properly formatted, this is what the list styles should look like.

  1. OL no class
  2. List styles work on multiple paragraphs within a list point, as shown in this example.

    Properly formatted, this is what the list styles should look like.

Tables Design Templates and Style Samples

Default

This is a plain table, borderless and has no class:

Header Row
Cell 1 Cell 2
Cell 1 Cell 2

Normal

Styled table with class "normal"

Header Row
Cell 1 Cell 2
Cell 1 Cell 2

Data

Styled table with class "data"

Header Row
Cell 1 Cell 2
Cell 1 Cell 2

Quotes and Text Style Samples

Blockquote can wrap paragraphs and work correctly even without paragraphs.

This block of text is not wrapped in a paragraph. Span within the blockquote is use to denote speaker

highlight: works on paragraphs, divs and spans.

greybox: works on divs and paragraphs.

Pre tags used for code snippets. Lorem ipsum dolor sit amet, 
    consectetur adipiscing elit. Pre(serve) displays
 exactly
 
             as is.
             
code: I find pre tags very awkward to use, so you can create the same effect by using div class="code"

Images and Figures Style Samples

This div has a class "greybox". This is used for text examples.
Figure: Bad Example - This dl has a class="bad"
You can use pre or div class="code" for code examples.
Figure: Good Example - This dl has a class="good"
SSW logo
Figure: This is an image inside a dt. You do not need use any class on image examples unless it is good or bad.

Read rule: Do you use the right HTML/CSS code to add images and captions?

How To Embed Videos

Add the code as following:

<div class="video-player" data-id="VIDEO_ID"></div>
There is also an optional data-youtuberes attribute that you can add to the embed code to set the resolution of the thumbail. This is used if a max resolution thumbnail is not available. Possible values in order of quality are: maxresdefault, hqdefault, mqdefault, sddefault and default
<div class="video-player" data-id="VIDEO_ID" data-youtuberes="hqdefault"></div>

For more info, read the rule: Do you know the right way to embed a YouTube video?

How to Use the Lightbox

We are now using SwitchBox for responsive features. Usage is the same.

<a href="linkURL" class="lightbox" title="ImageSubtitle" rel="GalleryName"> <img src="imageURL" /></a>
  • Use class "lightbox" on links to activate lightbox
  • Use same rel text on multiple links to create gallery in lightbox
  • Use title text to create image subtitle

Buttons Design Templates and Style Samples

You may also use Bootstrap's button classes.

Each button has two classes; color (red, black, green) and icon (next, done, add). The default is black with no icon. You can mix the classes to make whatever button you want.

Link buttons

Red, Done Green, Add back

Input buttons

The smaller buttons have the classes 'bookNow' and 'sold-out'. Their colors are default:

Book Now Sold Out

<a><span class="sold-out">Sold Out</span></a>

Bootstrap Features

These features have been migrated. Refer to Bootstrap's documentation for more details.

Tooltips

Example: Bootstrap Tooltip

This structure looks like this:

<a data-content="Bootstrap Tooltip Lorem Ipsum." rel="popover" class="bootstrap-tooltip" data-original-title="Bootstrap Tooltip Title" href="#">Bootstrap Tooltip</a>

Sliders

To add a slider, use the following contentPlaceholder in your aspx page:

<asp:Content ContentPlaceHolderID="Slider" runat="server">
<div id="Slider" class="carousel slide hidden-xs" data-ride="carousel">

Bootstrap slider goes here

</div>
</asp:Content>
  • <asp:Content ContentPlaceHolderID="Slider" runat="server"> determines the placing of the Slider.
  • <div class="carousel"> runs the Bootstrap slider and all the custom css attached to it.

    Thus, if you want to have a header image but not the slider functionality, you can simply omit the div id="Slider"

  • The class "hidden-xs" hides the slider on mobile devices. You can remove this, but it's better if you leave it in.
  • Slider images must be 1200px x 430px. IMAGES MUST BE COMPRESSED. They will be resized to fit the website.
  • Slider will work with the lightbox - use class="lightbox" on the links

Forms

As of 3.5 Pigeon, we are no longer making custom styles for fields. Refer to Bootstrap's documentation for the correct formatting.

Accordion

Our site uses Bootstrap collapsing panels.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
The accordion style on the homepage is a custom one for that section. You'll have to copy it's #Location id if you want to use it.

Tips & FAQ

My H1 isn't rendering the first word in red!

This is likely because you have a space between the <h1> and text. Line breaks also count as one space.

<h1>
Heading goes here</h1>
Figure: Bad Example - This has a break between heading tag and text
<h1>Heading goes here</h1>
Figure: Good Example - This heading is all one line

What are our colors?

The SSW red is #CC4141, which is a beautiful shade of red.

HEX #cc4141
Red 204
Green 65%
Blue 65%
Cyan 0%
Magenta 68%
Yellow 68%
Key (black) 20%
Figure: SSW red in the 3 most used color codes: CMYK (printing), RGB (computer monitors and TVs) and Hexadecimal (web design)

SSW's remarkable 4 squares are in the following colours:

#AAAAAA #797979 #333333 #CC4141

Because Metro loves strong bold colors, we also have a selection of other hues although these should be used sparingly for the sake of "branding".

#CCCCCC #9E9E9E #414141 #F7941D #448CCB #8DC63F

The paragraph padding seems strange :/

Your content should be wrapped in a div class="section". You should not be relying on br or p tags to get the correct padding. Lines within a div.section should be wrapped in paragraphs.

Your content should never be sitting naked on the page, it should always be wrapped in paragraphs. Refrain from using breaks.

Can I make h3 bigger?

No. There is absolutely no reason you should need to change heading sizes. Your content should be ordered correctly in terms of page heading (h1), followed by section headings (h2), then by sub-section headings (h3) and paragraph headings (h4). These are correctly determined by the size and at no point should you ever have to change the CSS.

Make sure your content is correctly formatted before changing the CSS.

How to I make a slider image?

Metro uses a strong typography influence. If you are not a designer, please refer this work to a designer.

Use type as your centerpiece and work around it. I have no guidelines on colors or typeface because this should be independent to your needs. If you are uncertain, Helvetica will be an appropriate starting point.

How do I hide the sidebar?

If you don't want to show the default sidebar ("Our Experience", "Get Started" and "Newsletter") on your page, simply add the following code, with ContentPlaceHolderID set as "sidebarcontainer":

<asp:Content ID="Side" ContentPlaceHolderID="sidebarcontainer" runat="server">
<!--THIS IS EMPTY ON PURPOSE-->
</asp:Content>

How do I hide the "external link" icon?

We have a script that automatically adds an icon to all external links.
If you don't want to show that icon on a particular external link, simply add the class "ignore" to the link tag:

<a href="http://www.google.com">Google</a>
This code will give you this: Google
<a href="http://www.google.com" class="ignore">Google</a>
This code will give you this: Google

How do I edit the menu?

The json file describing the menu can be found on GitHub menu.json .

Edit the file, commit, then make a pull request and get someone to approve it.

The json format is pretty much self explanatory

    {
        "text": "LINK NAME",
        "navigateUrl": "LINKURL",
        "navigateUrlOnMobileOnly": false
        "cssClass": "Popular",
        "breakListBefore": true
    }
  • Add "cssClass": "popular" if you want the label to show up on the menu.
  • Add "cssClass": "map" if you want the map icon to show up on the menu.
  • Add "cssClass": "featVideo" if you want the youtube icon to show up on the menu.
  • Add "breakListBefore": true if you want to display this item on a new column

How do I change a page's Meta Description?

Courtesy of Eric:

Add the YELLOW section to the ASPX page. You can then add whatever tags you require in the head tag (see GREEN for an example)

<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderScripts" runat="server">
<meta name="description" content="Philosoraptor says ‘Does not expecting the unexpected make the unexpected become the expected?’" /> <!-- Type whatever the heck you want here and it will show up in the head tag -->
</asp:Content>

How do I use Isotope?

Leave this to a designer or a developer if you are neither.

Isotope consists of two parts: the filter and the content.

The Filter

<ul id="filters" class="option-set">
 <li><a href="#filter" data-filter=".default" class="selected">Default</a></li>
  <li><a href="#filter" data-filter=".tag1">Tag #1</a></li>
</ul>
  • Green: Make sure these match. Use #filters to use the existing CSS styles.
  • Yellow: These are the tags you'll be using later. Make them consistent and logical.
  • Blue: Add this to have a default selected class.
  • Red: Isotope needs this to know what is your filter selectors.

The Content

<div id="isotope">
 <div class="grid" style="width:50%;"></div>

 <!-- Repeat this template -->
 <div class="item webdev all">

  CONTENT

 </div>
 <!-- End Repeat -->

</div>
  • Green: Isotope needs this to know what your content is. All your items must be wrapped inside a div#isotope
  • Red: The size of the grid is based on this hidden div. This is the size template isotope copies for all other items. This example has width:50% so that the isotope renders a two column grid, but you can change it to whatever you need. If your isotope is not forming a proper grid, it's likely because your div.grid is not set correctly.
  • Blue: You must add this class to each item so that isotope knows what is being filtered.
  • Yellow: These are the tags you've used in the filter.

For further questions, see the Isotope documentation.

How do I 301 redirect a page?

Delete EVERYTHING on your redirect page and add just this:

 <% Response.RedirectPermanent("NEW PAGE URL HERE") %>

You will not need a masterpage or a language specified.

David Burela: Also, when you are deleting everything in the .aspx file and replacing it with the redirect, make sure you also delete the .aspx.cs file that is attached to it. Otherwise, it is dead code that will need to be kept up to date when we change method names.

What's the SSW font?

We use the Helvetica Neue font family - It's the font for SSW logos.

For large headings we use the "Light" variation.

"Regular" variation is used for body content for better readability.

SSW Master Texts

SSW Mission

To find the best way to do everything.

To identify and use best practices (in technology, DevOps, and Scrum) to navigate the dangers of software development and produce the best possible software solutions.

Where do we have this?

SSW Experience + Technologies

SSW Consulting has over 25 years of experience developing awesome Microsoft solutions that today build on top of Angular, React, Azure, Azure DevOps (was TFS), SharePoint, Office 365, .NET, WebAPI, Dynamics 365 and SQL Server.

Where do we have this?

SSW Addresses

Always refer to Our Offices page to get our master addresses.

Where do we have this?