Skip to content

Commit

Permalink
1.4
Browse files Browse the repository at this point in the history
  • Loading branch information
@pinecreativelabs
pinecreativelabs committed Aug 20, 2017
1 parent b611a0b commit cceee96
Show file tree
Hide file tree
Showing 15 changed files with 421 additions and 157 deletions.
Binary file added assets/images/blinker-fluid.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
50 changes: 35 additions & 15 deletions bfx.html
View file
Expand Up @@ -142,22 +142,13 @@ <h3 class="white-text courier-new-text fittext-compress">Equal Heights</h3>
</div>
</div>
<hr class="thick white" />
<!-- PRIDE FILTER -->

<!-- PRIDE FILTER [DEPRECATED]-->
<h3 class="white-text courier-new-text fittext-compress">Pride Filter</h3>
<p class="white-text flow-text courier-new-text"><strong>Got pride?</strong> Add a rainbow color filter to any image! Apply the class <strong>.pride</strong> to the img tag. To apply to multiple images, simply wrap them within a div with the pride class.</p>
<p class="lemon-text arial-text"><strong>NOTE:</strong> Pride filter requires a live server to work.</p>
<div class="row">
<div class="col s12 m6 l6">
<p class="flow-text white-text courier-new-text"><strong>Original Image</strong></p>
<img class="responsive" src="assets/images/brutal-building.jpg" alt="Original" />
</div>
<div class="col s12 m6 l6">
<p class="flow-text white-text courier-new-text"><strong>.pride</strong></p>
<img class="responsive pride" src="assets/images/brutal-building.jpg" alt="Prideified" />
</div>
</div>
<p class="lemon arial-text box-shadow-thick black-text"><strong>DEPRECATED:</strong> Due to compatibility issues, Pride filter is no longer supported as of 1.4.</p>
<p class="padding"></p>
<hr class="thick white" />

<!-- GLITCH -->
<h3 class="white-text courier-new-text fittext-compress">Glitch</h3>
<p class="white-text courier-new-text flow-text">Add a glitch effect to any element! Works on images and text, or even entire areas! It is entirely CSS-based. Apply <strong>.glitch</strong> class to any element.</p>
Expand All @@ -174,6 +165,35 @@ <h3 class="white-text courier-new-text fittext-compress">Glitch</h3>
</div>
<p class="padding"></p>
<hr class="thick white" />

<!-- BLINK -->
<h3 class="white-text courier-new-text fittext-compress">Blink</h3>
<p class="white-text arial-text flow-text">Blink is back! Apply theses classes to blink any element, even entire areas! Requires <em>brutalist.js</em> and <em>start.brutalizing.js</em>.</p>
<div class="row">
<div class="col s6 m3">
<h4 class="white-text lucida-text">.blink</h4>
<p class="blink vanilla-bean blue-text box-shadow-double courier-new-text">This is a blinking paragraph!</p>
</div>
<div class="col s6 m3">
<h4 class="white-text lucida-text">.blink-slow</h4>
<p class="blink-slow blue lime-text box-shadow courier-new-text">This is a slow-blinking paragraph!</p>
</div>
<div class="col s6 m3">
<h4 class="white-text lucida-text">.blink-fast</h4>
<p class="box-shadow-triple grey lemon-text center">Here is a <span class="blink-fast">fast-blinking</span> span and image:<br />
<img src="assets/images/brutal-building.jpg" alt="Fast-blinking Image" class="blink-fast small-thumb" />
</p>
</div>
<div class="col s6 m3">
<h4 class="white-text lucida-text">.blink-182</h4>
<p class="box-shadow-bottom charcoal orange-text center">Get Your Blinker Fluid <span class="blink-182">NOW</span>!<br />
<img src="assets/images/blinker-fluid.jpg" alt="Blinker Fluid" class="blink-182 circle medium-thumb" />
</p>
</div>
</div>
<p class="padding"></p>
<hr class="thick white" />

<!-- THROB -->
<h3 class="white-text courier-new-text fittext-compress">Throb</h3>
<p class="white-text courier-new-text flow-text">Apply a throbbing, pulsing effect. It's CSS-based, so no javascript is needed. Simply apply the class <strong>.throb</strong> to an element. </p>
Expand Down Expand Up @@ -256,12 +276,12 @@ <h2 class="fittext">Clip-Box</h2>
</footer>

<!-- Sticky Download Box -->
<a href="http://www.brutalistframework.com/versions/Brutalist_Framework_1.3.zip" target="_blank">
<a href="http://www.brutalistframework.com/versions/Brutalist_Framework_1.4.zip" target="_blank">
<div class="sticky-bottom-right stack-top solitary">
<div class="skew lemon-lime-gradient btn invert-hover">
<p class="flow-text black-text skew-right"><strong>Download</strong></p>
</div>
<p class="lime-text center">Version 1.3</p>
<p class="lime-text center">Version 1.4</p>
</div></a>
<!-- End Sticky -->

Expand Down
26 changes: 20 additions & 6 deletions buix.html
View file
Expand Up @@ -149,24 +149,33 @@ <h3 class="white-text courier-new-text fittext-compress">Tags</h3>
</ul>
<p class="padding"></p>
<hr class="thick white" />

<!-- REVELATIONS -->
<h3 class="white-text courier-new-text fittext-compress">Revelations</h3>
<p class="white-text arial-text"><em>Revelations</em> is a hover effect, for revealing hidden content!</p>
<div class="row">
<div class="col s12 m6">
<div class="col s12 m4">
<p class="arial-text white-text">The revelation container starts at a maximum width of 50% of the container it is wrapped within, and enlarges to 100% width upon hover while also revealing a caption.</p>
<p class="lucida-text lime-text black"><span class="heavy">.revelation</span> (wrap content within this class)<br />
&nbsp;&nbsp;&nbsp;<span class="heavy">.secret</span> (hidden content to be revealed upon hover)</p>
</div>
<div class="col s12 m6 center">
<div class="col s12 m4 center">
<div class="revelation orange-cream">
<p class="lucida-text heavy flow-text center">Hover Over Me!</p>
<p class="arial-text secret center">I'm a <span class="heavy">SECRET</span>!</p>
</div>
</div>
<div class="col s12 m4 center">
<div class="revelation orange-cream">
<img src="assets/images/brutal-building.jpg" class="responsive" />
<p class="white-text arial-text secret">SECRET - only visible upon hover!</p>
<img src="assets/images/brutal-building.jpg" class="medium-thumb" />
<p class="arial-text secret">SECRET - only visible upon hover!</p>
</div>
</div>
</div>
<p class="padding"></p>
<hr class="thick white"/>

<!-- Simple Menu -->
<h3 class="white-text courier-new-text fittext-compress">Simple Menu</h3>
<p class="white-text arial-text"><em>Simple Menu</em> is a pure CSS menu that displays a description upon hover over each item.</p>
<div class="row">
Expand Down Expand Up @@ -280,6 +289,11 @@ <h4 class="white-text courier-new-text">Markup</h4>
&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;img src="URL" /&gt;&nbsp;&nbsp;&nbsp;&lt;/li&gt;<br />
&lt;/ul&gt;
</code>
<p>&nbsp;</p>
<hr class="thick white" />
<h4 class="white-text courier-new-text">Single Image Thumbnails</h4>
<p class="white-text arial-text">Apply these classes directly to the <em>img</em> tag for single images. Their sizes correspond to the above examples.</p>
<p class="white-text lucida-text flow-text">.tiny-thumb<br />.small-thumb<br />.medium-thumb<br />.large-thumb<br />.xlarge-thumb</p>
</div>
</div>

Expand Down Expand Up @@ -423,12 +437,12 @@ <h2 class="charcoal-text courier-new-text">Modal Header</h2>
</footer>

