Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Compiled CSS

  • Loading branch information...
commit 2eb627566300ca257c16cca7809c77da927eddb4 1 parent 0cf075b
Jacob Rask authored
Showing with 79 additions and 14 deletions.
  1. +79 −14 underscore.css
93 underscore.css
View
@@ -34,15 +34,18 @@ Set default styles in IE 8/9 and other older browsers. */
/** Typography
------------------------------------------------------------------------ */
-._ code, ._ kbd, ._ pre, ._ samp {
- /* `font-family` set oddly in Safari 5 and Chrome. */
+/* Consistent font styling for inline monospace elements. */
+._ code, ._ kbd, ._ samp, ._ var {
font-family: monospace;
+ font-size: 0.9em;
+ font-style: normal;
}
-/* Set consistent wrap properties on preformatted text. */
._ pre {
+ font-family: monospace;
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
+ line-height: 1.3;
}
/* Prevent `sub` and `sup` affecting `line-height` in all browsers. */
@@ -55,19 +58,28 @@ Set default styles in IE 8/9 and other older browsers. */
._ sup { top: -0.5em; }
._ sub { bottom: -0.25em; }
+._ abbr {
+ font-style: normal;
+ text-transform: none;
+}
+._ abbr[title] {
+ cursor: help;
+ border-bottom: 1px dotted;
+}
/** Embedded content
------------------------------------------------------------------------ */
._ img {
- /* Remove border when inside `a` element in IE 8/9. */
border: 0;
- /* Avoid horizontal scrollbars from wide images. Beware of
- [disappearing images in IE 8](http://www.456bereastreet.com/archive/201202/using_max-width_on_images_can_make_them_disappear_in_ie8/). */
max-width: 100%;
+ height: auto;
+ /* Fix for [disappearing images in IE 8](http://www.456bereastreet.com/archive/201202/using_max-width_on_images_can_make_them_disappear_in_ie8/). */
+ width: auto\9;
/* Remove the gap between images and their container. */
vertical-align: middle;
}
+
._ svg:not(:root) {
/* overflow displayed oddly in IE 9. */
overflow: hidden;
@@ -101,6 +113,7 @@ Set default styles in IE 8/9 and other older browsers. */
border-spacing: 0;
}
+
/* `unselectable` is the IE way of specifying that an element's text cannot
be selected. Make sure other browsers get the same behaviour when the
attribute is used. */
@@ -194,7 +207,8 @@ Easy control of display properties. */
/** Positioning
------------------------------------------------------------------------- */
+---------------------------------------------------------------------------
+See equivalent classes for text alignment in the text component. */
/**
<p class="_center" style="width:50%;background:hotpink">Centered</p>
@@ -300,23 +314,74 @@ disregard any padding. */
/** Text styles
-======================================================================== */
+===========================================================================
+You should always try to use the proper semantic HTML element, but
+sometimes you cannot determine semantics (such as with WYSIWYG output),
+sometimes there are no suitable elements, and sometimes it's just not
+convenient. */
+
+._text-bold, ._b { font-weight: bold; }
+._text-italic, ._i { font-style: italic; }
+._text-strike, ._s { text-decoration: line-through; }
+
+/* Equivalent of `._ code', `._ kbd`, `._ samp` and `._ var`. */
+._text-mono {
+ font-style: monospace;
+ font-size: 0.9em;
+}
-._muted-strong { opacity: 0.5; }
-._muted { opacity: 0.75; }
-._muted-subtle { opacity: 0.9; }
+._text-upper { text-transform: uppercase; }
+._text-lower { text-transform: lowercase; }
-._b { font-weight: bold; }
-._i { font-style: italic; }
+/* Instead of abusing default heading sizes, use semantic HTML and apply a
+size class to it. These sizes follow a 1:1.25 ratio (skipping some steps).
+*/
._size-xxl { font-size: 3.815em; }
-._size-xl { font-size: 2.442em; }
+._size-xl { font-size: 2.441em; }
._size-l { font-size: 1.953em; }
._size-m { font-size: 1.25em; }
._size-s { font-size: 1em; }
._size-xs { font-size: 0.8em; }
._size-xxs { font-size: 0.64em; }
+._muted-strong { opacity: 0.6; }
+._muted { opacity: 0.75; }
+._muted-subtle { opacity: 0.9; }
+
+
+/* Equivalent of `._ pre` */
+._pre {
+ font-family: monospace;
+ white-space: pre;
+ white-space: pre-wrap;
+ word-wrap: break-word;
+ line-height: 1.3;
+ /* Enable scroll if `max-height` is set */
+ overflow-y: auto;
+}
+
+/* Text-alignment. See equivalent classes for non-text alignment in the
+layout component. */
+._text-center { text-align: center; }
+._text-left { text-align: left; }
+._text-right { text-align: right; }
+
+
+/* Prevent text from wrapping onto multiple lines, and truncate with an
+ellipsis. */
+._truncate {
+ max-width: 100%;
+ /* Make sure that max-width really is 100% */
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ /* Override IE 8/9 `break-word` inheritance */
+ word-wrap: normal;
+}
+
/** Buttons
Please sign in to comment.
Something went wrong with that request. Please try again.