Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Add first styles to stylesheet for embedded content

  • Loading branch information...
commit e1874f0a28b3407ad816fffb795891208eff248b 1 parent 64a94a2
@jacobrask authored
Showing with 119 additions and 51 deletions.
  1. +2 −0  Makefile
  2. +20 −0 src/embed.css
  3. +11 −18 src/layout.css
  4. +86 −33 underscore.css
View
2  Makefile
@@ -12,4 +12,6 @@ underscore.css: src/
@echo '\n\n' >> underscore.css;
@cat src/buttons.css >> underscore.css
@echo '\n\n' >> underscore.css;
+ @cat src/embed.css >> underscore.css
+ @echo '\n\n' >> underscore.css;
@cat src/forms.css >> underscore.css
View
20 src/embed.css
@@ -0,0 +1,20 @@
+/** Embedded content
+===========================================================================
+Images, videos, iframes.*/
+
+._embed {
+ height: auto;
+ max-width: 100%;
+}
+._embed img {
+ border: 0;
+ max-width: 100%;
+ /* 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 image and container. */
+ vertical-align: middle;
+}
+._embed-circle {
+ overflow: hidden;
+ border-radius: 999px;
+}
View
29 src/layout.css
@@ -60,22 +60,14 @@ Change the box model of an element and its descendants.
---------------------------------------------------------------------------
Easy control of display properties. */
-._block {
- display: block !important;
-}
-._inline {
- display: inline !important;
-}
-._inline-block {
- display: inline-block !important;
-}
-._is-hidden {
- display: none !important;
- visibility: hidden !important;
-}
-._is-invisible {
- visibility: hidden !important;
-}
+._block { display: block !important; }
+._inline { display: inline !important; }
+._inline-block { display: inline-block !important; }
+._table { display: table !important; }
+._table-row { display: table-row !important; }
+._table-cell { display: table-cell !important; }
+._is-hidden { display: none !important; }
+._is-invisible { visibility: hidden !important; }
/** Positioning
@@ -173,8 +165,9 @@ disregard any padding. */
margin-left: 0;
margin-right: 0;
}
+._width-1-4 { width: 25%; }
._width-1-2,
._width-2-4 { width: 50%; }
-._width-1-3 { width: 33.33%; }
-._width-2-3 { width: 66.66%; }
+._width-1-3 { width: 33.333%; }
+._width-2-3 { width: 66.666%; }
._width-3-4 { width: 75%; }
View
119 underscore.css
@@ -77,7 +77,7 @@ Set default styles in IE 8/9 and other older browsers. */
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. */
+ /* Remove the gap between image and container. */
vertical-align: middle;
}
@@ -189,22 +189,14 @@ Change the box model of an element and its descendants.
---------------------------------------------------------------------------
Easy control of display properties. */
-._block {
- display: block !important;
-}
-._inline {
- display: inline !important;
-}
-._inline-block {
- display: inline-block !important;
-}
-._is-hidden {
- display: none !important;
- visibility: hidden !important;
-}
-._is-invisible {
- visibility: hidden !important;
-}
+._block { display: block !important; }
+._inline { display: inline !important; }
+._inline-block { display: inline-block !important; }
+._table { display: table !important; }
+._table-row { display: table-row !important; }
+._table-cell { display: table-cell !important; }
+._is-hidden { display: none !important; }
+._is-invisible { visibility: hidden !important; }
/** Positioning
@@ -302,10 +294,11 @@ disregard any padding. */
margin-left: 0;
margin-right: 0;
}
+._width-1-4 { width: 25%; }
._width-1-2,
._width-2-4 { width: 50%; }
-._width-1-3 { width: 33.33%; }
-._width-2-3 { width: 66.66%; }
+._width-1-3 { width: 33.333%; }
+._width-2-3 { width: 66.666%; }
._width-3-4 { width: 75%; }
@@ -317,35 +310,63 @@ sometimes you cannot determine semantics (such as with WYSIWYG output),
sometimes there are no suitable elements, and sometimes it's just not
convenient. */
+/* <span class="_b _i _s">Lots of styling</span> */
._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`. */
+
+/*
+ <span class="_tt">Equivalent to <code>._ code/kbd/samp/var</code></span>
+*/
._text-mono, ._tt {
font-style: monospace;
font-size: 0.9em;
}
+/*
+ <p class="_text-upper">
+ Easy text <span class="_text-lower">case</span> change.
+ </p>
+*/
._text-upper { text-transform: uppercase; }
._text-lower { text-transform: lowercase; }
+/* <b><i><span class="_text-normal">Reset it all</span></i></b> */
+._text-normal {
+ font-style: normal;
+ font-weight: normal;
+ text-transform: none;
+ text-decoration: none;
+}
/* 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: 2.441em; }
-._size-xl { font-size: 1.953em; }
-._size-l { font-size: 1.25em; }
-._size-m { font-size: 1em; }
-._size-s { font-size: 0.8em; }
-._size-xs { font-size: 0.64em; }
+ <h1 class="_text-xxl">Super Size Me</h1>
+ <h1 class="_text-xl">Pretty big now&hellip;</h1>
+ <h1 class="_text-l">Slightly bigger</h1>
+ <h1 class="_text-m">Default font size</h1>
+ <h1 class="_text-s">Small text</h1>
+ <h1 class="_text-xs">Legal text you don't want anyone to see</h1>
+*/
+._text-xxl { font-size: 2.441em; }
+._text-xl { font-size: 1.953em; }
+._text-l { font-size: 1.25em; }
+._text-m { font-size: 1em; }
+._text-s { font-size: 0.8em; }
+._text-xs { font-size: 0.64em; }
+
+/*
+ <b class="_muted">Lower the opacity</b>
+ <b class="_muted-strong">a lot</b>
+ <b class="_muted-subtle">or just a bit</b>.
+*/
._muted-strong { opacity: 0.6; }
._muted { opacity: 0.75; }
._muted-subtle { opacity: 0.9; }
-/* Equivalent of `._ pre` */
+/* Equivalent to `._ pre` */
._pre {
font-family: monospace;
white-space: pre;
@@ -359,15 +380,24 @@ size class to it. These sizes follow a 1:1.25 ratio (skipping some steps).
/* 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; }
+._text-left { text-align: left; }
+._text-right { text-align: right; }
+
+._text-middle { vertical-align: middle; }
+._text-top { vertical-align: top; }
+._text-bottom { vertical-align: bottom; }
/* Prevent text from wrapping onto multiple lines, and truncate with an
-ellipsis. */
-._truncate {
+ellipsis.
+
+ <h1 class="_text-truncate" style="max-width:50%">
+ A piece of text that we never want to see span over several lines
+ </h1>
+*/
+._text-truncate {
max-width: 100%;
- /* Make sure that max-width really is 100% */
+ /* Disregard padding for max-width calucation */
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
@@ -481,6 +511,29 @@ As a convention, `button` elements should be used for actions and anchors
+/** Embedded content
+===========================================================================
+Images, videos, iframes.*/
+
+._embed {
+ height: auto;
+ max-width: 100%;
+}
+._embed img {
+ border: 0;
+ max-width: 100%;
+ /* 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 image and container. */
+ vertical-align: middle;
+}
+._embed-circle {
+ overflow: hidden;
+ border-radius: 999px;
+}
+
+
+
/** Forms
==========================================================================
Form layout is controlled by classes defined in the layout component.
Please sign in to comment.
Something went wrong with that request. Please try again.