Skip to content

Commit

Permalink
1.7
Browse files Browse the repository at this point in the history 
Introduction of ReBAR and draggable elements.
  • Loading branch information
@pinecreativelabs
pinecreativelabs committed Jul 27, 2018
1 parent ec65e2c commit 1a12e6c
Show file tree
Hide file tree
Showing 21 changed files with 1,017 additions and 214 deletions.
1 change: 1 addition & 0 deletions LICENSE.txt
View file
@@ -1,6 +1,7 @@
The MIT License (MIT)

Brutalist Framework
author: Brad Fogelstrom

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand Down
4 changes: 2 additions & 2 deletions README.md
View file
@@ -1,6 +1,6 @@
# Brutalist-Framework
A framework for the brutalist web design trend.
Version: 1.6
Version: 1.7
![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 All @@ -10,4 +10,4 @@ When dealing with brutalism, we like to think of it as being CRUDE:
* Roughly raw and rugged
* Uncomfortably ugly and unpolished
* Deliberately daring and damaging
* Extremely exasperated and embittered
* Extremely exasperated and embittered
Binary file added assets/images/showcase/mon-super-kilo.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/showcase/zarma.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 4 additions & 3 deletions bfx.html
View file
Expand Up @@ -56,6 +56,7 @@ <h2 class="white-text fittext-compress lucida-text">Brutal Effects</h2>
<li class="red invert-hover"><a href="buix.html" class="black-text">BUIX</a></li>
<li class="lime invert-hover active"><a href="#" class="black-text">BFX</a></li>
<li class="red invert-hover"><a href="grid.html" class="black-text">Grid</a></li>
<li class="red invert-hover"><a href="rebar.html" class="black-text">ReBAR</a></li>
<li class="red invert-hover"><a href="templates.html" class="black-text">Templates</a></li>
</ul>
</nav>
Expand Down Expand Up @@ -209,7 +210,7 @@ <h4 class="brutal-text-neon lime-text">.brutal-text-neon</h4>
</div>
<p class="padding"></p>
<hr class="thick tomato" />

<!-- GLITCH -->
<div class="padding">
<h3 class="red-text courier-new-text fittext-compress" id="glitch">Glitch</h3>
Expand Down Expand Up @@ -409,12 +410,12 @@ <h3 class="red-text courier-new-text fittext-compress" id="animbg">Animated Grad
</footer>

<!-- Sticky Download Box -->
<a href="http://www.brutalistframework.com/versions/Brutalist_Framework_1.6.zip" target="_blank">
<a href="http://www.brutalistframework.com/versions/Brutalist_Framework_1.7.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.6</p>
<p class="lime-text center">Version 1.7</p>
</div></a>
<!-- End Sticky -->

Expand Down
70 changes: 50 additions & 20 deletions buix.html
View file
Expand Up @@ -56,6 +56,7 @@ <h2 class="white-text fittext-compress lucida-text">Brutal User Interface Experi
<li class="lime invert-hover active"><a href="#" class="black-text">BUIX</a></li>
<li class="red invert-hover"><a href="bfx.html" class="black-text">BFX</a></li>
<li class="red invert-hover"><a href="grid.html" class="black-text">Grid</a></li>
<li class="red invert-hover"><a href="rebar.html" class="black-text">ReBAR</a></li>
<li class="red invert-hover"><a href="templates.html" class="black-text">Templates</a></li>
</ul>
</nav>
Expand All @@ -65,15 +66,15 @@ <h2 class="white-text fittext-compress lucida-text">Brutal User Interface Experi
<ul class="courier-new-text flow-text lime-text">
<li class="invert-hover"><a href="#buttons" class="lime-text">Buttons</a></li>
<li class="invert-hover"><a href="#forms" class="lime-text">Forms</a></li>
<li class="invert-hover"><a href="#stickies" class="lime-text">Stickies</a></li>
<li class="invert-hover"><a href="#stacks" class="lime-text">Stacks</a></li>
<li class="invert-hover"><a href="#stackies" class="lime-text">Stickies & Stacks</a></li>
<li class="invert-hover"><a href="#tags" class="lime-text">Tags</a></li>
<li class="invert-hover"><a href="#reveal" class="lime-text">Reveal</a></li>
<li class="invert-hover"><a href="#simplemenu" class="lime-text">Simple Menu</a></li>
<li class="invert-hover"><a href="#thumbs" class="lime-text">Thumbnails</a></li>
<li class="invert-hover"><a href="#modals" class="lime-text">Modals</a></li>
<li class="invert-hover"><a href="#tabs" class="lime-text">Tabs</a></li>
<li class="invert-hover"><a href="#scrollers" class="lime-text">Scrollers</a></li>
<li class="invert-hover"><a href="#drag" class="lime-text">Draggable</a></li>
</ul>
</nav>
</div>
Expand Down Expand Up @@ -188,7 +189,7 @@ <h3 class="red-text courier-new-text fittext-compress" id="forms">Forms</h3>
<hr class="thick tomato" />
<!-- STICKIES -->
<div class="padding">
<h3 class="red-text courier-new-text fittext-compress" id="stickies">Stickies</h3>
<h3 class="red-text courier-new-text fittext-compress" id="stackies">Stickies</h3>
<p class="charcoal-text courier-new-text flow-text">Make any element fixed positioned. Apply these classes:</p>
<div class="info padded arial-text">
<p><strong>.sticky</strong> - Makes any element fixed positioned.<br />
Expand All @@ -204,11 +205,9 @@ <h3 class="red-text courier-new-text fittext-compress" id="stickies">Stickies</h
<p class="charcoal-text arial-text"><span class="flow-text courier-new-text heavy">.glued</span><br />Apply this class to make an element stay visible while scrolling. Best used within a sidebar.</p>
</div>
</div>
<p class="padding"></p>
<hr class="thick tomato" />
<!-- Stacks -->
<div class="padding">
<h3 class="red-text courier-new-text fittext-compress" id="stacks">Stacks</h3>
<h3 class="red-text courier-new-text fittext-compress">Stacks</h3>
<p class="charcoal-text courier-new-text flow-text">Stack an element behind or on top of others. Apply these classes:</p>
<div class="row">
<div class="col-sm-12 col-md-6">
Expand Down Expand Up @@ -445,18 +444,18 @@ <h3 class="red-text courier-new-text fittext-compress" id="modals">Modals</h3>
<p class="charcoal-text arial-text">Modals are hidden content boxes that can be made visible upon clicking a link or button. Entirely CSS-based - <em>NO</em> javascript needed!</p>
<div class="row">
<div class="col-sm-12 col-md-4">
<h4 class="charcoal-text lucida-text" id="modal-anchor-1">Example 1</h4>
<h4 class="charcoal-text lucida-text" id="modal-anchor-1">Simple Modal</h4>
<p class="arial-text grey-text">Basic modal with plain text.</p>
<p style="margin-top: 1.2em;"><a href="#modal-1" class="btn border-solid-thin blue-border pink invert-hover banana-text lucida-text">Launch Modal</a></p>
</div>
<div class="col-sm-12 col-md-4">
<h4 class="charcoal-text lucida-text" id="modal-anchor-2">Example 2</h4>
<p class="arial-text grey-text">Modal with lemon-flavored overlay and thumbnail images.</p>
<h4 class="charcoal-text lucida-text" id="modal-anchor-2">Draggable Modal</h4>
<p class="arial-text grey-text">Draggable modal with lemon-flavored overlay and thumbnail images.</p>
<p style="margin-top: 1.2em;"><a href="#modal-2" class="btn border-solid-thin blue-border pink invert-hover banana-text lucida-text">Launch Modal</a></p>
</div>
<div class="col-sm-12 col-md-4">
<h4 class="charcoal-text lucida-text" id="modal-anchor-3">Example 3</h4>
<p class="arial-text grey-text">Modal with chocolate-flavored semi-transparent overlay.</p>
<h4 class="charcoal-text lucida-text" id="modal-anchor-3">Iframe Modal</h4>
<p class="arial-text grey-text">Iframe modal with chocolate-flavored semi-transparent overlay.</p>
<p style="margin-top: 1.2em;"><a href="#modal-3" class="btn border-solid-thin blue-border pink invert-hover banana-text lucida-text">Launch Modal</a></p>
</div>
</div>
Expand Down Expand Up @@ -491,7 +490,7 @@ <h4 class="charcoal-text courier-new-text">Markup</h4>
<div id="modal-1" class="modal">
<div class="modal-content platinum">
<div class="modal-head">
<h2 class="charcoal-text courier-new-text">Modal Header</h2>
<h2 class="charcoal-text courier-new-text">Simple Modal</h2>
</div>
<div class="modal-content vanilla-bean">
<p class="flow-text lucida-text">Modal content. Display anything you want here - text, images, video, anything!</p>
Expand All @@ -504,13 +503,13 @@ <h2 class="charcoal-text courier-new-text">Modal Header</h2>
<div class="overlay"></div>
</div>
<!-- Modal-2 -->
<div id="modal-2" class="modal">
<div id="modal-2" class="modal draggable">
<div class="modal-content platinum">
<div class="modal-head">
<h2 class="charcoal-text courier-new-text">Modal Header</h2>
<h2 class="charcoal-text courier-new-text">Draggable Modal</h2>
</div>
<div class="modal-content vanilla-bean">
<p class="flow-text lucida-text">This modal has a lemon flavor applied to the overlay! There's even a thumbnail set!</p>
<p class="flow-text lucida-text">This draggable modal has a lemon flavor applied to the overlay! There's even a thumbnail set!</p>
<ul class="thumbs-small">
<li><img src="assets/images/brutal-building.jpg"></li>
<li><img src="assets/images/spomenik.jpg"></li>
Expand All @@ -528,10 +527,11 @@ <h2 class="charcoal-text courier-new-text">Modal Header</h2>
<div id="modal-3" class="modal">
<div class="modal-content platinum">
<div class="modal-head">
<h2 class="charcoal-text courier-new-text">Modal Header</h2>
<h2 class="charcoal-text courier-new-text">Modal with Iframe</h2>
</div>
<div class="modal-content vanilla-bean">
<p class="flow-text lucida-text">This modal has a chocolate-flavored semi-transparent overlay!</p>
<p class="lucida-text">This modal has a chocolate-flavored semi-transparent overlay, with an iframe to display the content.</p>
<iframe src="http://www.bradfogelstrom.com" style="height: 300px;"></iframe>
</div>
<div class="modal-footer">
<a href="#modal-anchor-3" class="btn black platinum-text">CLOSE</a>
Expand Down Expand Up @@ -705,7 +705,7 @@ <h4 class="charcoal-text courier-new-text">Markup</h4>
<p class="flow-text"><strong>Changing the Speed</strong></p>
<p>By default, the scroller takes 10 seconds to scroll all the content. The wider or taller the area is, the faster it will appear to scroll. The shorter or narrower, the movement appears slower.</p>
<p>To change the speed, you will need to modify the scroll direction classes in the <em>buix.css</em> file. </p>
<p class="bigger" style="margin-top: 1em; margin-bottom: -0.5em;"><strong>Directions<strong></p>
<p class="bigger" style="margin-top: 1em; margin-bottom: -0.5em;"><strong>Directions</strong></p>
<ul class="none heavy no-padding">
<li>.scroll-left</li>
<li>.scroll-right</li>
Expand All @@ -717,6 +717,36 @@ <h4 class="charcoal-text courier-new-text">Markup</h4>
</div>
</div>

<!-- DRAGGABLE ELEMENTS -->
<p class="padding"></p>
<hr class="thick tomato"/>
<div class="padding">
<h3 class="red-text courier-new-text fittext-compress" id="drag">Draggable</h3>
<p class="charcoal-text arial-text">Make any element draggable! Simply apply the class <span class="heavy bigger">.draggable</span> to any element.</p>
</div>
<div class="row">
<div class="col-sm-12 col-md-6">
<h4 class="red-text lucida-text">Example: Draggable Bricks</h4>
<p class="charcoal-text arial-text" style="margin-bottom: 0.9em;">Bricks are ideal as draggable elements. Simply apply class <em>draggable</em> to bricks: <strong>.brick.draggable</strong>.</p>
<!-- Draggable Bricks -->
<div class="padded maroon banana-text draggable brick">Drag Me</div>
<div class="padded pink lemon-text draggable brick">PSSHH... I'm such a <span class="blink-182">drag queen</span></div>
<div class="padded peanut chocolate-text draggable brick">Drag me through the mud</div>
<p class="info padded" style="margin-top: 2em;"><span class="bigger bold">Draggable Modals</span><br />Make a modal draggable just by adding the class <em>draggable</em> to the modal wrapper:<br /><span class="bold">.modal.draggable</span></p>
</div>
<div class="col-sm-12 col-md-6">
<h4 class="red-text lucida-text">Example: Stacked Draggable Bricks</h4>
<p class="charcoal-text arial-text" style="margin-bottom: 0.9em;">We could stack our bricks on top of each other using <em>stack-auto</em>, and make them draggable: <strong>.brick.stack-auto.draggable</strong>.</p>
<div class="silver padded" style="min-height: 15em; border-bottom: 3px solid #666; margin-bottom: 2em;">
<div class="lucida-text bigger silver grey-text text-right draggable border-solid-thin grey-border padded stack-top" style="float: right;">Draggable area!<br /><small>This whole container<br />can also be dragged!</small></div>
<!-- Stacked Draggable Bricks -->
<div class="stack-auto brick padded maroon lime-text draggable huge border-dotted-thick red-border">I'm on the<br /><span class="bold">bottom</span></div>
<div class="stack-auto brick padded plum peach-text draggable bigger peach-border border-dashed-thin">Brick #2:<br /><span class="blink">Drag me!</span></div>
<div class="stack-auto brick padded orange red-text draggable lucida-text border-solid-thin blue-border bold">Top Brick</div>
</div>
</div>
</div>
<p class="padding"></p>
</div>
</div>
</div>
Expand Down Expand Up @@ -758,12 +788,12 @@ <h4 class="charcoal-text courier-new-text">Markup</h4>
</footer>

<!-- Sticky Download Box -->
<a href="http://www.brutalistframework.com/versions/Brutalist_Framework_1.6.zip" target="_blank">
<a href="http://www.brutalistframework.com/versions/Brutalist_Framework_1.7.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.6</p>
<p class="lime-text center">Version 1.7</p>
</div></a>
<!-- End Sticky -->

Expand Down
16 changes: 13 additions & 3 deletions butch.html
View file
Expand Up @@ -56,6 +56,7 @@ <h2 class="white-text fittext-compressed lucida-text">Brutalist Utility & Typogr
<li class="red invert-hover"><a href="buix.html" class="black-text">BUIX</a></li>
<li class="red invert-hover"><a href="bfx.html" class="black-text">BFX</a></li>
<li class="red invert-hover"><a href="grid.html" class="black-text">Grid</a></li>
<li class="red invert-hover"><a href="rebar.html" class="black-text">ReBAR</a></li>
<li class="red invert-hover"><a href="templates.html" class="black-text">Templates</a></li>
</ul>
</nav>
Expand Down Expand Up @@ -421,14 +422,17 @@ <h3 class="tomato-text courier-new-text fittext-compress" id="borders">Borders &
<div class="col-xs-12 col-sm-12 col-md-4">
<p class="flow-text border-solid-thin black-border" style="margin-bottom: 1em;"><strong>.border-solid-thin</strong></p>
<p class="flow-text border-solid-thick black-border" style="margin-bottom: 1em;"><strong>.border-solid-thick</strong></p>
<p class="flow-text border-solid-fat black-border" style="margin-bottom: 1em;"><strong>.border-solid-fat</strong></p>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<p class="flow-text border-dotted-thin black-border" style="margin-bottom: 1em;"><strong>.border-dotted-thin</strong></p>
<p class="flow-text border-dotted-thick black-border" style="margin-bottom: 1em;"><strong>.border-dotted-thick</strong></p>
<p class="flow-text border-dotted-fat black-border" style="margin-bottom: 1em;"><strong>.border-dotted-fat</strong></p>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<p class="flow-text border-dashed-thin black-border" style="margin-bottom: 1em;"><strong>.border-dashed-thin</strong></p>
<p class="flow-text border-dashed-thick black-border" style="margin-bottom: 1em;"><strong>.border-dashed-thick</strong></p>
<p class="flow-text border-dashed-fat black-border" style="margin-bottom: 1em;"><strong>.border-dashed-fat</strong></p>
</div>
</div>
<p class="white-text courier-new-text flow-text"><span class="charcoal allcaps"><strong>Horizontal Rules</strong></span></p>
Expand Down Expand Up @@ -479,12 +483,18 @@ <h3 class="tomato-text courier-new-text fittext-compress" id="borders">Borders &
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-12 col-sm-12 col-md-6">
<div class="jagged white padding">
<p class="blue-text lucida-text fittext">.jagged</p>
<p class="grey-text arial-text">Creates a grey triangular border above and below an element.</p>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6">
<div class="jagged2 white padding">
<p class="blue-text lucida-text fittext">.jagged2</p>
<p class="grey-text arial-text">Jagged alternative</p>
</div>
</div>
</div>
</div>
<p class="padding"></p>
Expand Down Expand Up @@ -649,12 +659,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.6.zip" target="_blank">
<a href="http://www.brutalistframework.com/versions/Brutalist_Framework_1.7.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.6</p>
<p class="lime-text center">Version 1.7</p>
</div></a>
<!-- End Sticky -->

Expand Down
69 changes: 69 additions & 0 deletions css/core/bfx.css
View file
Expand Up @@ -58,6 +58,75 @@ BFX - Brutal Effects
text-shadow: 0.35rem -0.35rem rgba(255, 105, 180, 0.9), -0.25rem -0.25rem rgba(251, 167, 58, 0.9), -0.25rem 0.35rem rgba(72, 222, 252, 0.9);
}

/* STEP TEXT EFFECT
***********************/
.step-text {
margin: 0 auto;
padding: 80px 0;
font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
font-size: 68px;
font-weight: 900;
letter-spacing: -2px;
text-transform: uppercase;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-font-smoothing: antialiased;
-webkit-font-kerning: normal;
-webkit-text-size-adjust: 100%;
}

.step-line {
height: 50px;
overflow: hidden;
position: relative;
}
.step-line:nth-child(odd) {
-webkit-transform: skew(60deg, -30deg) scaleY(0.66667);
transform: skew(60deg, -30deg) scaleY(0.66667);
}
.step-line:nth-child(even) {
-webkit-transform: skew(0deg, -30deg) scaleY(1.33333);
transform: skew(0deg, -30deg) scaleY(1.33333);
}
.step-line:nth-child(1) {
left: 29px;
}
.step-line:nth-child(2) {
left: 58px;
}
.step-line:nth-child(3) {
left: 87px;
}
.step-line:nth-child(4) {
left: 116px;
}
.step-line:nth-child(5) {
left: 145px;
}
.step-line:nth-child(6) {
left: 174px;
}
.step-line:nth-child(7) {
left: 203px;
}

/*
** Fine-grained text styles
*/
.step-text .step-line p {
height: 50px;
line-height: 45px;
padding: 0 10px;
transition: all .4s ease-in-out;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
vertical-align: top;
white-space: nowrap;
}
.step-text:hover p {
-webkit-transform: translate3d(0, -50px, 0);
transform: translate3d(0, -50px, 0);
}


/* GLITCH EFFECT
Expand Down

0 comments on commit 1a12e6c

Please sign in to comment.