Skip to content

Instantly share code, notes, and snippets.

@getsetbro

getsetbro/index.html

Created February 20, 2015 23:08
Show Gist options
  • Save getsetbro/a02469465d023b0ed1e9 to your computer and use it in GitHub Desktop.
Save getsetbro/a02469465d023b0ed1e9 to your computer and use it in GitHub Desktop.
Download ZIP
Component with the SuitCSS conventions demo of a component using conventions of SuitCSS for component-based dev // source http://jsbin.com/lumeqa
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Component with the SuitCSS conventions</title>
<meta name="description" content="demo of a component using conventions of SuitCSS for component-based dev">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<style id="jsbin-css">
/* base */
button{
border:0 none;
background:#eee none;
cursor:pointer;
color:#222;
}
/* component */
.Excerpt{
padding:11px;
background-color:#222;
color:#eee;
margin-top:22px;
max-width:75%;
}
.Excerpt-thumbnail{
width:44px;
margin:0;
}
.Excerpt--hasImage .Excerpt-info{
margin-left:66px;
}
.Excerpt-title{
margin:2px 0;
}
.Excerpt-p{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/* utils */
.u-floatLeft{
float:left;
}
.is-expanded{
white-space:normal;
overflow:visible;
}
</style>
</head>
<body>
<article class="Excerpt Excerpt--hasImage">
<!-- has ComponentName -->
<!-- has --modifierName -->
<img class="Excerpt-thumbnail u-floatLeft" src="http://static.jsbin.com/images/dave.min.svg"/>
<!-- has -descendentName -->
<!-- has u-utilityName -->
<div class="Excerpt-info">
<!-- has -descendentName -->
<h1 class="Excerpt-title">Title</h1>
<!-- has -descendentName -->
<p class="Excerpt-p js-expandTarget">Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph</p>
<!-- gets is-stateName -->
<!-- has js-jsClass -->
<button type="button" class="Excerpt-readMore js-readMore">Read More</button>
<!-- has js-jsClass -->
</div>
</article>
<article class="Excerpt">
<!-- has ComponentName -->
<!-- has --modifierName -->
<div class="Excerpt-info">
<!-- has -descendentName -->
<h1 class="Excerpt-title">Title</h1>
<!-- has -descendentName -->
<p class="Excerpt-p js-expandTarget">Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph</p>
<!-- gets is-stateName -->
<!-- has js-jsClass -->
<button type="button" class="Excerpt-readMore js-readMore">Read More</button>
<!-- has js-jsClass -->
</div>
</article>
<script id="jsbin-javascript">
$('.js-readMore').on('click', function(e){
var $this = $(this);
if( $this.text() === "Read More"){
$(this).siblings('.js-expandTarget').addClass('is-expanded');
$this.text("Read Less");
}else{
$(this).siblings('.js-expandTarget').removeClass('is-expanded');
$this.text("Read More");
}
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Component with the SuitCSS conventions</title>
<meta name="description" content="demo of a component using conventions of SuitCSS for component-based dev">
<script src="//code.jquery.com/jquery-1.11.1.min.js"><\/script>
</head>
<body>
<article class="Excerpt Excerpt--hasImage">
<\!-- has ComponentName -->
<\!-- has --modifierName -->
<img class="Excerpt-thumbnail u-floatLeft" src="http://static.jsbin.com/images/dave.min.svg"/>
<\!-- has -descendentName -->
<\!-- has u-utilityName -->
<div class="Excerpt-info">
<\!-- has -descendentName -->
<h1 class="Excerpt-title">Title</h1>
<\!-- has -descendentName -->
<p class="Excerpt-p js-expandTarget">Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph</p>
<\!-- gets is-stateName -->
<\!-- has js-jsClass -->
<button type="button" class="Excerpt-readMore js-readMore">Read More</button>
<\!-- has js-jsClass -->
</div>
</article>
<article class="Excerpt">
<\!-- has ComponentName -->
<\!-- has --modifierName -->
<div class="Excerpt-info">
<\!-- has -descendentName -->
<h1 class="Excerpt-title">Title</h1>
<\!-- has -descendentName -->
<p class="Excerpt-p js-expandTarget">Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph</p>
<\!-- gets is-stateName -->
<\!-- has js-jsClass -->
<button type="button" class="Excerpt-readMore js-readMore">Read More</button>
<\!-- has js-jsClass -->
</div>
</article>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">/* base */
button{
border:0 none;
background:#eee none;
cursor:pointer;
color:#222;
}
/* component */
.Excerpt{
padding:11px;
background-color:#222;
color:#eee;
margin-top:22px;
max-width:75%;
}
.Excerpt-thumbnail{
width:44px;
margin:0;
}
.Excerpt--hasImage .Excerpt-info{
margin-left:66px;
}
.Excerpt-title{
margin:2px 0;
}
.Excerpt-p{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/* utils */
.u-floatLeft{
float:left;
}
.is-expanded{
white-space:normal;
overflow:visible;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">$('.js-readMore').on('click', function(e){
var $this = $(this);
if( $this.text() === "Read More"){
$(this).siblings('.js-expandTarget').addClass('is-expanded');
$this.text("Read Less");
}else{
$(this).siblings('.js-expandTarget').removeClass('is-expanded');
$this.text("Read More");
}
});</script></body>
</html>
Raw
jsbin.lumeqa.css
/* base */
button{
border:0 none;
background:#eee none;
cursor:pointer;
color:#222;
}
/* component */
.Excerpt{
padding:11px;
background-color:#222;
color:#eee;
margin-top:22px;
max-width:75%;
}
.Excerpt-thumbnail{
width:44px;
margin:0;
}
.Excerpt--hasImage .Excerpt-info{
margin-left:66px;
}
.Excerpt-title{
margin:2px 0;
}
.Excerpt-p{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/* utils */
.u-floatLeft{
float:left;
}
.is-expanded{
white-space:normal;
overflow:visible;
}
Raw
jsbin.lumeqa.js
$('.js-readMore').on('click', function(e){
var $this = $(this);
if( $this.text() === "Read More"){
$(this).siblings('.js-expandTarget').addClass('is-expanded');
$this.text("Read Less");
}else{
$(this).siblings('.js-expandTarget').removeClass('is-expanded');
$this.text("Read More");
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment