playground
/
isotope
mirror of https://github.com/metafizzy/isotope
1
0
Fork 0
Code Issues Releases Activity
Browse Source

html : Refine styles for example options

pull/14/head
David DeSandro 14 years ago
parent
4c19b5ad0b
commit
4593f537df
4 changed files with 152 additions and 42 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 60
      _layouts/elements.html
  2. 2
      _posts/examples/2010-12-13-elements-complete.html
  3. 3
      _posts/examples/2010-12-16-elements-partial.html
  4. 127
      css/style.css

60
_layouts/elements.html
Unescape View File

@ -9,18 +9,18 @@
</head> </head>
<body{% if page.body_class %} class="{{ page.body_class}}"{% endif %}> <body{% if page.body_class %} class="{{ page.body_class}}"{% endif %}>
<section id="options"> <section id="options" class="clearfix">
<h1>{{ page.title }}</h1> <h1>{{ page.title }}</h1>
<h3>Filters</h3> <h3>Filters</h3>
<ul id="filters"> <ul id="filters" class="option-set">
<li><a href="#show-all">show all</a></li> <li><a href="#show-all" class="selected">show all</a></li>
<li><a href="#metalloid">metalloid</a></li> <li><a href="#metalloid">metalloid</a></li>
<li> <li>
<a href="#metal">metal</a> <a href="#metal">metal</a>
<ul> <ul class="floated clearfix">
<li><a href="#alkali">alkali</a></li> <li><a href="#alkali">alkali</a></li>
<li><a href="#alkaline-earth">alkaline-earth</a></li> <li><a href="#alkaline-earth">alkaline-earth</a></li>
<li><a href="#lanthanoid">lanthanoid</a></li> <li><a href="#lanthanoid">lanthanoid</a></li>
@ -31,7 +31,7 @@
</li> </li>
<li> <li>
<a href="#nonmetal">nonmetal</a> <a href="#nonmetal">nonmetal</a>
<ul> <ul class="floated clearfix">
<li><a href="#other">other</a></li> <li><a href="#other">other</a></li>
<li><a href="#halogen">halogen</a></li> <li><a href="#halogen">halogen</a></li>
<li><a href="#noble-gas">noble-gas</a></li> <li><a href="#noble-gas">noble-gas</a></li>
@ -42,30 +42,28 @@
<h3>Sort Ascending</h3> <h3>Sort Ascending</h3>
<ul id="sort-asc" class="sort asc options"> <ul id="sort-asc" class="sort asc option-set floated clearfix">
<li><a href="#original-order">original-order</a></li> <li><a href="#original-order" class="selected">original-order asc</a></li>
<li><a href="#name">name</a></li> <li><a href="#name">name asc</a></li>
<li><a href="#symbol">symbol</a></li> <li><a href="#symbol">symbol asc</a></li>
<li><a href="#number">number</a></li> <li><a href="#number">number asc</a></li>
<li><a href="#weight">weight</a></li> <li><a href="#weight">weight asc</a></li>
<li><a href="#category">category</a></li> <li><a href="#category">category asc</a></li>
</ul> </ul>
<h3>Sort Descending</h3> <ul id="sort-desc" class="sort desc option-set floated clearfix">
<li><a href="#original-order">original-order desc</a></li>
<ul id="sort-desc" class="sort desc options"> <li><a href="#name">name desc</a></li>
<li><a href="#original-order">original-order</a></li> <li><a href="#symbol">symbol desc</a></li>
<li><a href="#name">name</a></li> <li><a href="#number">number desc</a></li>
<li><a href="#symbol">symbol</a></li> <li><a href="#weight">weight desc</a></li>
<li><a href="#number">number</a></li> <li><a href="#category">category desc</a></li>
<li><a href="#weight">weight</a></li>
<li><a href="#category">category</a></li>
</ul> </ul>
<h3>Layouts</h3> <h3>Layouts</h3>
<ul id="layouts" class="options"> <ul id="layouts" class="option-set floated clearfix">
<li><a href="#masonry">masonry</a></li> <li><a href="#masonry" class="selected">masonry</a></li>
<li><a href="#clearFloat">clearFloat</a></li> <li><a href="#clearFloat">clearFloat</a></li>
<li><a href="#cellsByRow">cellsByRow</a></li> <li><a href="#cellsByRow">cellsByRow</a></li>
<li><a href="#masonryHorizontal" class="horizontal">masonryHorizontal</a></li> <li><a href="#masonryHorizontal" class="horizontal">masonryHorizontal</a></li>
@ -75,7 +73,7 @@
<h3>Etc</h3> <h3>Etc</h3>
<ul id="etc" class="options"> <ul id="etc" class="floated clearfix">
<li id="toggle-sizes"><a href="#toggle-sizes">Toggle variable sizes</a></li> <li id="toggle-sizes"><a href="#toggle-sizes">Toggle variable sizes</a></li>
<li id="insert"><a href="#insert">Insert new elements</a></li> <li id="insert"><a href="#insert">Insert new elements</a></li>
@ -265,6 +263,20 @@
$demo.toggleClass('xray'); $demo.toggleClass('xray');
}); });
$('#options').find('.option-set a').click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return;
}
$this.parents('.option-set').find('.selected').removeClass('selected');
$this.addClass('selected');
})
}); });
</script> </script>

2
_posts/examples/2010-12-13-elements-complete.html
Unescape View File

@ -4,7 +4,7 @@ layout: elements
category: examples category: examples
--- ---
<div id="demo" class="wrap"> <div id="demo" class="iso-container">
{% for element in site.elements %} {% for element in site.elements %}
{% include element-partial.html %} {% include element-partial.html %}
{% endfor %} {% endfor %}

3
_posts/examples/2010-12-16-elements-partial.html
Unescape View File

@ -4,8 +4,7 @@ layout: elements
category: examples category: examples
--- ---
<div id="demo" class="iso-container">
<div id="demo" class="wrap">
{% for element in site.elements limit:10 offset:60 %} {% for element in site.elements limit:10 offset:60 %}
{% include element-partial.html %} {% include element-partial.html %}
{% endfor %} {% endfor %}

127
css/style.css
Unescape View File

@ -1,7 +1,11 @@
html { /**** Base styles ****/
height: 100%;
* {
margin: 0;
padding: 0;
} }
body { body {
padding: 20px; padding: 20px;
font-family: 'Helvetica Neue', Arial, sans-serif; font-family: 'Helvetica Neue', Arial, sans-serif;
@ -9,17 +13,36 @@ body {
line-height: 1.5em; line-height: 1.5em;
background: #1D1D1D; background: #1D1D1D;
color: #FFF; color: #FFF;
height: 100%;
} }
h1, h2, h3, p, ul, ol, pre, dl {
margin-bottom: 1.0em;
}
ul, ol {
margin-left: 1.5em;
}
a { a {
color: #FB4; color: #FB4;
text-decoration: none; text-decoration: none;
} }
.wrap {
/**** Isotope styles ****/
/* required for containers to inherit vertical size from window */
html,
body {
height: 100%;
}
.iso-container {
background: transparent; background: transparent;
border: 4px solid #FFF; border: 1px solid #FFF;
padding: 20px; padding: 20px;
} }
@ -152,7 +175,7 @@ a {
height: 340px; height: 340px;
} }
.wrap.isotope, .iso-container.isotope,
.isotope .element { .isotope .element {
-webkit-transition-duration: 1.0s; -webkit-transition-duration: 1.0s;
-moz-transition-duration: 1.0s; -moz-transition-duration: 1.0s;
@ -161,7 +184,7 @@ a {
} }
.wrap.isotope.no-transition, .iso-container.isotope.no-transition,
.isotope.no-transition .element { .isotope.no-transition .element {
-webkit-transition-duration: 0s; -webkit-transition-duration: 0s;
-moz-transition-duration: 0s; -moz-transition-duration: 0s;
@ -170,7 +193,7 @@ a {
} }
.wrap.isotope { .iso-container.isotope {
-webkit-transition-property: height, width; -webkit-transition-property: height, width;
-moz-transition-property: height, width; -moz-transition-property: height, width;
/* -o-transition-property: height, width;*/ /* -o-transition-property: height, width;*/
@ -184,18 +207,86 @@ a {
transition-property: transform, opacity; transition-property: transform, opacity;
} }
/**** Example Options ****/
#filters li li, #options {
.options li { padding-bottom: 1.0em;
display: inline-block; }
margin-right: 0.5em;
#options h3 {
margin-bottom: 0.2em;
}
#options ul {
margin: 0;
list-style: none; list-style: none;
} }
#options ul ul {
margin-left: 1.5em;
}
#options .floated li {
float: left;
}
.isotope-hidden { .isotope-hidden {
pointer-events: none; pointer-events: none;
} }
#options li {
}
#options li a {
display: inline-block;
padding: 0.5em;
background-color: #FB2;
color: #222;
font-weight: bold;
text-shadow: 0 1px hsla( 0, 0%, 100%, 0.5 );
background-image: -moz-linear-gradient(-90deg,
hsla( 0, 0%, 100%, 0.4 ) ,
hsla( 0, 0%, 100%, 0.0 )
);
background-image: -webkit-gradient(linear, 0 top, 0 bottom,
from( hsla( 0, 0%, 100%, 0.4 ) ),
to( hsla( 0, 0%, 100%, 0.0 ) )
);
margin-bottom: 0.2em;
}
#options li a:hover {
background-color: #2BF;
}
#options li a:active {
background-color: #29D;
-webkit-box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 );
-moz-box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 );
-o-box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 );
box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 );
}
#options .floated li a {
border-left: 1px solid hsla( 0, 0%, 100%, 0.5 );
border-right: 1px solid hsla( 0, 0%, 0%, 0.2 );
}
#options .floated li:first-child a {
border-radius: 10px 0 0 10px;
border-left: none;
}
#options .floated li:last-child a {
border-radius: 0 10px 10px 0;
}
#options .option-set li a.selected {
background-color: #13F;
text-shadow: none;
color: white;
}
/**** Horizontal ****/ /**** Horizontal ****/
/*.horizontal #options { /*.horizontal #options {
@ -205,13 +296,21 @@ a {
top: 20px; top: 20px;
} }
.horizontal .wrap { .horizontal .iso-container {
height: 80%; height: 80%;
position: relative; position: relative;
margin-left: 340px; margin-left: 340px;
top: 20px; top: 20px;
}*/ }*/
.horizontal .wrap { .horizontal .iso-container {
height: 80%; height: 80%;
} }
/* >> The Magnificent CLEARFIX: Updated to prevent margin-collapsing on child elements << j.mp/bestclearfix */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; visibility: hidden; }
.clearfix:after { clear: both; }
/* fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix { zoom: 1; }

Write Preview
Loading…
Cancel
Save