Copy


BRUTAL BLAST /// ISSUE 14 

Version 2.1 Now Available!

Brutalist Framework version 2.1 is finally here! Let's take a look at the new brutality!

Biggest and Bestest Release Yet!
Version 2.1 is a big release, and it will be what all future versions will be based off of moving forward! Here's a quick overview of what's new:
  • Introducing BELL (formerly "Plugins")
  • New Boilerplates (formerly "Starting Points") 
  • Core upgrades 
 
Introducing BELL: Brutal Extension Element Library
Formerly "Plugins", BELL is an extension library included with BF within the core (found in the directory /core/bell ). Intended as a simple way to boost user experience, BELL was created with 4 types of elements: media, interface, content, and "BISCUIT".

Media Elements
  • Audio Player - a simple single audio file player
  • GIF Player - Play and pause animated GIF images on click or hover
  • Video Player - Simple player for self-hosted videos
Interface Elements
  • MegaMenu - Responsive multi-level drop-down menu
  • Printer - Print specific area on page
  • Exit Intent - Display a popup box when a visitor tries to "exit" the page
Content Elements
  • Timeline - Display content in a simple vertical timeline format
  • Presenter - A touch-friendly content slider (no auto-play) 
  • PISS (Paginated Inline Synchronous Search) - Display a paginated list of content with an instant search function!
BISCUIT (Brutally Integrated Security & Consent User Interface Tool)
  • Age Verify - Block underage visitors from viewing your page
  • PageLock - Disable ability to right-click
  • Cookie Consent - Comply to GDPR requirements and display a cookie consent bar.

Core Updates
One big focus going forward is and will be the continuation of optimizing code, with the objective being to improve overall site performance. This involves reducing the amount of code in relation to actual content, a factor search engines take into account when evaluating and scoring site speed. One effort being made is reducing the length of the core class names. In 2.1, there are a number of classes that now have shorter, simpler names. All former class names are still supported, but now considered deprecated. Some examples:

.blue-text-shadow  ~ is now ~ .blue-t-s 
.blue-border ~ is now ~ .blue-b 
.blue-outline ~ is now ~ .blue-o 
.border-solid-thick ~ is now ~ .brdr-s-k 

... and many others! More of this will done in 2.2. 

Another important core update is that we are now using jQuery 3. In previous versions, we were using jQuery 1, which has not been supported for a while now. BF 2.1 includes all three versions of jQuery, which can be loaded as follows: 
  • /core/js/jquery.1.js
  • /core/js/jquery.2.js
  • /core/js/jquery.3.js
Some core and BELL components don't work properly with jQuery 1 or 2, so stick with using version 3. 

Ideally, we'd like to do everything in pure, delicious vanilla javascript for the core elements. In the future, we'd like to have ALL core items be vanilla, so as to remove any dependencies on jQuery. In version 2.2, we'll likely move any jQuery-dependent elements into BELL. Ultimately, the objective will be to have the core be purely dependency-free, with all BELL items being dependent on jQuery. We'll focus on that in 2.2. 
 
Flavors Update
Some new flavoring has been added!
  • 11 new flavors: sand, seaweed, pickle, caramel, beer, ash, smoke, azure, mustard, mauve, cider
  • 17 new gradients
 
Grid Update
New stretch class for blocks to make all the contained blocks the same height. Example: .block-wrap.stretch. All individual blocks within the wrapper will now be the same height. 

Keep in mind there are two distinct grids: Flexbox and B3Grid. Flexbox uses rows, while B3Grid does not. B3Grid can be used within a Flexbox grid layout. You can also use a fluid-width (.container-fluid) Flexbox grid layout within a B3Grid layout. 
 
ReBAR Update
There is now support for devices with widths and heights of 360px. 
 
BUIX Updates
Some improvements have been made to buttons. There is now a new "jumbo" button! To turn a standard link into a button, just apply classes like so: .btn.btn-size (or .btn.size-btn).

Cursors and Resizable Elements
You can now change the type of cursor for any element just by applying a class. For example, apply the class "zoom-in" to display a zoom-in style cursor. 

You can also make any element resizable by the user. Resize horizontally only (.resize-h), vertically only (.resize-v), or both (.resize-both). 

Preview Hover
Display a thumbnail image or video preview when a user hovers over an element! Simply apply the class ".ph" to the element, and reference the preview image or video file like so: data-src="/path-to-file"

CDP: Content Display Picker
Use a select dropdown menu to display different content! 

B-Loader (BETA)
Display long element lists 5 items at a time. The user can load 5 more items per click, and the total number currently displayed and total number of items available are shown as part of the load more link. 

New "Lite" Modals! 
In a previous version of BF, modals were CSS-only, but they were rather buggy. Now they're back and improved! As an alternative to the standard javascript-based modals, Lite Modals are pure CSS. They are ideal for app interfaces, as there is now a way to make them fullscreen. If the modal content is taller than the screen, the modal body content can be vertically scrollable. 

Example: fullscreen lite modal with scrollable content. (Live example found on "About Us" on home page.)


Note About Forms Within Modals
Forms do not work properly within a standard javascript modal. However, forms DO work properly within a Lite Modal. 
 
BUTCH, bIcons, and BFX Updates
In BUTCH, there is a new Section Header Counter, which allows for auto-incremented section and sub-section headers. This is ideal for pages with long documentation or other text content. 
In bIcons, we've added 10 new icons: islam, umbrella, weather, fountain, sailboat, ferry, heat, medical, hash, flower.
In BFX, there is a new animated background - .infinitile - which is just an animated repeating tile background. There are also some new "blender" classes. BONUS: there's a "spotlight" cursor effect, which can be added by adding an empty div element anywhere to your page with the class "spotlight". 
 
Boilerplates
Formerly "Starting Points", Boilerplates are starter project templates that are included with BF. 2.1 includes: 
  • Email Boilerplate - a simple email template
  • Lead Capture - a simple marketing campaign landing page with Cookie Consent and Exit Intent demo
  • MicroBlog - a simple blog post list page 
  • Social - a simple community activity template with a timeline example 
  • Horror - a simple event registration template with Exit Intent example
  • Rated X - a simple example of the Age Verify module 
  • Vaporwave - a creative template for any purpose

 
Road Map: What's Next in 2.2?
Version 2.2 will have a heavy focus on removing dependencies on jQuery, and further shortening of class names. As mentioned earlier, this will involve moving things around a bit more. Some current core elements may be moved to BELL, and vice versa. Speed and efficiency are the primary focus for 2.2. Further development and enhancement of current features will also be an effort. 

The structure of BF is now where we want it to be, so moving forward with a PHP-based version (Brutalist PHramework) will now have more focus. 

Be sure to check the roadmap, as it may change as development progresses. 
Github Roadmap
 

Have you built something with our framework?
We'd like to know! Shoot us a brutal email: butch@brutalistframework.com
 
 
Copyright © 2020 Brutalist Framework, All rights reserved.

Want to change how you receive these emails?
You can update your preferences or unsubscribe from this list

 






This email was sent to <<Email Address>>
why did I get this?    unsubscribe from this list    update subscription preferences
Pine Creative Labs · 123 Brutal Blvd. · Fort Wayne, IN 46815 · USA

Email Marketing Powered by Mailchimp