<!-- Sticky Download Box -->
<a href="http://www.brutalistframework.com/versions/Brutalist_Framework_1.3.zip" target="_blank">
<a href="http://www.brutalistframework.com/versions/Brutalist_Framework_1.4.zip" target="_blank">
<div class="sticky-bottom-right stack-top solitary">
<div class="skew lemon-lime-gradient btn invert-hover">
<p class="flow-text black-text skew-right"><strong>Download</strong></p>
</div>
<p class="lime-text center">Version 1.3</p>
<p class="lime-text center">Version 1.4</p>
</div></a>
<!-- End Sticky -->

Expand Down
49 changes: 47 additions & 2 deletions butch.html
View file
Expand Up @@ -323,6 +323,39 @@ <h3 class="white-text courier-new-text fittext-compress">Filters</h3>
</div>
<p class="padding"></p>
<hr class="thick white" />

<!-- OPACITIES -->
<h3 class="white-text courier-new-text fittext-compress">Opacities</h3>
<p class="white-text arial-text flow-text">Make elements have opacity, or force a transparent background (ideal for PNG images).</p>
<div class="row">
<div class="col s6 m3">
<h6 class="white-text heavy lucida-text">.transparent</h6>
<p class="box-shadow-bottom grey lemon-text center">Applies a transparent background.<br />
<img src="assets/images/border.png" alt="Brutal Building" class="transparent large-thumb" />
</p>
</div>
<div class="col s6 m3">
<h6 class="white-text heavy lucida-text">.semi-transparent</h6>
<p class="box-shadow-bottom grey lemon-text center">Makes element 50% opaque.<br />
<img src="assets/images/brutal-building.jpg" alt="Brutal Building" class="semi-transparent large-thumb" />
</p>
</div>
<div class="col s6 m3">
<h6 class="white-text heavy lucida-text">.high-opacity</h6>
<p class="box-shadow-bottom grey lemon-text center">Makes element 75% opaque.<br />
<img src="assets/images/brutal-building.jpg" alt="Brutal Building" class="high-opacity large-thumb" />
</p>
</div>
<div class="col s6 m3">
<h6 class="white-text heavy lucida-text">.low-opacity</h6>
<p class="box-shadow-bottom grey lemon-text center">Makes element 25% opaque.<br />
<img src="assets/images/brutal-building.jpg" alt="Brutal Building" class="low-opacity large-thumb" />
</p>
</div>
</div>
<p class="padding"></p>
<hr class="thick white" />

<!-- BORDERS & SEPARATORS -->
<h3 class="white-text courier-new-text fittext-compress">Borders & Separators</h3>
<p class="white-text courier-new-text flow-text">Use these classes for borders and horizontal rule separators.</p>
Expand Down Expand Up @@ -377,6 +410,18 @@ <h3 class="white-text courier-new-text fittext-compress">Borders & Separators</h
</div>
</div>
</div>
<div class="row" style="margin-top: 1em;">
<div class="col s12 m6">
<div class="bevel white">
<p class="fittext blue-text arial-text">.bevel</p>
</div>
</div>
<div class="col s12 m6">
<div class="emboss white">
<p class="fittext blue-text arial-text">.emboss</p>
</div>
</div>
</div>
<div class="row">
<div class="col s12"><div class="jagged white">
<p class="blue-text arial-text fittext">.jagged</p>
Expand Down Expand Up @@ -491,12 +536,12 @@ <h4 class="black white-text courier-new-text flow-text">Responsive Videos</h4>
</footer>

<!-- Sticky Download Box -->
<a href="http://www.brutalistframework.com/versions/Brutalist_Framework_1.3.zip" target="_blank">
<a href="http://www.brutalistframework.com/versions/Brutalist_Framework_1.4.zip" target="_blank">
<div class="sticky-bottom-right stack-top solitary">
<div class="skew lemon-lime-gradient btn invert-hover">
<p class="flow-text black-text skew-right"><strong>Download</strong></p>
</div>
<p class="lime-text center">Version 1.3</p>
<p class="lime-text center">Version 1.4</p>
</div></a>
<!-- End Sticky -->

Expand Down
19 changes: 12 additions & 7 deletions css/core/buix.css
View file
Expand Up @@ -105,9 +105,14 @@ ul.tags li { display: inline-block; list-style-type: none; padding: 0; margin: 0

/* REVELATIONS
**********************************/
.revelation { display: inline-block; max-width: 50%; height: auto; transition: max-width 2s; -webkit-transition: max-width 2s; }
.revelation { display: inline-block; transition: transform 2s; -webkit-transition: transform 2s; }
.revelation .secret { display: none; }
.revelation:hover, .revelation:active, .revelation:focus { max-width: 100%; height: auto; cursor: pointer; }
.revelation:hover, .revelation:active, .revelation:focus {
cursor: pointer;
-ms-transform: scale(1.5,1.5); /* IE 9 */
-webkit-transform: scale(1.5,1.5); /* Safari */
transform: scale(1.5,1.5); /* Standard syntax */
}
.revelation:hover .secret, .revelation:active .secret, .revelation:focus .secret { display: block; }

/* THUMBNAILS
Expand All @@ -118,11 +123,11 @@ ul.thumbs-tiny, ul.thumbs-small, ul.thumbs-medium, ul.thumbs-large, ul.thumbs-xl
ul.thumbs-tiny li, ul.thumbs-small li, ul.thumbs-medium li, ul.thumbs-large li, ul.thumbs-xlarge li {
display: inline-block; float: left;
}
ul.thumbs-tiny img { height: 60px; width: auto; }
ul.thumbs-small img { height: 90px; width: auto; }
ul.thumbs-medium img { height: 120px; width: auto; }
ul.thumbs-large img { height: 150px; width: auto; }
ul.thumbs-xlarge img { height: 180px; width: auto; }
ul.thumbs-tiny img, img.tiny-thumb { height: 60px; width: auto; }
ul.thumbs-small img, img.small-thumb { height: 90px; width: auto; }
ul.thumbs-medium img, img.medium-thumb { height: 120px; width: auto; }
ul.thumbs-large img, img.large-thumb { height: 150px; width: auto; }
ul.thumbs-xlarge img, img.xlarge-thumb { height: 180px; width: auto; }

/* MODALS
**********************************/
Expand Down
29 changes: 29 additions & 0 deletions css/core/butch.css
View file
Expand Up @@ -173,6 +173,22 @@ input[type=range] + .thumb {
cursor: pointer; cursor: hand;
}

/* OPACITIES
*******************/
.transparent { background: transparent !important; }
.semi-transparent { filter:alpha(opacity=50); /* IE */
-moz-opacity:0.5; /* Mozilla */
opacity: 0.5;
}
.high-opacity { filter:alpha(opacity=75); /* IE */
-moz-opacity:0.75; /* Mozilla */
opacity: 0.75;
}
.low-opacity { filter:alpha(opacity=25); /* IE */
-moz-opacity:0.25; /* Mozilla */
opacity: 0.25;
}

/* SHAPES
*******************/
.circle { border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; }
Expand Down Expand Up @@ -265,6 +281,19 @@ hr.cut-dark:after {
border-image: repeating-linear-gradient( 45deg, #424242, #424242 1%, #d8d8d8 1%, #d8d8d8 8%) 10;
}

.bevel {
border-style: outset;
-moz-box-shadow: inset 4px 4px 4px rgba(255, 255, 255, .5), inset -4px -4px 4px rgba(0, 0, 0, .5);
-webkit-box-shadow: inset 4px 4px 4px rgba(255, 255, 255, .5), inset -4px -4px 4px rgba(0, 0, 0, .5);
box-shadow: inset 4px 4px 4px rgba(255, 255, 255, .5), inset -4px -4px 4px rgba(0, 0, 0, .5);
}
.emboss {
border-style: inset;
box-shadow: 0 1px 2px #fff, 0 -1px 1px #666, inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.8);
-moz-box-shadow: 0 1px 2px #fff, 0 -1px 1px #666, inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.8);
-webkit-box-shadow: 0 1px 2px #fff, 0 -1px 1px #666, inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.8);
}

/* BOX SHADOWS
*********************/
.box-shadow { box-shadow: 5px 5px 0 #000; }
Expand Down

0 comments on commit cceee96

Please sign in to comment.