What's this for?

​Designers, developers, and business partners need to work together to give Connect NCDOT's end users a consistent, predictable, and useful experience.  Follow the links below for guidnace on page layouts, HTML grid layouts, CSS classes, and interaction examples.

 Page Layouts, Masterpages, CSS

  • ​Do not add additional CSS files to the masterpages.

 Javascript Development Guidance

  • CDN Javascript files are not allowed.

  • Vanilla JavaScript is preferred for most smaller JavaScript needs.jQuery is loaded via the page's masterpage, and is available on all site pages, across all collecitons.

  • ncdot-site-scripts.js is loaded on all pages, as well

  • Do not add additional JS files to the masterpages.  Load them via ncdot-site-scripts (if used site-wide) or via Content Editor/Script Editor web part

  • Store non-minified versions of JS files in the same directory (say, Style Library) as your minified file.

Responsive Grid

The HTML Grid text above is an H3 tag. The Web Part's title is hidden

I am HTML content loaded via Content Editor Web Part. I am a .html file that lives in a document library.

Gray color below just for illustration, grid has no background color. Add an additional class of .no-margins for less gap

100

90
10

80
20

70
30

66
66

60
33

50
50

33
33
33

40
60

60
40

HTML Elements

Blockquote

This text is quoted. A block of quoted text like this is particularly useful when presented as a pull-quote within an article of text.


Paragraph Text

This is a paragraph of text. Some of the text may be emphasised and some it might even be strongly emphasised. Occasionally quoted text may be found within a paragraph …and of course a link may appear at any point in the text. The average paragraph contains five or six sentences although some may contain as little or one or two while others carry on for anything up to ten sentences and beyond.

Alert
This is an error feedback message.

With class=alert success

With class=alert warning

With class=alert full-stop.


Buttons



Headings

Level one heading

Level two heading

Level three heading

Level four heading

Level five heading
Level six heading
Lists
  1. First list item
  2. Second item in a list of ordered items
  3. Third item in the list

  • First list item
  • Second item in a list of ordered items
  • Third item in the list
Was this page helpful?