Skip to content

Commit

Permalink
Add first styles to stylesheet for embedded content
Browse files Browse the repository at this point in the history
  • Loading branch information
@jacobrask
jacobrask committed Dec 15, 2012
1 parent 64a94a2 commit e1874f0
Show file tree
Hide file tree
Showing 4 changed files with 119 additions and 51 deletions.
2 changes: 2 additions & 0 deletions Makefile
View file
Expand Up @@ -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
20 changes: 20 additions & 0 deletions src/embed.css
View file
@@ -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;
}
29 changes: 11 additions & 18 deletions src/layout.css
View file
Expand Up @@ -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
Expand Down Expand Up @@ -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%; }
119 changes: 86 additions & 33 deletions underscore.css
View file
Expand Up @@ -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;
}

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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%; }


Expand All @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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.
Expand Down

0 comments on commit e1874f0

Please sign in to comment.