This is the reference implementation for CSS to comply with the style guide created by the UX team. The PDF for version 1.1 of the styleguide can be downloaded here.
This is version 1.1.21 of the style guide CSS. To use in a project, you'll need the following:
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://static.ux.cimpress.io/mcp-ux-css/1.1/css/mcp-ux-css.min.css" charset="utf-8">
<!-- Compiled and minified JavaScript -->
<script src="https://static.ux.cimpress.io/mcp-ux-css/1.1/js/mcp-ux-css.min.js"></script>
<!-- Fonts -->
<link href="//cloud.typography.com/7971714/6011752/css/fonts.css" rel="stylesheet" type="text/css" />
<script src="https://use.fontawesome.com/a1df440eb7.js"></script>
You will also need Bootstrap's JavaScript, but NOT the CSS (that's included). Grab the latest here.
Using React? Check out the React components instead of battling with jQuery.
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Application typography is the default. For marketing typography, add class="marketing" to a parent container. Do not mix the two styles without consulting UX first.
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
This line of text is meant to be treated as fine print.
The following snippet of text is rendered as bold text.
The following snippet of text is rendered as italicized text.
An abbreviation of the word attribute is attr.
This is a paragraph that includes some highlighted text. It is long so we can see how it wraps. This text has been highlighted but it is followed by some more normal text that has not been highlighted.
This is inserted text
some code stuffFusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Syntax highlighting is provided based on the classes from highlight.js. The default is a light theme, opt into the dark theme by adding class="dark-theme"
To get rid of extraneous padding, add class="highlight-block" to the containing <pre> block.
POST /task?id=1 HTTP/1.1
Host: example.org
Content-Type: application/json; charset=utf-8
Content-Length: 137
{
"status": "ok",
"extended": true,
"results": [
{"value": 0, "type": "int64"},
{"value": 1.0e+3, "type": "decimal"}
]
}
/**
* @author John Smith <john.smith@example.com>
*/
package l2f.gameserver.model;
public abstract class L2Char extends L2Object {
public static final Short ERROR = 0x0001;
public void moveTo(int x, int y, int z) {
_ai = null;
log("Should not be called");
if (1 > 5) { // wtf!?
return;
}
}
}
function $initHighlight(block, clss) {
try {
if (clss.search(/\bno\-highlight\b/) != -1)
return process(block, true, 0x0F) +
"foo";
} catch (e) {
/* handle exception */
}
for (var i = 0 / 2; i < classes.length; i++) {
if (checkCondition(classes[i]) === undefined)
console.log('undefined');
}
}
export $initHighlight;
[
{
"title": "apples",
"count": [12000, 20000],
"description": {"text": "...", "sensitive": false}
},
{
"title": "oranges",
"count": [17500, null],
"description": {"text": "...", "sensitive": false}
}
]
POST /task?id=1 HTTP/1.1
Host: example.org
Content-Type: application/json; charset=utf-8
Content-Length: 137
{
"status": "ok",
"extended": true,
"results": [
{"value": 0, "type": "int64"},
{"value": 1.0e+3, "type": "decimal"}
]
}
/**
* @author John Smith <john.smith@example.com>
*/
package l2f.gameserver.model;
public abstract class L2Char extends L2Object {
public static final Short ERROR = 0x0001;
public void moveTo(int x, int y, int z) {
_ai = null;
log("Should not be called");
if (1 > 5) { // wtf!?
return;
}
}
}
function $initHighlight(block, clss) {
try {
if (clss.search(/\bno\-highlight\b/) != -1)
return process(block, true, 0x0F) +
"foo";
} catch (e) {
/* handle exception */
}
for (var i = 0 / 2; i < classes.length; i++) {
if (checkCondition(classes[i]) === undefined)
console.log('undefined');
}
}
export $initHighlight;
[
{
"title": "apples",
"count": [12000, 20000],
"description": {"text": "...", "sensitive": false}
},
{
"title": "oranges",
"count": [17500, null],
"description": {"text": "...", "sensitive": false}
}
]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereUpgrading from panels to cards is fairly straightforward.
class="panel" class="card"
class="panel-heading" class="card-header"
class="panel-body" class="card-block"
Cards can be organized into groups, decks, or columns.
Contextual variations on cards are not recommended.
Card linkPanels and Wells are not recommended. No styles for wells are supplied. Panels are styled to match cards, but since behavior patterns may be different, we cannot guarantee that they'll work automatically. Upgrading from panels to cards can be done by following the instructions above. If you have further questions about a specific use case, contact UX.
| # | Column heading | Column heading | Column heading |
|---|---|---|---|
| 1 | Column content | Column content | Column content |
| 2 | Column content | Column content | Column content |
| 3 | Column content | Column content | Column content |
| 4 | Column content | Column content | Column content |
| 5 | Column content | Column content | Column content |
| 6 | Column content | Column content | Column content |
| 7 | Column content | Column content | Column content |
| # | Column heading | Column heading | Column heading |
|---|---|---|---|
| 1 | Column content | Column content | Column content |
| 2 | Column content | Column content | Column content |
| 3 | Column content | Column content | Column content |
| 4 | Column content | Column content | Column content |
| 5 | Column content | Column content | Column content |
| 6 | Column content | Column content | Column content |
| 7 | Column content | Column content | Column content |
Warning!
Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
