BRUTAL BLAST /// ISSUE 9
Version 1.7 Released!
Brutalist Framework version 1.7 is now available for download. In this version, the primary focus is the introduction of ReBAR.
What's new in 1.7?
- FLAVORS: 6 new flavors
- BUTCH: Updates to borders
- BUIX: New draggable elements!
- ReBAR - new responsive helper classes
On the home page, you'll notice that there is now a new tabbed area. This contains a changelog and a new showcase section.
DELICIOUS NEW FLAVORS
We've added 6 new flavors:
- Coconut
- Rice
- Grapefruit
- Pink Champagne
- Fruit Punch
- Salmon
BUTCH - Updated Borders
BUTCH has updated borders: new "fat" borders, and a new jagged alternative border style!
BUIX - New Draggable Elements!
User experience in brutalist web design demands draggable elements! We've added this in 1.7, and it's incredibly simple... just add the class .draggable to any element you want to make draggable!
It uses jquery, so start.brutalizing.js and brutalist.js are required.
Bricks are inline blocks that are ideal as draggable elements. Stacks are useful if you want to stack elements on top of each other, and make them draggable (hint: stack-auto makes this easier).
Modals can also be made draggable, too! Simply apply draggable to the outer modal class (.modal.draggable). Linked content within a modal can still be clicked on.
Introducing ReBAR
The big update in 1.7 is the introduction of ReBAR: Responsive Breakpoint Assistance Reference.
Adding 97 new classes to BF, ReBAR is a library of responsive class helpers. These deal with showing or hiding content at various screen sizes. There are several aspects to ReBAR:
- Max- and Min-width breakpoints
- Height-based breakpoints
- Orientation (portrait or landscape)
- Print utility classes (PUC)
Based on media queries, ReBAR is designed to allow flexibility of display conditions for various screen widths, heights, and orientation. It also has a few classes for showing and hiding content for printing.
One big component of ReBAR is max- and min-width classes. Max-width deals with screen sizes that are UP TO (or under) a certain size, whereas min-width deals with screens STARTING AT (or above) a certain size (but 1 pixel above that value).
EXAMPLE 1: We simply want to display a content block on devices that are 480px wide or less. We want to be sure it is hidden on devices that are over 480 (481px or higher). We only need one class: .hide-over-480
EXAMPLE 2, part a: Let's say we want to replace a box with another one at different sizes. Here, we want to display "box1" on devices 480 or less, but display "box2" on devices 481px and higher.
box1: .hide-over-480
box2: .hide-under-480
EXAMPLE 2, part b: Now, let's say we want to make "box1" visible again on screens that are 1280px or greater. We just need to make sure "box1" is shown again, but we also want to hide "box2" at this size.
box1: .hide-over-480 .show-over-1280
box2: .hide-under-480 .hide-over-1280
EXAMPLE 3: Let's say you want to display an information box only in the conditions that the screen has dimensions of up to 540px wide by 960px high, and the device is only in the portrait orientation. Use these classes: .info .show-on-portrait .hide-over-540 .hide-over-960h
TIP: First focus on what content should be hidden and at what sizes, so use the hide classes first. Then, use the show classes to override the hidden content.
Reinforce your brutal website with ReBAR and the B3Grid!
BUILT WITH BRUTALISM
Here are a couple websites that were built using Brutalist Framework!
 
Third-Party Templates Needed!
We are now looking for templates - built with BF - to add to the Third Party Templates list. These can free or paid. To submit one, send us the title, description, and demo URL to: butch@brutalistframework.com.
What's Next?
While version 2 is still in the works, new versions will continue to be released on a regular basis. Here's some upcoming features for future versions:
Version 1.8
- New BFX animations
- New ecommerce templates (product page, product list)
- Updates to ReBAR and Grid
- Others TBD
Version 2+
- New PHP version
- Ajax content
If there are any features or other improvements that you'd like to suggest, head over to Github and put in a request!
Have you built something with our framework? We'd like to know! Shoot us a brutal email: butch@brutalistframework.com
|
|
|
|
