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".
- 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
- 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
BISCUIT (Brutally Integrated Security & Consent User Interface Tool)
- 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!
- 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.
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:
Some core and BELL components don't work properly with jQuery 1 or 2, so stick with using version 3.
Some new flavoring has been added!
- 11 new flavors: sand, seaweed, pickle, caramel, beer, ash, smoke, azure, mustard, mauve, cider
- 17 new gradients
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.
There is now support for devices with widths and heights of 360px.
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).
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!
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!
Example: fullscreen lite modal with scrollable content. (Live example found on "About Us" on home page.)
Note About Forms Within Modals
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".
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.
Have you built something with our framework?
We'd like to know! Shoot us a brutal email: email@example.com