Skip to content

Commit

Permalink
Add circle and reverse-string
Browse files Browse the repository at this point in the history
  • Loading branch information
Kyle Brumm committed Nov 22, 2014
1 parent 7a6e5fb commit 2735d15
Show file tree
Hide file tree
Showing 9 changed files with 188 additions and 40 deletions.
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "juice",
"description": "SASS Mixins for Life",
"version": "0.0.5",
"version": "0.0.6",
"homepage": "http://juicynex.us/juice",
"keywords": [
"CSS",
Expand Down
4 changes: 2 additions & 2 deletions build/css/style.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion build/js/main.min.js
View file

Large diffs are not rendered by default.

55 changes: 49 additions & 6 deletions dist/_juice.scss
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,29 @@
// Juice v0.0.5
// Juice v0.0.6
// ------------

// ----------------------------------
// Variable settings
// ----------------------------------

// Base px
$base-px-default: 16 !default;
$base-px-default: 16px !default;
// Breakpoints
$hdpi-ratio-default: 1.3 !default;
// Border Radius
$border-radius-default: 5px !default;
// Placeholder Color
$placeholder-color-default: #555555 !default;
// Triangle
$triangle-direction-default: "right" !default;
$triangle-size-default: "10px" !default;
$triangle-color-default: "#000000" !default;
$triangle-element-default: "after" !default;
$triangle-direction-default: right !default;
$triangle-size-default: 10px !default;
$triangle-color-default: #222222 !default;
$triangle-element-default: after !default;
// Circle
$circle-size-default: $base-px-default !default;
$circle-color-default: inherit !default;
$circle-border-width-default: null !default;
$circle-border-color-default: #222222 !default;
$circle-display-default: inline-block !default;
// Position
$position-default: null !default;
// Tint/Shade
Expand Down Expand Up @@ -289,6 +295,32 @@ $breakpoints: (
}
}

// Create a circle, with an optional border
@mixin circle($size: $circle-size-default,
$color: $circle-color-default,
$border-width: $circle-border-width-default,
$border-color: $circle-border-color-default,
$display: $circle-display-default) {
display: $display;
border-radius: 50%;
@if $border-width {
@include square($size);
background-color: $color;
border: $border-width solid $border-color;
}
@else{
@if $color == inherit {
border-width: $size/2;
border-style: solid;
@include square(0);
}
@else {
@include square($size);
background-color: $color;
}
}
}

// Advanced positioning
// --------------------
@mixin position($type,
Expand Down Expand Up @@ -433,3 +465,14 @@ $breakpoints: (
$blue: random(256)-1;
@return rgb($red, $green, $blue);
}

// Reverse a string
// ----------------
@function reverse($string) {
$reversed-string: "";
@for $i from 1 through str-length($string) {
$char: str-slice($string, $i, $i);
$reversed-string: "#{$char}#{$reversed-string}";
}
@return #{$reversed-string};
}
93 changes: 85 additions & 8 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
</head>
<body id="top" data-spy="scroll" data-target=".navbar-collapse">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="progressbar" role="progressbar" style="width: 20%;"></div>
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navigation">
Expand Down Expand Up @@ -57,6 +58,7 @@ <h4><a href="#mixins">Mixins</a></h4>
<li><a href="#hoverer">Hoverer</a></li>
<li><a href="#responsive">Responsive</a></li>
<li><a href="#triangle">Triangle</a></li>
<li><a href="#circle">Circle</a></li>
<li><a href="#position">Position</a></li>
</ul>
</div>
Expand All @@ -80,6 +82,7 @@ <h4><a href="#functions">Functions</a></h4>
<li><a href="#rem-calc">Rem Calc</a></li>
<li><a href="#em-calc">Em Calc</a></li>
<li><a href="#random-color">Random Color</a></li>
<li><a href="#reverse">Reverse String</a></li>
</ul>
</div>
</div>
Expand Down Expand Up @@ -494,7 +497,7 @@ <h4>CSS Output:</h4>
@content;
}
}</code></pre>"><i class="fa fa-code"></i></a></div>
<p class="description">Create a pure css triangle with the :after psuedo element.</p>
<p class="description">Create a triangle with the :after psuedo element.</p>
<p><strong>Optional Arguments:</strong> $direction, $size, $color, $center, $element</p>
<hr>
<h4>Example:</h4>
Expand All @@ -518,6 +521,51 @@ <h4>CSS Output:</h4>
}</code></pre>
</article>

<article id="circle">
<div class="article-header"><h3>Circle</h3>
<a class="show-source" tabindex="0" role="button" data-toggle="popover" data-placement="bottom" data-trigger="focus" data-content="
<pre><code class='language-scss'>@mixin circle($size: $circle-size-default,
$color: $circle-color-default,
$border-width: $circle-border-width-default,
$border-color: $circle-border-color-default,
$display: $circle-display-default) {
display: $display;
border-radius: 50%;
@if $border-width {
@include square($size);
background-color: $color;
border: $border-width solid $border-color;
}
@else{
@if $color == inherit {
border-width: $size/2;
border-style: solid;
@include square(0);
}
@else {
@include square($size);
background-color: $color;
}
}
}</code></pre>"><i class="fa fa-code"></i></a></div>
<p class="description">Create a circle, with an optional border.</p>
<p><strong>Optional Arguments:</strong> $size, $color, $border-width, $border-color, $display</p>
<hr>
<h4>Example:</h4>
<pre><code class="language-scss">.element {
@include circle(40px, red, 5px);
}</code></pre>
<h4>CSS Output:</h4>
<pre><code class="language-scss">.element {
display: inline-block;
border-radius: 50%;
width: 40px;
height: 40px;
background-color: red;
border: 5px solid #222222;
}</code></pre>
</article>

<article id="position">
<div class="article-header"><h3>Position</h3>
<a class="show-source" tabindex="0" role="button" data-toggle="popover" data-placement="bottom" data-trigger="focus" data-content="
Expand Down Expand Up @@ -879,6 +927,29 @@ <h4>CSS Output:</h4>
}</code></pre>
</article>

<article id="reverse">
<div class="article-header"><h3>Reverse</h3>
<a class="show-source" tabindex="0" role="button" data-toggle="popover" data-placement="bottom" data-trigger="focus" data-content="
<pre><code class='language-scss'>@function reverse($string) {
$reversed-string: '';
@for $i from 1 through str-length($string) {
$char: str-slice($string, $i, $i);
$reversed-string: '#{$char}#{$reversed-string}';
}
@return #{$reversed-string};
}</code></pre>"><i class="fa fa-code"></i></a></div>
<p class="description">Reverse a string.</p>
<hr>
<h4>Example:</h4>
<pre><code class="language-scss">.element {
background-color: reverse(eulb);
}</code></pre>
<h4>CSS Output:</h4>
<pre><code class="language-scss">.element {
background-color: blue;
}</code></pre>
</article>

</section>


Expand All @@ -898,7 +969,7 @@ <h4>Bower</h4>
<h4>Clone/Fork</h4>
<pre><code class="language-scss">$ git clone git@github.com:kjbrum/juice.git</code></pre>
<hr>
<a class="download-repo" href="https://github.com/kjbrum/juice/archive/master.zip">Download Repo</a>
<a class="shake shake-little download-repo" href="https://github.com/kjbrum/juice/archive/master.zip">Download Repo</a>
</article>

<article id="using">
Expand All @@ -913,18 +984,24 @@ <h4>Clone/Fork</h4>
<div class="article-header"><h3>Settings</h3></div>
<p>You can override these variables in your main scss file to change the default values.</p>
<pre><code class="language-scss">// Base px
$base-px-default: 16 !default;
$base-px-default: 16px !default;
// Breakpoints
$hdpi-ratio-default: 1.3 !default;
// Border Radius
$border-radius-default: 5px !default;
// Placeholder Color
$placeholder-color-default: #555555 !default;
// Triangle
$triangle-direction-default: "right" !default;
$triangle-size-default: "10px" !default;
$triangle-color-default: "#000000" !default;
$triangle-element-default: "after" !default;
$triangle-direction-default: right !default;
$triangle-size-default: 10px !default;
$triangle-color-default: #222222 !default;
$triangle-element-default: after !default;
// Circle
$circle-size-default: $base-px-default !default;
$circle-color-default: inherit !default;
$circle-border-width-default: null !default;
$circle-border-color-default: #222222 !default;
$circle-display-default: inline-block !default;
// Position
$position-default: null !default;
// Tint/Shade
Expand All @@ -935,7 +1012,7 @@ <h4>Clone/Fork</h4>

<a class="top" href="#top"></a>
<footer>
<p>Built with <i class="fa fa-heart"></i> by <a href="http://kylebrumm.com">Kyle Brumm</a></p>
<p>Built with <i class="shake shake-constant fa fa-heart"></i> by <a href="http://kylebrumm.com">Kyle Brumm</a></p>
</footer>


Expand Down
36 changes: 26 additions & 10 deletions js/xx-main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,30 +19,46 @@ $(function() {
return false;
});

setTop();
// Collapse nav when link is clicked
$(document).on('click', '.nav a', function(){
$(".navbar-toggle").click();
});

runOnScroll();
$(window).scroll(function() {
setTop();
runOnScroll();
});

function setTop() {
var $top = $('.top'),
$brand = $('.navbar-brand');
if($(this).scrollTop() > 0) {
function runOnScroll() {
var scrolled = $(this).scrollTop(),
$top = $('.top'),
$brand = $('.navbar-brand'),
winHeight = $(window).height(),
docHeight = $(document).height(),
full = docHeight-winHeight-292,
scrollPercent = ((scrolled/full)*100-(292/full)*100)+'%';

// Show/hide back to top button
if(scrolled > 0) {
$top.addClass('visible');
} else {
$top.removeClass('visible');
}

if($(this).scrollTop() >= 232) {
// Show/hide branding in the header
if(scrolled >= 232) {
$brand.addClass('visible');
} else {
$brand.removeClass('visible');
}

// Set pregress bar width
$('.progressbar').width(scrollPercent);
}

$(document).on('click', '.show-source', function() {
$('pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
$('pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
});
});
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "juice",
"description": "SASS Mixins for Life",
"version": "0.0.5",
"version": "0.0.6",
"homepage": "http://juicynex.us/juice",
"license": "MIT",
"author": {
Expand Down
1 change: 1 addition & 0 deletions sass/_csshake.scss
View file

Large diffs are not rendered by default.

Loading

0 comments on commit 2735d15

Please sign in to comment.