Skip to content

Instantly share code, notes, and snippets.

@jhilden
Last active December 29, 2015 06:29
Show Gist options
  • Save jhilden/7628999 to your computer and use it in GitHub Desktop.
Save jhilden/7628999 to your computer and use it in GitHub Desktop.
Livingstyleguide integration

// app/assets/stylesheets/modules/_action_button.css.ass

Action Button

Button style usually used for call to actions::

<button type="button" class="***m-action_button***">Action button</button>
<a class="***m-action_button***">Action button</a>
// app/assets/stylesheets/base/_colors.css.ass
$white: #fff
// usw.

// app/assets/stylesheets/base/_colors.md

Colors

{{variables:base/colors}}

// app/assets/stylesheets/application.css.sass
@import base/colors.css.sass
@import modules/action_button.css.sass
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta content="The LivingStyleGuide Gem – http://livingstyleguide.org" name="generator">
<title>Living Style Guide</title>
<script>
// see: http://www.hagenburger.net/BLOG/Simple-HTML5-Fix-for-IE.html
for(var e,l='article aside footer header nav section time picture'.split(' ');e=l.pop();document.createElement(e));
</script>
<style>
@import url(//fonts.googleapis.com/css?family=Asap:400,700);
@font-face {
font-family: "RideMyBikeBold";
src: url('/assets/ride_my_bike_pro_bold.eot');
src: url(font-path("ride_my_bike_pro_bold.eot?#iefix")) format("embedded-opentype"), url('/assets/ride_my_bike_pro_bold.woff') format("woff"), url('/assets/ride_my_bike_pro_bold.ttf') format("truetype");
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: "RideMyBike";
src: url('/assets/ride_my_bike_pro_regular.eot');
src: url(font-path("ride_my_bike_pro_regular.eot?#iefix")) format("embedded-opentype"), url('/assets/ride_my_bike_pro_regular.woff') format("woff"), url('/assets/ride_my_bike_pro_regular.ttf') format("truetype");
font-weight: normal;
font-style: normal;
}
/* line 25, /home/jk/railslove/makerist/app/assets/stylesheets/modules/_action_button.css.sass */
.m-action-button, .m-action-button_large {
outline: none;
cursor: pointer;
-webkit-border-radius: 40px 100%;
-moz-border-radius: 40px / 100%;
border-radius: 40px / 100%;
*zoom: 1;
display: block;
border: 2px solid #fffdf8;
background-color: rgba(80, 80, 80, 0.6);
-webkit-transition: background-color 0.2s ease-in-out;
-moz-transition: background-color 0.2s ease-in-out;
-o-transition: background-color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out;
max-width: 280px;
padding: 0;
margin: 0;
}
/* line 9, /home/jk/railslove/makerist/app/assets/stylesheets/modules/_action_button.css.sass */
.m-action-button .m-action-button--icon, .m-action-button_large .m-action-button--icon {
width: 40px;
height: 40px;
line-height: 36px;
}
/* line 13, /home/jk/railslove/makerist/app/assets/stylesheets/modules/_action_button.css.sass */
.m-action-button .m-action-button--text, .m-action-button_large .m-action-button--text {
height: 36px;
padding-left: 28px;
margin-left: 18px;
line-height: 36px;
}
/* line 20, /home/jk/railslove/makerist/app/assets/stylesheets/modules/_action_button.css.sass */
.m-action-button.as-2-line .m-action-button--text, .as-2-line.m-action-button_large .m-action-button--text {
padding-top: 6px;
padding-bottom: 6px;
line-height: 12px;
}
/* line 38, /home/jk/.rvm/gems/ruby-1.9.3-p385-perf@makerist/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
.m-action-button:after, .m-action-button_large:after {
content: "";
display: table;
clear: both;
}
/* line 38, /home/jk/railslove/makerist/app/assets/stylesheets/modules/_action_button.css.sass */
.m-action-button .m-action-button--icon, .m-action-button_large .m-action-button--icon {
color: white;
background-color: #ff9200;
float: left;
font-size: emCalc(20px);
margin-top: -2px;
margin-left: -2px;
text-align: center;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
position: absolute;
border: 2px solid #fffdf8;
padding-left: 2px;
}
/* line 52, /home/jk/railslove/makerist/app/assets/stylesheets/modules/_action_button.css.sass */
.m-action-button .m-action-button--text, .m-action-button_large .m-action-button--text {
float: left;
color: #fffdf8;
padding-right: 10px;
text-transform: uppercase;
letter-spacing: emCalc(1px);
display: inline-block;
}
/* line 60, /home/jk/railslove/makerist/app/assets/stylesheets/modules/_action_button.css.sass */
.m-action-button:hover, .m-action-button_large:hover {
background-color: #ff9200;
}
/* line 62, /home/jk/railslove/makerist/app/assets/stylesheets/modules/_action_button.css.sass */
.m-action-button:focus, .m-action-button_large:focus {
outline: none;
}
/* line 67, /home/jk/railslove/makerist/app/assets/stylesheets/modules/_action_button.css.sass */
.m-action-button.as-no-border, .as-no-border.m-action-button_large {
border: none;
}
/* line 70, /home/jk/railslove/makerist/app/assets/stylesheets/modules/_action_button.css.sass */
.m-action-button_large {
max-width: none;
-webkit-border-radius: 64px 100%;
-moz-border-radius: 64px / 100%;
border-radius: 64px / 100%;
}
/* line 9, /home/jk/railslove/makerist/app/assets/stylesheets/modules/_action_button.css.sass */
.m-action-button_large .m-action-button--icon {
width: 64px;
height: 64px;
line-height: 60px;
}
/* line 13, /home/jk/railslove/makerist/app/assets/stylesheets/modules/_action_button.css.sass */
.m-action-button_large .m-action-button--text {
height: 60px;
padding-left: 40px;
margin-left: 30px;
line-height: 60px;
}
/* line 20, /home/jk/railslove/makerist/app/assets/stylesheets/modules/_action_button.css.sass */
.m-action-button_large.as-2-line .m-action-button--text {
padding-top: 10px;
padding-bottom: 10px;
line-height: 20px;
}
/* line 74, /home/jk/railslove/makerist/app/assets/stylesheets/modules/_action_button.css.sass */
.m-action-button_large .m-action-button--icon {
font-size: emCalc(26px);
padding-left: 10px;
}
/* line 77, /home/jk/railslove/makerist/app/assets/stylesheets/modules/_action_button.css.sass */
.m-action-button_large .m-action-button--icon.with-big-icon {
padding-left: 0;
}
/* line 80, /home/jk/railslove/makerist/app/assets/stylesheets/modules/_action_button.css.sass */
.m-action-button_large .m-action-button--text {
font-size: emCalc(16px);
}
/* line 84, /home/jk/railslove/makerist/app/assets/stylesheets/modules/_action_button.css.sass */
.m-action-button_large.as-2-line .m-action-button--text {
font-size: emCalc(14px);
}
/* line 88, /home/jk/railslove/makerist/app/assets/stylesheets/modules/_action_button.css.sass */
button.m-action-button, button.m-action-button_large, button.m-action-button_large {
font-size: emCalc(14px);
}
/* line 90, /home/jk/railslove/makerist/app/assets/stylesheets/modules/_action_button.css.sass */
button.m-action-button .m-action-button--icon, button.m-action-button_large .m-action-button--icon, button.m-action-button_large .m-action-button--icon {
margin-left: -4px;
}
/* line 1, /home/jk/.rvm/gems/ruby-1.9.3-p385-perf@makerist/bundler/gems/livingstyleguide-f948cd0768a7/stylesheets/livingstyleguide/_layout.scss */
.livingstyleguide {
background: #f7f7f7;
color: #505050;
display: block;
}
/* line 4, /home/jk/.rvm/gems/ruby-1.9.3-p385-perf@makerist/bundler/gems/livingstyleguide-f948cd0768a7/stylesheets/livingstyleguide/_content.scss */
.livingstyleguide--paragraph,
.livingstyleguide--code-block,
.livingstyleguide--unordered-list,
.livingstyleguide--ordered-list {
display: block;
font-family: "Georgia", "Times New Roman", serif;
font-size: 14px;
font-weight: normal;
line-height: 1.4;
margin: 10px auto;
width: 640px;
-webkit-font-smoothing: antialiased;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* line 17, /home/jk/.rvm/gems/ruby-1.9.3-p385-perf@makerist/bundler/gems/livingstyleguide-f948cd0768a7/stylesheets/livingstyleguide/_content.scss */
.livingstyleguide--unordered-list-item,
.livingstyleguide--ordered-list-item {
display: block;
list-style: disc;
margin: 5px 0 5px 20px;
}
/* line 26, /home/jk/.rvm/gems/ruby-1.9.3-p385-perf@makerist/bundler/gems/livingstyleguide-f948cd0768a7/stylesheets/livingstyleguide/_content.scss */
.livingstyleguide--page-title,
.livingstyleguide--headline,
.livingstyleguide--sub-headline,
.livingstyleguide--sub-sub-headline {
display: block;
font-family: "Georgia", "Times New Roman", serif;
font-size: 22px;
font-weight: bold;
line-height: 1.1;
margin: 30px auto 10px;
width: 640px;
-webkit-font-smoothing: antialiased;
}
/* line 37, /home/jk/.rvm/gems/ruby-1.9.3-p385-perf@makerist/bundler/gems/livingstyleguide-f948cd0768a7/stylesheets/livingstyleguide/_content.scss */
.livingstyleguide--page-title {
display: block;
font-size: 30px;
}
/* line 42, /home/jk/.rvm/gems/ruby-1.9.3-p385-perf@makerist/bundler/gems/livingstyleguide-f948cd0768a7/stylesheets/livingstyleguide/_content.scss */
.livingstyleguide--sub-headline {
display: block;
font-size: 16px;
}
/* line 47, /home/jk/.rvm/gems/ruby-1.9.3-p385-perf@makerist/bundler/gems/livingstyleguide-f948cd0768a7/stylesheets/livingstyleguide/_content.scss */
.livingstyleguide--sub-sub-headline {
display: block;
font-size: 14px;
}
/* line 52, /home/jk/.rvm/gems/ruby-1.9.3-p385-perf@makerist/bundler/gems/livingstyleguide-f948cd0768a7/stylesheets/livingstyleguide/_content.scss */
.livingstyleguide--example, .livingstyleguide--font-example {
background: white;
display: block;
margin: 10px auto 0;
overflow: hidden;
padding: 10px;
position: relative;
width: 640px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-moz-border-radius-topleft: 0;
-webkit-border-top-left-radius: 0;
border-top-left-radius: 0;
-moz-border-radius-topright: 0;
-webkit-border-top-right-radius: 0;
border-top-right-radius: 0;
}
/* line 63, /home/jk/.rvm/gems/ruby-1.9.3-p385-perf@makerist/bundler/gems/livingstyleguide-f948cd0768a7/stylesheets/livingstyleguide/_content.scss */
.livingstyleguide--layout-example .livingstyleguide--example, .livingstyleguide--layout-example .livingstyleguide--font-example {
margin: 0 auto;
width: 100%;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
}
/* line 70, /home/jk/.rvm/gems/ruby-1.9.3-p385-perf@makerist/bundler/gems/livingstyleguide-f948cd0768a7/stylesheets/livingstyleguide/_content.scss */
.livingstyleguide--layout-example {
display: block;
height: auto;
min-height: auto;
padding: 10px;
}
/* line 2, /home/jk/.rvm/gems/ruby-1.9.3-p385-perf@makerist/bundler/gems/livingstyleguide-f948cd0768a7/stylesheets/livingstyleguide/_code.scss */
.livingstyleguide--code-span,
.livingstyleguide--code-block {
background: #505050;
color: white;
display: inline;
font-family: Courier, "Courier New", monospace;
font-size: 12px;
font-weight: normal;
overflow: scroll;
padding: 0 3px;
-webkit-font-smoothing: subpixel-antialiased;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
}
/* line 14, /home/jk/.rvm/gems/ruby-1.9.3-p385-perf@makerist/bundler/gems/livingstyleguide-f948cd0768a7/stylesheets/livingstyleguide/_code.scss */
.livingstyleguide--code-span kbd,
.livingstyleguide--code-block kbd {
display: block;
font-weight: bold;
}
/* line 18, /home/jk/.rvm/gems/ruby-1.9.3-p385-perf@makerist/bundler/gems/livingstyleguide-f948cd0768a7/stylesheets/livingstyleguide/_code.scss */
.livingstyleguide--code-span kbd:before,
.livingstyleguide--code-block kbd:before {
content: "> ";
}
/* line 23, /home/jk/.rvm/gems/ruby-1.9.3-p385-perf@makerist/bundler/gems/livingstyleguide-f948cd0768a7/stylesheets/livingstyleguide/_code.scss */
.livingstyleguide--code-span em,
.livingstyleguide--code-block em {
color: white;
display: inline;
font-style: normal;
font-weight: bold;
text-decoration: underline;
vertical-align: baseline;
}
/* line 32, /home/jk/.rvm/gems/ruby-1.9.3-p385-perf@makerist/bundler/gems/livingstyleguide-f948cd0768a7/stylesheets/livingstyleguide/_code.scss */
.livingstyleguide--code-span b,
.livingstyleguide--code-block b {
color: white;
display: inline;
font-weight: bold;
vertical-align: baseline;
}
/* line 39, /home/jk/.rvm/gems/ruby-1.9.3-p385-perf@makerist/bundler/gems/livingstyleguide-f948cd0768a7/stylesheets/livingstyleguide/_code.scss */
.livingstyleguide--code-span i,
.livingstyleguide--code-block i {
color: white;
display: inline;
vertical-align: baseline;
}
/* line 45, /home/jk/.rvm/gems/ruby-1.9.3-p385-perf@makerist/bundler/gems/livingstyleguide-f948cd0768a7/stylesheets/livingstyleguide/_code.scss */
.livingstyleguide--code-span q,
.livingstyleguide--code-block q {
color: white;
display: inline;
vertical-align: baseline;
}
/* line 51, /home/jk/.rvm/gems/ruby-1.9.3-p385-perf@makerist/bundler/gems/livingstyleguide-f948cd0768a7/stylesheets/livingstyleguide/_code.scss */
.livingstyleguide--code-span q:before, .livingstyleguide--code-span q:after,
.livingstyleguide--code-block q:before,
.livingstyleguide--code-block q:after {
content: "";
}
/* line 56, /home/jk/.rvm/gems/ruby-1.9.3-p385-perf@makerist/bundler/gems/livingstyleguide-f948cd0768a7/stylesheets/livingstyleguide/_code.scss */
.livingstyleguide--code-span var,
.livingstyleguide--code-block var {
display: inline;
text-decoration: underline;
vertical-align: baseline;
}
/* line 63, /home/jk/.rvm/gems/ruby-1.9.3-p385-perf@makerist/bundler/gems/livingstyleguide-f948cd0768a7/stylesheets/livingstyleguide/_code.scss */
.livingstyleguide--code-block {
display: none;
line-height: 1.5;
padding: 3px 6px;
width: 640px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* line 70, /home/jk/.rvm/gems/ruby-1.9.3-p385-perf@makerist/bundler/gems/livingstyleguide-f948cd0768a7/stylesheets/livingstyleguide/_code.scss */
.show-code .livingstyleguide--code-block {
display: block;
}
/* line 75, /home/jk/.rvm/gems/ruby-1.9.3-p385-perf@makerist/bundler/gems/livingstyleguide-f948cd0768a7/stylesheets/livingstyleguide/_code.scss */
.livingstyleguide--example + .livingstyleguide--code-block, .livingstyleguide--font-example + .livingstyleguide--code-block {
margin-top: 0;
-moz-border-radius-topleft: 0;
-webkit-border-top-left-radius: 0;
border-top-left-radius: 0;
-moz-border-radius-topright: 0;
-webkit-border-top-right-radius: 0;
border-top-right-radius: 0;
}
/* line 80, /home/jk/.rvm/gems/ruby-1.9.3-p385-perf@makerist/bundler/gems/livingstyleguide-f948cd0768a7/stylesheets/livingstyleguide/_code.scss */
.livingstyleguide--layout-example + .livingstyleguide--code-block {
background: #505050;
margin: 0 0 10px;
padding: 10px 0;
width: 100%;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
}
/* line 87, /home/jk/.rvm/gems/ruby-1.9.3-p385-perf@makerist/bundler/gems/livingstyleguide-f948cd0768a7/stylesheets/livingstyleguide/_code.scss */
.livingstyleguide--layout-example + .livingstyleguide--code-block .livingstyleguide--code {
display: block;
margin: auto;
width: 640px;
}
/* line 98, /home/jk/.rvm/gems/ruby-1.9.3-p385-perf@makerist/bundler/gems/livingstyleguide-f948cd0768a7/stylesheets/livingstyleguide/_code.scss */
.livingstyleguide--code-highlight, .livingstyleguide--code-highlight-block {
background-color: #f6ffa3;
display: inline;
vertical-align: baseline;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
}
/* line 105, /home/jk/.rvm/gems/ruby-1.9.3-p385-perf@makerist/bundler/gems/livingstyleguide-f948cd0768a7/stylesheets/livingstyleguide/_code.scss */
.livingstyleguide--code-highlight-block {
display: block;
}
/* line 44, /home/jk/.rvm/gems/ruby-1.9.3-p385-perf@makerist/bundler/gems/livingstyleguide-f948cd0768a7/stylesheets/livingstyleguide/_color-swatches.scss */
.livingstyleguide--color-swatches {
display: block;
margin: 10px auto -10px auto;
padding-left: 10px;
width: 660px;
overflow: hidden;
*zoom: 1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
</style>
<script type="text/javascript">
</script></head>
<body class="livingstyleguide">
<h2 class="livingstyleguide--headline" id="colors">Colors</h2>
<p class="livingstyleguide--paragraph">{{variables:base/colors}}# Colors</p>
<p class="livingstyleguide--paragraph">{{variables:base/colors}}# Colors</p>
<p class="livingstyleguide--paragraph">{{variables:base/colors}}# Colors</p>
<p class="livingstyleguide--paragraph">{{variables:base/colors}}# Colors</p>
<p class="livingstyleguide--paragraph">{{variables:base/colors}}# Action Button</p>
<p class="livingstyleguide--paragraph">Button style usually used for call to actions::</p>
<div class="livingstyleguide--example">
<button type="button" class="m-action_button">Action button</button>
<a class="m-action_button">Action button</a>
~~~# Action Button
Button style usually used for call to actions::
~~~ example
<button type="button" class="m-action_button">Action button</button>
<a class="m-action_button">Action button</a>
~~~# Action Button
Button style usually used for call to actions::
~~~ example
<button type="button" class="m-action_button">Action button</button>
<a class="m-action_button">Action button</a>
</div>
<pre class="livingstyleguide--code-block"><code class="livingstyleguide--code"><b>&lt;<em>button</em></b> <b>type</b>="button" <b>class</b>="<strong class="livingstyleguide--code-highlight">m-action_button</strong>"<b>&gt;</b>Action button<b>&lt;/<em>button</em>&gt</b>
<b>&lt;<em>a</em></b> <b>class</b>="<strong class="livingstyleguide--code-highlight">m-action_button</strong>"<b>&gt;</b>Action button<b>&lt;/<em>a</em>&gt</b>
~~~# Action Button
Button style usually used for call to actions::
~~~ example
<b>&lt;<em>button</em></b> <b>type</b>="button" <b>class</b>="<strong class="livingstyleguide--code-highlight">m-action_button</strong>"<b>&gt;</b>Action button<b>&lt;/<em>button</em>&gt</b>
<b>&lt;<em>a</em></b> <b>class</b>="<strong class="livingstyleguide--code-highlight">m-action_button</strong>"<b>&gt;</b>Action button<b>&lt;/<em>a</em>&gt</b>
~~~# Action Button
Button style usually used for call to actions::
~~~ example
<b>&lt;<em>button</em></b> <b>type</b>="button" <b>class</b>="<strong class="livingstyleguide--code-highlight">m-action_button</strong>"<b>&gt;</b>Action button<b>&lt;/<em>button</em>&gt</b>
<b>&lt;<em>a</em></b> <b>class</b>="<strong class="livingstyleguide--code-highlight">m-action_button</strong>"<b>&gt;</b>Action button<b>&lt;/<em>a</em>&gt</b></code></pre>
</body>
</html>
// app/assets/stylesheets/styleguide.html.lsg
@import "application.css.sass";
@import "livingstyleguide";
@jhilden
Copy link
Author

jhilden commented Nov 24, 2013

When I open http://myproject.dev/assets/styleguide.html in my browser I get the error above.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment