Win a trip to Ireland!
Win a trip to Sweden!
Win a Beer Party!
BUIX
Brutal User Interface & Experience
Elelments for a brutal user interface and experience.
Elelments for a brutal user interface and experience.
Basic forms are supported. It is possible to apply classes from other components, such as Flavors and BUTCH classes.
Layouts
You can use the grid to create a custom layout for your form. This can be done within the form tag, and it is possible to nest layouts.
.form-group
Use this class to add vertical spacing above and below a group of form elements.
.highlight
An input or entire form can be "highlighted" when the user focuses on (interacts with) an input. Simply apply the .highlight class to the area that is to be highlighted.
Copy all input fields (including select options) from one fieldset to another when a checkbox is checked.
NOTE: This feature uses unique IDs, so it can only be used once per page.
Setup:
fieldset id="copyFrom"
fieldset id="pasteTo"
Checkbox input with
id="field-copy"
TIP:
Use this method to copy inputs to hidden fields!
A date / time picker can be added simply by applying a class to a text input field!
Classes
Add a text input and apply any of these classes:
.datepick - m/d/y
.datetime - m/d/y h:m am/pm
.datepick-euro - d-m-y
.datetime-euro - d-m-y h:m am/pm
.datepick-full - Day, Month XX, YYYY
.datetime-full - Day, Month XX, YYYY h:m am/pm
Inline Picker
To display the picker inline (beneath the text input), simply apply the following data-attribute to the text input tag:
data-inline="true"
The credit card input validates the type of card number the user inputs. AMEX, Discover, MasterCard, and Visa is supported. The expiration date input is automatically formatted.
Card Examples
AMEX
3400 0000 0000 009
Discover
6011 0000 0000 0004
MasterCard
5500 0000 0000 0004
Visa
4111 1111 1111 1111
The account creation form includes validation for username, password, and email. As the user fills out the form, the results are displayed in the Profile box on the right.
Username
Email
Preferences:
To create a button, simply use the button tag, or apply .btn class to a link. Buttons are displayed as an inline block, by default.
To make a button take up the full width of a container, apply this class:
Make any element fixed positioned. Apply these classes:
.sticky - Makes any element fixed positioned.
.sticky-bottom - Fixes element at bottom
.sticky-bottom-right - Fixes element to bottom right corner of display
.sticky-bottom-left - Fixes element to bottom left corner of display
.sticky-top - Fixes element at top
.sticky-top-right - Fixes element to top right corner of display
.sticky-top-left - Fixes element to top left corner of display
.glued
Apply this class to make an element stay visible while scrolling. Best used within a sidebar.
Stack an element behind or on top of others. Apply these classes:
.stack-base - Forces layer to 0.
.stack1 - Layer 1.
.stack2 - Layer 2.
.stack3 - Layer 3.
.stack4 - Layer 4.
.stack5 - Layer 5.
.stack6 - Layer 6.
.stack7 - Layer 7.
.stack8 - Layer 8.
.stack9 - Layer 9.
.stack-middle - Layer 29.
.stack-high - Layer 49.
.stack-top - Layer 99.
.stack-auto
Apply this class to automatically increment the z-index value - starting at 0 - for every element that uses this class.
EXAMPLE: 2-layer box, using nested divs. The outermost div acts as the base layer, as the z-index is at 0.
z-index = 0
z-index = 1
z-index = 2
StackSwitch automatically displays a new layer every 3 seconds, on an endless loop.
<div class="stackswitch-wrap" data-switch="container">
<div class="stackswitch" data-switch="main-layer">
<div class="layers" data-switch="switch-parent">
<div>...layer 1...</div>
<div>...layer 2...</div>
<div>...layer 3...</div>
</div>
</div>
</div>
Let's put any kind of content in here!
Could be useful as a slideshow!
pRogrAm glitCh... we're fucked.
Everything is all good in the hood.
We are now on the next-to-last slide!!
We've successfully completed the demo.
Reveal.hover reveals hidden content upon hovering over an element!
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.
.reveal (wrap content within this class)
.secret (hidden content to be revealed upon hover)
Hover Over Me!
I'm a SECRET!
SECRET - only visible upon hover!
Reveal.toggle toggles content upon clicking on a label.
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:
<div class="reveal toggle">
<input id="unique-id-1" class="toggle" type="checkbox">
<label for="unique-id-1" class="label-toggle">
<div class="toggle-content">
...content...
</div>
</div>
Make any element draggable! Simply apply the class .draggable to any element.
Bricks are ideal as draggable elements. Simply apply class draggable to bricks: .brick.draggable.
Draggable Modals
Make a modal draggable just by adding the class draggable to the modal inner wrapper:
.modal-inner.draggable
We could stack our bricks on top of each other using stack-auto, and make them draggable: .brick.stack-auto.draggable.
Make any element have a specific cursor type, or make any element rezizeable by the user!
Apply these classes to any element. Hover for preview.
Apply these classes to make any element resizeable by the user.
Add hoverable video and image previews to any element.
Markup is simple! Simply apply the class .ph and a data-src attribute, like so:
<element class="ph" data-src="./file-url"></element>
Supported File Types: .jpg, .jpeg, .png, .ico, .gif, .svg, .bmp, .webp, .mp4, .webm
Display content when an option is selected.
<div class="cdp-wrap" id="unique-id">
<select class="cdp_select">
<option value="0">Content 1</option>
<option value="1">Content 2</option>
<option value="2">Content 3</option>...
</select>
<div class="content">
<div class="cdp-element" data-option="0">
...Option 1 Content...</div>
<div class="cdp-element" data-option="1">
...Option 2 Content...</div>
<div class="cdp-element" data-option="2">
...Option 3 Content...</div>
</div>
</div>
Load more list items upon button press!
Simply create a list of div, p, li or article elements, wrapped within a .b-loader class container!
By default, b-loader displays 5 items at a time. This can be modified in the start.brutalizing.js initialization script.
To hide the counter within the "load more" button, add the class no-counter to the b-loader wrapper.
List Item 5 (Paragraph)
List Item 10 (Paragraph)
List Item 20 (Paragraph)
A pure CSS menu that displays an optional description upon hover over each item.
<ul class="simple-nav">
<li><a href="#">List Item
<span class="desc">Description text</span></a>
</li>
</ul>
Create a nested tree list menu for unordered lists. Child items can be toggled. Each parent item will need to be wrapped in a span with class of parent. Unlimited child levels are supported.
<ul class="tree-list">
<li><span class="parent">Parent Item</span>
<ul>
<li>child item</li>
</ul>
</li>
</ul>
Create a list of items within a pagination interface. Show 5, 10, 15, 20, or 25 items per page. Wrap the pagination interface within container with class .paginate-X, where X is either 5, 10, 15, 20, or 25.
<div class="paginate-X">
<div class="items">
<div>item 1</div>
<div>item 2</div>...
</div>
<div class="pager">
<div class="firstPage">first</div>
<div class="previousPage">prev</div>
<div class="pageNumbers"></div>
<div class="nextPage">next</div>
<div class="lastPage">last</div>
</div>
</div>
Thumbnails allow you to display a list of images at a reduced size. Useful for galleries. Wrap img tags within a container with any of these classes:
TIP: These classes can also be applied directly to the img or picture tags.
<div class="size-thumb">
<img src="URL" />
<img src="URL" /> ...
</div>
Make all thumbnails into a square (regardless of their original dimensions) by applying the .crop class in conjunction with any of the thumbnail classes!
Make all thumbnails into a circle! Apply the .circle class in conjunction with .crop and any thumbnail size class:
.size-thumb.crop.circle
Display a modal with any type of content. Users can close the modal either by clicking anywhere outside of it, or the X in the top right corner. There are three components that are needed.
Wrap your content within this markup. This is what will be displayed within the modal.
<div id="unique-modal-id" style="display: none;">
...content...
</div>
This only needs to be included ONCE on the page. It loads the modal content within it.
<div class="modal">
<div class="modal-inner">
<span data-modal-close>×</span>
<div class="modal-content"></div>
</div>
</div>
Simply create a link with a unique ID and data-modal-open attribute to launch the modal.
<a href="unique-modal-id" data-modal-open>Open Modal</a>
+ Single Image
+ YouTube Video
+ Basic Content
+ StackSwitch Modal
Draggable Modals
Modals can be draggable or fixed. Simply apply the class draggable to the modal-inner wrapper to make it draggable.
Pure CSS modals for simple and lightweight content!
Wrap your content within this markup.
<div id="unique-id" class="modal-lite">
<div class="modal-content">
<div class="modal-head">..heading..</div>
<div class="modal-content-body">
..body content..
</div>
<div class="modal-footer"><a href="#" class="btn">CLOSE</a></div>
</div>
<div class="overlay"></div>
</div>
Just link to the corresponding unique ID!
<a href="#unique-id">Launch Modal</a>
Lite Modal
Fullscreen Lite Modal
Customize
By default, no backgrounds or other colors are applied. Apply any flavors classes as necessary to any of the modal elements.
Closing Modals
Optionally link the modal footer button to a unique ID within the page, so the user is returned to a specific point on the page.
Fullscreen
To create a fullscreen modal, apply the class .fullscreen (.modal-lite.fullscreen).
Scrollable
Ideal for fullscreen modals, make the modal body content vertically scrollable by applying the class .scroll-y (.modal-body-content.scroll-y).
Tabs are purely CSS, so no javascript is required! Apply flavor classes to add color. You can add any type of content within a tab!
This tab has a hot animated background.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
This tab has a nested 3-column grid layout!
<div class="tabs"> /* outer wrapper */
/* Tab 1 */
<input type="radio" name="tabs" id="tab1" checked="checked">
<label for="tab1" class="">Tab One</label>
<div class="tab">
...content...
</div>
/* Tab 2 */
<input type="radio" name="tabs" id="tab2" checked="checked">
<label for="tab2" class="">Tab One</label>
<div class="tab">
...content...
</div>
</div>
Create an infinitely scrolling content area. It is pure CSS, so no javascript is needed. There are four directions that content can be scrolled: left, right, up, and down. Hover over the scroller to pause it.
.scroll-left
I'm a scrolling text box!
Create as many scrolling content items as you want!
I scroll to the left...
.scroll-right
.scroll-up
This is a mixed content scroller with paragraphs and images.
This could be used as a news feed!
.scroll-down
This is the first paragraph of text.
I'm blinking to get your attention!
Flow-text paragraph because I'm more important
Define the Height
The height of the scroller will need to be defined. When using a horizontal (left or right) scroller, the wrapped content will also need to have the same height. A vertical scroller (up or down) only needs the height defined for the wrapper.
This is the markup for creating a scroller. Note that the scroller-wrap needs a specific height defined.
<div class="scroller-wrap" style="height: 200px;" >
<div class="scroll-direction">
<div class="scroll-item">
...
</div>
<div class="scroll-item">
...
</div>
</div>
</div>
Changing the Speed
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.
To change the speed, you will need to modify the scroll direction classes in the buix.css file.
LoopScroll allows you to create an element with a touch-enabled infinitely looping scroll! Ideal for creative navigation menus or any other type of content! Add as many items as you wish. No scrollbars are displayed by default. Recommended for mobile applications.
Wrap loop-item elements within a loopscroll wrapper.
<div class="loopscroll">
<div class="loop-item">
...content...
</div>
</div>
Limit Height
The height of the loopscroll wrapper needs to be specified in some way. For example, to limit the height to one-third of the screen height, apply the grid height class bh33 to the loopscroll wrapper.
.loopscroll.bh33
