Skip to content

Commit

Permalink
1.8
Browse files Browse the repository at this point in the history
  • Loading branch information
@pinecreativelabs
pinecreativelabs committed Feb 22, 2019
1 parent 1a12e6c commit a9f93bc
Show file tree
Hide file tree
Showing 24 changed files with 3,869 additions and 760 deletions.
2 changes: 1 addition & 1 deletion 404.html
View file
Expand Up @@ -48,7 +48,7 @@ <h2 class="fittext-compress lucida-text baffle-longer glitch lemon-text smallcap
<div class="row">
<div class="col-sm-12 no-padding">
<section class="blue-border border-dashed-thick center">
<h3 class="lucida-text fittext"><span class="baffle-forever">!</span>BRUTAL<span class="baffle-forever">!</span></h3>
<h3 class="lucida-text fittext-h3"><span class="baffle-forever">!</span>BRUTAL<span class="baffle-forever">!</span></h3>
<p class="lucida-text flow-text"><a href="index.html" class="btn blue-border border-solid-thick throb heavy invert-hover blue-text">Go Home</a></p>
</section>
<p class="padding"></p>
Expand Down
2 changes: 1 addition & 1 deletion README.md
View file
@@ -1,6 +1,6 @@
# Brutalist-Framework
A framework for the brutalist web design trend.
Version: 1.7
Version: 1.8
![BF Cover](http://www.brutalistframework.com/assets/images/bf-cover.jpg)
## About
_Brutalist Framework_ is a responsive framework exclusively for the popular brutalist web design trend. It is intended to be a boilerplate for creating simple brutalist websites.
Expand Down
Binary file added assets/images/bf-cover.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/stepping-stone-falls.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
303 changes: 150 additions & 153 deletions bfx.html
View file

Large diffs are not rendered by default.

62 changes: 38 additions & 24 deletions buix.html
View file
Expand Up @@ -283,23 +283,45 @@ <h3 class="red-text courier-new-text fittext-compress" id="tags">Tags</h3>
<!-- REVEAL -->
<div class="padding">
<h3 class="red-text courier-new-text fittext-compress" id="reveal">Reveal</h3>
<p class="charcoal-text arial-text"><em>Reveal</em> is a hover effect, for revealing hidden content!</p>
<div class="row">
<div class="col-sm-12 col-md-4 no-padding">
<div class="col-sm-12 col-md-6">
<h4>Reveal.hover</h4>
<p class="charcoal-text arial-text"><em>Reveal.hover</em> reveals hidden content upon hovering over an element!</p>
<p class="arial-text charcoal-text">The reveal 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="info padded"><span class="heavy">.reveal</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-sm-12 col-md-4 no-padding center">
<div class="reveal 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>
&nbsp;&nbsp;&nbsp;<span class="heavy">.secret</span> (hidden content to be revealed upon hover)</p>
<div class="row" style="margin-top: 2em;"><div class="col-sm-6">
<div class="reveal hover 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-sm-6">
<div class="reveal hover orange-cream">
<img src="assets/images/brutal-building.jpg" class="medium-thumb" />
<p class="arial-text secret">SECRET - only visible upon hover!</p>
</div>
</div></div>
</div>
<div class="col-sm-12 col-md-4 no-padding center">
<div class="reveal orange-cream">
<img src="assets/images/brutal-building.jpg" class="medium-thumb" />
<p class="arial-text secret">SECRET - only visible upon hover!</p>
<div class="col-sm-12 col-md-6">
<h4>Reveal.toggle</h4>
<p class="charcoal-text arial-text"><em>Reveal.toggle</em> toggles content upon clicking on a label. </p>
<div class="reveal toggle">
<input id="toggle1" class="toggle" type="checkbox"><!-- To have the toggle open by default, simply set the "checked" attribute -->
<label for="toggle1" class="label-toggle navy white-text tahoma-text heavy">Toggle Me!</label>
<div class="toggle-content">
<div class="content-inner grey navy-text">
<p>You will need a unique ID for each reveal toggle element. Clicking on the label either opens or closes the toggled content. Use the markup as follows:</p>
<code class="black lime-text lucida-text padding">
&lt;div class="reveal toggle"&gt;<br />
&lt;input id="unique-id-1" class="toggle" type="checkbox"&gt;<br />
&lt;label for="unique-id-1" class="label-toggle"&gt;<br />
&nbsp;&lt;div class="toggle-content"&gt;<br />
&nbsp;&nbsp;&lt;div class="content-inner"&gt;<br />
&nbsp;&nbsp;...content...<br />&nbsp;&nbsp;&lt;/div&gt;<br />
&nbsp;&lt;/div&gt;<br />&lt;/div&gt;
</code>
</div>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -782,18 +804,18 @@ <h4 class="red-text lucida-text">Example: Stacked Draggable Bricks</h4>
</div>
</div>
</div>
<p class="center white-text lucida-text">&copy; 2018 <em>BrutalistFramework</em>. All rights reserved.</p>
<p class="center white-text lucida-text">&copy; 2019 <em>BrutalistFramework</em>. All rights reserved.</p>
</div>
</div>
</footer>

<!-- Sticky Download Box -->
<a href="http://www.brutalistframework.com/versions/Brutalist_Framework_1.7.zip" target="_blank">
<a href="http://www.brutalistframework.com/versions/Brutalist_Framework_1.8.zip" target="_blank">
<div class="sticky-bottom-right stack-top padding red">
<div class="skew lemon-lime-gradient btn invert-hover">
<p class="flow-text black-text lucida-text skew-right"><strong>Download</strong></p>
</div>
<p class="lime-text center">Version 1.7</p>
<p class="lime-text center">Version 1.8</p>
</div></a>
<!-- End Sticky -->

Expand All @@ -803,14 +825,6 @@ <h4 class="red-text lucida-text">Example: Stacked Draggable Bricks</h4>
<script src="js/start.brutalizing.js"></script>

<!-- TRACKING -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-93046252-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>
92 changes: 82 additions & 10 deletions butch.html
View file
Expand Up @@ -168,6 +168,12 @@ <h3 class="tomato-text courier-new-text fittext-compress" id="typog">Typography<
<li>Item 2</li>
<li>Item 3</li>
</ul>
<p><strong>ul.diamond</strong></p>
<ul class="diamond">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div class="col-xs-12 col-sm-4 col-md-4">
<p><strong>ul.circle</strong></p>
Expand All @@ -176,6 +182,12 @@ <h3 class="tomato-text courier-new-text fittext-compress" id="typog">Typography<
<li>Item 2</li>
<li>Item 3</li>
</ul>
<p><strong>ul.triangle</strong></p>
<ul class="triangle">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div class="col-xs-12 col-sm-4 col-md-4">
<p><strong>ul.square</strong></p>
Expand All @@ -184,6 +196,12 @@ <h3 class="tomato-text courier-new-text fittext-compress" id="typog">Typography<
<li>Item 2</li>
<li>Item 3</li>
</ul>
<p><strong>ul.brutal</strong></p>
<ul class="brutal">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
<p class="white-text flow-text charcoal courier-new-text">Ordered Lists</p>
Expand Down Expand Up @@ -408,11 +426,37 @@ <h6 class="heavy lucida-text">.low-opacity</h6>
</p>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3">
<h6 class="heavy lucida-text">.transparent-hover</h6>
<p class="box-shadow-bottom grey lemon-text center">Renders element invisible upon hover.<br />
<img src="assets/images/brutal-building.jpg" alt="Brutal Building" class="transparent-hover large-thumb" />
</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<h6 class="heavy lucida-text">.semi-transparent-hover</h6>
<p class="box-shadow-bottom grey lemon-text center">Makes element 50% opaque upon hover.<br />
<img src="assets/images/brutal-building.jpg" alt="Brutal Building" class="semi-transparent-hover large-thumb" />
</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<h6 class="heavy lucida-text">.high-opacity-hover</h6>
<p class="box-shadow-bottom grey lemon-text center">Makes element 75% opaque upon hover.<br />
<img src="assets/images/brutal-building.jpg" alt="Brutal Building" class="high-opacity-hover large-thumb" />
</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<h6 class="heavy lucida-text">.low-opacity-hover</h6>
<p class="box-shadow-bottom grey lemon-text center">Makes element 25% opaque upon hover.<br />
<img src="assets/images/brutal-building.jpg" alt="Brutal Building" class="low-opacity-hover large-thumb" />
</p>
</div>
</div>
</div>
<p class="padding"></p>
<hr class="thick tomato" />

<!-- BORDERS & SEPARATORS -->
<!-- BORDERS, SEPARATORS, SHAPES -->
<h3 class="tomato-text courier-new-text fittext-compress" id="borders">Borders & Separators</h3>
<div class="padding">
<p class="charcoal-text courier-new-text flow-text">Use these classes for borders and horizontal rule separators.</p>
Expand Down Expand Up @@ -496,6 +540,42 @@ <h3 class="tomato-text courier-new-text fittext-compress" id="borders">Borders &
</div>
</div>
</div>
<p class="padding"></p>
<p class="white-text courier-new-text flow-text"><span class="charcoal allcaps"><strong>Shapes</strong></span></p>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4">
<div class="paranoid circle padded border-solid-thin purple-border">
<p class="flow-text purple-text center">&nbsp;<br />.circle<br />&nbsp;</p>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<div class="paranoid sketchbox silver grey-border border-dashed-thin">
<p class="flow-text blue-text center comic-sans-text">&nbsp;<br />.sketchbox<br />&nbsp;</p>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<div class="paranoid rounded gray-border border-solid-thick">
<p class="flow-text blue-text center">&nbsp;<br />.rounded<br />&nbsp;</p>
</div>
</div>
</div>
<p class="padding"></p>
<p class="white-text courier-new-text flow-text"><span class="charcoal allcaps"><strong>BETA Shapes</strong></span></p>
<p class="grey-text arial-text">Experimental shapes - NOT supported in all browsers!</p>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6">
<div class="paranoid notched gray">
<p class="flow-text blue-text center">&nbsp;<br />.notched<br />&nbsp;</p>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6">
<div class="padded">
<div class="circle-float-left border-solid-thin orange-border" style="width: 140px; height: 140px;"></div>
<div class="circle-float-right border-solid-thin orange-border" style="width: 90px; height: 90px;">CIRCLE</div>
<p class="green-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis impedit libero esse odio excepturi fuga est ut itaque a quod suscipit, rerum asperiores. Consequuntur voluptates illo rerum recusandae pariatur asperiores, aspernatur, saepe ipsum error dolorem, quod inventore possimus modi deleniti tenetur et officiis. </p>
</div>
</div>
</div>
</div>
<p class="padding"></p>
<hr class="thick tomato" />
Expand Down Expand Up @@ -653,7 +733,7 @@ <h4 class="black white-text courier-new-text flow-text">Responsive Videos</h4>
</div>
</div>
</div>
<p class="center white-text lucida-text">&copy; 2018 <em>BrutalistFramework</em>. All rights reserved.</p>
<p class="center white-text lucida-text">&copy; 2019 <em>BrutalistFramework</em>. All rights reserved.</p>
</div>
</div>
</footer>
Expand All @@ -674,14 +754,6 @@ <h4 class="black white-text courier-new-text flow-text">Responsive Videos</h4>
<script src="js/start.brutalizing.js"></script>

<!-- TRACKING -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-93046252-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>

0 comments on commit a9f93bc

Please sign in to comment.