slurve.js

What is Slurve?

Slant + Curve = Slurve. slurve.js makes it easy to add slants and curves to the UIs of websites and web apps.

Due to the intrinsic nature of the CSS box model, websites and web apps are boxy by default. Slurve was created to break out of the box from this norm.

Slurve aims to make it dead simple to add slants and curves to existing (or new) web based UIs. Simply tag HTML elements, add some CSS and load slurve.js to glue it all together. That's it.

slurvejs.com slurve.js on Github

Slurve has wide browser support as its core dependency is basic SVG.

Examples

There is a lot of creativity to be had when using slurve.js and I look forward to what the community comes up with. Below are a few samples (not images, but actual Slurved DOM aka Slurve instances) to showcase the basics. Example time.

Slant

Curve

Slant + Curve

The examples above are meant to demonstrate the following:

• slurve.js manipulates and works with existing DOM
• each Slurve instance is responsive and can be individually styled
• There are 16 total offset types (4 corners by 2 axis by 2 corner types)
  • 8 Slant Types (default)
  • 8 Curve Types
• Mix and match to your heart's content :)

Basic Setup

Slurve is dependent on three things in order to work:

1. HTML
   • slurve class
   • slurve attribute
2. CSS
   • slurve.css
3. JavaScript
   • slurve.js

Below are the minimum HTML, CSS, and JavaScript requirements to add a Slurve instance to your UI.

HTML

The slurve class is required as an internal positioning helper used by slurve.js.

The slurve attribute takes a string representing four space-delimited coordinates (x,y). slurve.js uses each of these four coordinates as relative offsets to the attached element's boundary corners. The coordinates start at the top-left and move clockwise. So the below example of data-slurve="0,-25 0,0 0,25 0,0" maps to:

• (0,-25) as Top-Left offset
• (0,0) as Top-Right offset
• (0,25) as Bottom-Right offset
• (0,0) as Bottom-Left offset

<div class="slurve" data-slurve="0,-25 0,0 0,25 0,0">
    Your HTML here.
</div>

CSS

The slurve.css file has a few styles that enable slurve.js to work properly. Nothing exciting here, but feel free to take a peek at it.

<link href="path/to/slurve.css" rel="stylesheet" />

JavaScript

Once you have the above mentioned HTML and CSS set up, you'll need to load slurve.js. Once loaded, slurve.js calls its public update() method to update any DOM nodes containing a slurve property. I recommend loading the script just before the closing </body> tag.

If at anytime you update the DOM with dynamically inserted Slurve elements, make sure to call slurve.update(). This call ensures all Slurve instances in the page are recalculated to properly maintain their sizes based on outside influences. As an FYI, slurve.js already updates each instance based on the resize event so your Slurves are responsive.

slurve.update();

Basic Style

The basic setup above is the bare minimum for slurve.js to function, but it lacks style. In fact the default fill color for <svg> elements is black. Let's change that. All we have to do is use the slurve-classes attribute and add the respective classes. slurve.js uses this attribute to determine which classes should be added to the dynamically generated SVG element that represents the Slurve background. Here's our updated example:

HTML

<div class="slurve" data-slurve="0,-25 0,0 0,25 0,0" data-slurve-classes="slurve-style-1">
    Your HTML here.
</div>

CSS

.slurve-style-1 {
    fill: #99CC33;
}

This approach results in a simple fill. This is pretty cool, but we can do more.

Curves

So when I mentioned the coordinates earlier, I left out the curves part. Don't worry, adding curves is dead simple. To add curves, simply add a third value to the "coordinate" you want curved. So our previous example updates from:

<div class="slurve" data-slurve="0,-25 0,0 0,25 0,0" data-slurve-classes="slurve-style-1">
    Your HTML here.
</div>

to

<div class="slurve" data-slurve="0,-25,30 0,0 0,25,30 0,0" data-slurve-classes="slurve-style-1">
    Your HTML here.
</div>

This third value (if present) is read by slurve.js and used to ensure the corner is curved instead of sharp. I plan to make a GUI tool (Slurve Generator) that makes it simpler and faster to both experiment with creating Slurve variations, but also to generate the code for you. The more requests I get for this, the more likely it will get bumped up the priority list.

Slurve Generator

Coming Soon...

Feature and Improvement Ideas

• SVG Filters
• Stroke Support
• Percentage-based Options
• Resize Throttle
• Improved Curve/Circle Support for Greater Variety
• jQuery Plugin + Package Module Support

If you have feature requests or questions, just reach out on Twitter @derekknox or email me derek [at] derekknox.com.