Top Related Projects
A JavaScript Typing Animation Library
JavaScript animation engine
Animate on scroll library
Parallax Engine that reacts to the orientation of a smart device
The javascript library for magical scroll interactions.
Waypoints is a library that makes it easy to execute a function whenever you scroll to an element.
Quick Overview
Bricks.js is a lightweight JavaScript library for creating dynamic and responsive masonry layouts. It allows developers to create grid-like structures where elements are positioned optimally based on available vertical space, similar to how bricks are laid in a wall.
Pros
- Lightweight and dependency-free
- Supports responsive layouts with dynamic resizing
- Offers good performance with minimal DOM manipulation
- Easy to integrate with existing projects
Cons
- Limited customization options compared to more complex masonry libraries
- May require additional CSS for advanced styling
- Not actively maintained (last update was in 2017)
- Lacks built-in features like infinite scrolling or lazy loading
Code Examples
- Basic initialization:
const bricks = Bricks({
container: '.container',
packed: 'data-packed',
sizes: [
{ columns: 2, gutter: 10 },
{ mq: '768px', columns: 3, gutter: 15 },
{ mq: '1024px', columns: 4, gutter: 20 }
]
});
bricks.pack();
This code initializes Bricks.js with a responsive layout, defining different column counts and gutters for various screen sizes.
- Updating the layout after adding new elements:
const newElements = [
document.createElement('div'),
document.createElement('div')
];
bricks.update(newElements).then(() => {
console.log('New elements added and layout updated');
});
This example demonstrates how to add new elements to the layout and update it accordingly.
- Destroying the instance:
bricks.destroy();
This simple code removes all event listeners and resets the layout.
Getting Started
To use Bricks.js in your project, follow these steps:
- Include the Bricks.js library in your HTML file:
<script src="https://unpkg.com/bricks.js/dist/bricks.min.js"></script>
- Create a container for your masonry layout:
<div class="container">
<div class="item">...</div>
<div class="item">...</div>
<!-- Add more items as needed -->
</div>
- Initialize Bricks.js in your JavaScript:
document.addEventListener('DOMContentLoaded', () => {
const bricks = Bricks({
container: '.container',
packed: 'data-packed',
sizes: [
{ columns: 2, gutter: 10 },
{ mq: '768px', columns: 3, gutter: 15 },
{ mq: '1024px', columns: 4, gutter: 20 }
]
});
bricks.pack();
});
This will create a responsive masonry layout with your items.
Competitor Comparisons
A JavaScript Typing Animation Library
Pros of Typed.js
- Focuses on creating typing animations, offering a more specialized and refined solution for this specific effect
- Provides a wider range of customization options for typing animations, including speed, backspacing, and looping
- Has a larger community and more frequent updates, potentially leading to better support and maintenance
Cons of Typed.js
- Limited to typing animations, whereas Bricks.js offers a more versatile layout system for various UI elements
- May have a slightly larger file size due to its more extensive feature set for typing animations
- Requires more configuration to achieve complex typing effects, which might be unnecessary for simpler use cases
Code Comparison
Typed.js:
var typed = new Typed('#element', {
strings: ['First sentence.', 'Second sentence.'],
typeSpeed: 30
});
Bricks.js:
const instance = Bricks({
container: '.container',
packed: 'data-packed',
sizes: [
{ columns: 2, gutter: 10 },
{ mq: '768px', columns: 3, gutter: 25 },
{ mq: '1024px', columns: 4, gutter: 50 }
]
});
This comparison highlights the different focus areas of each library. Typed.js is specialized for creating typing animations, while Bricks.js is designed for creating responsive, dynamic layouts.
JavaScript animation engine
Pros of Anime
- More versatile, supporting a wide range of animations beyond layout
- Larger community and more frequent updates
- Easier to use for complex animations with a more intuitive API
Cons of Anime
- Larger file size, which may impact page load times
- May be overkill for simple layout animations
- Steeper learning curve for advanced features
Code Comparison
Bricks.js (layout-focused):
const instance = Bricks({
container: '.container',
packed: 'data-packed',
sizes: [
{ columns: 2, gutter: 10 },
{ mq: '768px', columns: 3, gutter: 25 },
{ mq: '1024px', columns: 4, gutter: 50 }
]
});
instance.pack();
Anime (general-purpose animation):
anime({
targets: '.element',
translateX: 250,
rotate: '1turn',
backgroundColor: '#FFF',
duration: 800,
easing: 'easeInOutQuad'
});
While Bricks.js focuses on creating responsive masonry layouts, Anime provides a more comprehensive animation toolkit. Bricks.js is ideal for projects requiring specific layout functionality, whereas Anime offers greater flexibility for various animation needs across web applications.
Animate on scroll library
Pros of AOS
- More comprehensive animation options, including various effects and easing functions
- Easier to implement for non-technical users, with data attributes for quick setup
- Better documentation and examples, making it more accessible for beginners
Cons of AOS
- Larger file size, which may impact page load times
- Less flexibility for custom animations compared to Bricks.js
- May have performance issues with a large number of animated elements
Code Comparison
AOS implementation:
<div data-aos="fade-up" data-aos-duration="1000">
Animate me!
</div>
Bricks.js implementation:
const instance = Bricks({
container: '.container',
packed: 'data-packed',
sizes: [
{ columns: 2, gutter: 10 },
{ mq: '768px', columns: 3, gutter: 25 },
{ mq: '1024px', columns: 4, gutter: 50 }
]
});
instance.pack();
While AOS focuses on scroll-based animations with a simple HTML implementation, Bricks.js is primarily used for creating dynamic masonry layouts with JavaScript. AOS offers a wider range of animation options out-of-the-box, while Bricks.js provides more control over layout and positioning of elements.
Parallax Engine that reacts to the orientation of a smart device
Pros of Parallax
- More feature-rich, offering various parallax effects and configurations
- Supports both mobile and desktop devices with touch and mouse input
- Has a larger community and more frequent updates
Cons of Parallax
- Heavier library, potentially impacting page load times
- More complex setup and configuration compared to Bricks.js
- May require more JavaScript knowledge to implement effectively
Code Comparison
Parallax initialization:
var scene = document.getElementById('scene');
var parallaxInstance = new Parallax(scene, {
relativeInput: true,
hoverOnly: true
});
Bricks.js initialization:
const instance = Bricks({
container: '.container',
packed: 'data-packed',
sizes: [
{ columns: 2, gutter: 10 },
{ mq: '768px', columns: 3, gutter: 25 },
{ mq: '1024px', columns: 4, gutter: 50 }
]
});
Parallax focuses on creating depth and movement effects, while Bricks.js is primarily for creating responsive, packery-like layouts. Parallax offers more visual effects but may be overkill for simpler projects. Bricks.js is lighter and easier to implement for basic masonry layouts but lacks the advanced animation features of Parallax.
The javascript library for magical scroll interactions.
Pros of ScrollMagic
- More comprehensive and feature-rich for complex scroll-based animations
- Supports pin and scene functionality for advanced scroll interactions
- Integrates well with popular animation libraries like GSAP
Cons of ScrollMagic
- Steeper learning curve due to its extensive feature set
- Larger file size, which may impact page load times
- May be overkill for simpler scroll-based layouts
Code Comparison
ScrollMagic:
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: "#trigger",
duration: 300
})
.setTween("#animate", {scale: 2.5})
.addTo(controller);
Bricks.js:
const instance = Bricks({
container: '.container',
packed: 'data-packed',
sizes: [
{ columns: 2, gutter: 10 },
{ mq: '768px', columns: 3, gutter: 25 },
{ mq: '1024px', columns: 4, gutter: 50 }
]
});
While ScrollMagic focuses on scroll-based animations and interactions, Bricks.js is primarily a masonry layout library. ScrollMagic offers more complex scroll-triggered animations, while Bricks.js excels at creating responsive grid layouts. The choice between the two depends on the specific requirements of your project.
Waypoints is a library that makes it easy to execute a function whenever you scroll to an element.
Pros of Waypoints
- More comprehensive feature set, including directional tracking and custom offsets
- Better browser support, including older versions of Internet Explorer
- Larger community and more extensive documentation
Cons of Waypoints
- Larger file size and potentially higher performance overhead
- Less focused on specific use cases, which may lead to unnecessary complexity for simple projects
- Requires more setup and configuration for basic functionality
Code Comparison
Waypoints:
var waypoint = new Waypoint({
element: document.getElementById('element'),
handler: function(direction) {
console.log('Scrolled to waypoint!')
}
})
Bricks.js:
const instance = Bricks({
container: '.container',
packed: 'data-packed',
sizes: [
{ columns: 2, gutter: 10 },
{ mq: '768px', columns: 3, gutter: 25 },
{ mq: '1024px', columns: 4, gutter: 50 }
]
})
While Waypoints offers more features and broader browser support, Bricks.js provides a more streamlined solution for specific layout tasks. The code comparison shows that Waypoints focuses on scroll-based events, while Bricks.js specializes in creating responsive, packery-style layouts.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
Bricks.js
Momma said, "Stay patient." - Bricks, DJ Carnage
But you don't need to, because Bricks is a blazing fast masonry layout generator for fixed width elements.
Getting Started
Follow these steps:
Install
Bricks was developed with a modern JavaScript workflow in mind. To use it, it's recommended you have a build system in place that can transpile ES6, and bundle modules. For a minimal boilerplate that does so, check out outset.
Using NPM, install Bricks.js, and add it to your package.json
dependencies.
$ npm install bricks.js --save
Refer to the releases page for version specific information.
Instantiate
Simply import Bricks, then instantiate it.
It's recommended that you assign your Bricks instance to a variable. Using your instance, you can:
- enable and disable the resize handler
- add and remove event handlers
- accommodate dynamically added elements
// import Bricks
import Bricks from 'bricks.js'
// create an instance
const instance = Bricks({
// ...
})
Parameters passed to the constructor are detailed below.
Parameters
Note that all parameters, except position
, are required:
- A container (node or CSS selector)
- A packed attribute
- A sizes array
- A position boolean (defaulting to
true
)
container
A node, or CSS selector, that represents the grid wrapper. The direct children of this element must be the grid items.
// passing a node
const instance = Bricks({
container: node
})
// passing a selector (document.querySelector is used to get the node)
const instance = Bricks({
container: '.selector'
})
packed
An attribute added to the grid items after they're positioned within the grid. If the attribute is not prefixed with data-
, it will be added.
// prefixed
const instance = Bricks({
packed: 'data-packed'
})
// unprefixed
const instance = Bricks({
// becomes: 'data-packed'
packed: 'packed'
})
Note that Bricks uses this attribute internally to avoiding unnecessarily repositioning grid items already in place. It's best to avoid manipulating it.
sizes
An array of objects describing the grid's properties at different breakpoints.
When defining your sizes, note the following:
- Sizes must be listed smallest to largest
- Sizes must use
min-width
media queries (any unit) - Width of the grid items at each breakpoint should be set in your CSS (in px)
- The size without the
mq
property is assumed to be your smallest breakpoint, and must appear first
// mq - the minimum viewport width (String CSS unit: em, px, rem)
// columns - the number of vertical columns
// gutter - the space (in px) between the columns and grid items
const sizes = [
{ columns: 2, gutter: 10 },
{ mq: '768px', columns: 3, gutter: 25 },
{ mq: '1024px', columns: 4, gutter: 50 }
]
const instance = Bricks({
sizes: sizes
})
position
A boolean, defaulting to true
, indicating that the grid items should be positioned using the top
and left
CSS properties.
If set to false
, the grid items will be positioned using the transform
CSS property.
// default ('true')
// grid items are positioned via the 'top' and 'left' properties
const instance = Bricks({
position: true
})
// explicitly 'false' (not any falsy value!)
// grid items are positioned via the 'transform' property
const instance = Bricks({
position: false
})
Positioning using transform
is done via translate3d
for optimal performance. Coupled with a CSS transition
, this option allows for smoothly animating the grid items into place.
API / Events
Bricks instances are extended with Knot.js, a browser-based event emitter. Use the event emitter syntax to add and remove handlers for the events emitted by the API methods. Review the emitter syntax here.
Bricks exposes the following methods, and corresponding events:
Note that all methods, including those from the event emitter, are chainable.
.pack()
Used to pack all elements within the container.
// pack ALL grid items
instance.pack()
// 'pack' is emitted when ALL items have been packed
instance.on('pack', () => {
// ...
})
Note that it should be called when creating your instance, to pack the initial items.
.update()
Used to pack elements without the packed
attribute within the container.
// pack NEW grid items
instance.update()
// 'update' is emitted when NEW items have been packed
instance.on('update', () => {
// ...
})
Note that this is the preferred method for handling dynamically added items, because it will only operate on items that have not yet been packed (i.e. don't have the packed
attribute).
.resize(flag)
Used to add or remove the resize
event handler. It's recommended that you add the resize handler when you create your instance.
// add or remove the resize handler
instance
.resize(true) // 'true' adds it
.resize(false) // 'false' removes it
// 'resize' is emitted when resizing has resulted in a new matching 'size' object
instance.on('resize', size => {
// 'size' is the newly matching size object
// ...
})
Note that the resize handler fires the pack
method if the resulting screen size matches a size parameter other than the current one. In this case, the pack
event will be fired immediately before the resize
event. Use the resize
event only for breakpoint specific code, not code meant for when the grid has been packed.
Browser Support
Bricks depends on the following browser APIs:
- ES5 array methods: forEach, map, indexOf
- requestAnimationFrame
- matchMedia
Consequently, it supports the following natively:
- Chrome 24+
- Firefox 23+
- Safari 6.1+
- Opera 15+
- IE 10+
- iOS Safari 7.1+
- Android Browser 4.4+
To support older browsers, consider including polyfills/shims for the APIs listed above. There are no plans to include any in the library, in the interest of file size.
Colophon
- Site Design: Chris Allen
License
MIT. © 2017 Michael Cavalea
Top Related Projects
A JavaScript Typing Animation Library
JavaScript animation engine
Animate on scroll library
Parallax Engine that reacts to the orientation of a smart device
The javascript library for magical scroll interactions.
Waypoints is a library that makes it easy to execute a function whenever you scroll to an element.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot