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 Jayden or Tiago for help.
Heading Styles Templates and Use Guidelines
Heading 1 should be used sparingly.
You may put a <span class="red"> inside any paragraph or heading to highlight one or more words in SSW red.
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.
- OL 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.
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"
-
- 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
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.
Colors & Branding
What are our colors?
SSW's remarkable 4 squares are in the following colours:
#CC4141 |
#333333 |
#797979 |
#AAAAAA |
When creating designs that incorporate a platform or application, use contextual accent colours which refer to that particular platform:
Angular #DD0031 |
.NET #5C2D91 |
Visual Studio #9455CE |
Blazor #5C2D91 |
Xamarin #3498DB |
Azure #0088D5 |
SharePoint #038185 |
Power BI #F2C811 |
The SSW red
The SSW red is #CC4141, which is a beautiful shade of red.
See the 3 most used color codes - Hexadecimal (web), RGB (computer monitors and TVs), and CMYK (printing) - for the SSW red:
HEX |
#cc4141 |
RGB (Red, Green ,Blue) |
(204, 65, 65) |
CMYK (Cyan, Magenta, Yellow, Black) |
(0%, 68%, 68%, 20%) |
Related links
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 Helvetica Neue font family for SSW logos.
We use Open Sans font family for web content.
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 30 years of experience developing awesome Microsoft solutions that today build on top of Angular, React, Vue, Azure, Azure DevOps (was TFS), SharePoint, Office 365, Blazor, .NET, WebAPI, Dynamics 365, and SQL Server.
Where do we have this?
SSW Addresses
Where do we have this?