The last time Hackerfall tried to access this page, it returned a not found error. A cached version of the page is below, or click here to continue anyway

StringBean - The 4K Featherweight Framework!

In order to give the best possible experience this website uses cookies. You can find out which cookies are in use,here.



The featherweight responsive CSS Framework based on a 24-point system, rather than the traditional 12-point system that other frameworks use. Sometimes, 12 is just too few, especially on a high resolution screen, such as 4K - at 4K String Bean comes into its own! This gives the developer the power to divide the screen up in more finite segments providing you with greater control over the widths of content on your site, especially at higher resolutions (think HD & UHD (2K, 3K, 4K, and above).

StringBean also has 6 breakpoints, instead of the traditional 4, so you can implement your design with: xsmall-*, small-*, medium-*, large-*, mega-hd-*, and mega-uhd-*.


Headings come in all different sizes and weights - here are the core HTML headings defined in StringBean:

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5
Heading H6

Breakpoint Breakdown

Using breakpoint specific selectors Core Class

You can stack the breakpoint selectors on an element.

class="xsmall-5 small-9 medium-10 large-2"

4 units

4 units

4 units

4 units

4 units

4 units

12 units

12 units

6 units

6 units

6 units

6 units

24 units

4 units

16 units

4 units

Normal resolutions (sub-1080p HD)

<header class="container">
    <nav class="row">
        <div class="column xsmall-24 medium-12 large-16">
        <div class="column xsmall-24 medium-12 large-8">
            <p id="Strapline">
                Powering the internet, gently.

HD and UHD Breakpoints Core Class

Notice the additional classes starting "mega-" - these define the breakpoints for HD (High Definition - 1080p to 2K) and UHD (Ultra-High Definition - 3K, 4K, etc).

<div class="column xsmall-24 medium-8 mega-hd-12 mega-uhd-16">

pull-left & pull-right Core Class

You can float columns or items to the left or right, using the pull-left and pull-right classes.

<div class="column xsmall-10 pull-left">
    Column 1
<div class="column xsmall-10 pull-right">
    Column 3

Layouts Core Class

Layouts give you the power to set a max-width size on the content so that when viewing the site above that breakpoint the site will be fixed width. Viewing the site below that size (on a mobile or tablet etc) will make the site responsive.

<main class="container">
    <article class="row layout-960">
            Hello World!
            Some content goes in here.

Taking full width on all breakpoints Core Class

If you apply this class then it will take 24 points (full width of parent) in all breakpoints.

<div class="full-24">
    Full width content here.

Hiding Content Core Class

You can hide content below certain breakpoints - for instance: hide-below-large will hide the element below the large breakpoint.

Resize the Window: Hello world!

<span class="hide-below-medium">Hello world!</span>

Showing Content Core Class

<span class="show-below-medium">Hello world!</span>

Showing on Breakpoint Only Core Class

You can use the show-only-x set of selectors to show content on certain breakpoints only. The below example will show your element only on xsmall and large screens, and will be hidden for all other breakpoints.

Resize the Window: Hello World!

Navigation Bar (Navbar) Core Class

Basic support for a navigation bar with dropdown submenus - also works in mobile view.

<nav class="column xsmall-16 medium-12 align-right">
            <li><a href="#">New Products</a></li>
            <li><a href="#">Filters <span class="fa fa-angle-down"></span></a>
                    <li><a href="#">Sub Item #1</a></li> 
                    <li><a href="#">Sub Item #2</a></li>
                    <li><a href="#">Sub Item #3</a></li>
            <li><a href="#">W/Machine Parts</a></li>

Buttons Core Class

The button classes provide a beautiful way to display a button to the user.



  • BUTTON #4
  • BUTTON #5

    Buttons with Colour Selectors Core Class

    If you combine the button class with other classes such as "information" (blue colour), "alert" (red), and "success" (green) you can display the right button for the action.




    Light & Dark Buttons Core Class


    Button Sets Core Class

    When you wrap your buttons in a "button set" it draws them closer together, making them a grouped set of CTAs (call to actions) - this is ideal for form completions.

    Info Wheels Core Class

    Info Wheels are round dots that can contain 1, 2, or 3 characters - these can signify a version number, or an alert (such as the amount of unread notifications you have).




    Labels Core Class

    Labels are small blocks that look like miniture buttons - in style - but cannot be clicked or edited through the browser. Labels are a good way to signify versions, or small snippets of information.

    Version 1.1.4

    Version 1.1.4

    Version 1.1.4

    Progress Bars Core Class

    You can visually represent the state of loading AJAX or other assets by using the progress bar classes.

    Tables, Rows, and Cells Core Class

    Using .table, .row, and .cell you can create a responsive spreadsheet-style table for tabulated content. If you use the status classes (alert, infomration, regal, etc) with the first three cells then you can create a header for the table.

    Divisions with Colour Selectors Core Class

    You can also apply colour sleectors to other elements such as divisions...

    There was an error saving your password!


    Forms & Inputs Core Class

    Extending StringBean

    To keep StringBean on-course with the scope (featherweight) we are creating a suite of add-ons that can extend StringBean with animations & effects, without bloating the core codebase.

    Getting started

    Let's look at how we implement sb-ext-animations.css...

    <link rel="stylesheet" href="/src/css/extentions/sb-ext-animations.css">
    <a href="/my-blog/" class="button success extend-with raised">My Blog</a>

    You will notice that after the standard StringBean classes we have used the "extend-with" class, followed by an extended class name - in this case it's "raised".

    raised Extention Class

    <a href="/my-blog/" class="button success extend-with raised">My Blog</a>

    skewx-slight-* Extention Class

    <a href="/my-blog/" class="button extend-with skewx-slight-left">My Blog</a>
    <a href="/my-blog/" class="button extend-with skewx-slight-right">My Blog</a>

    skewx-* Extention Class

    <a href="/my-blog/" class="button extend-with skewx-left">My Blog</a>
    <a href="/my-blog/" class="button extend-with skewx-right">My Blog</a>

    border-* Extention Class

    <a href="/my-blog/" class="button extend-with border-top">My Blog</a>
    <a href="/my-blog/" class="button extend-with border-right">My Blog</a>
    <a href="/my-blog/" class="button extend-with border-bottom">My Blog</a>
    <a href="/my-blog/" class="button extend-with border-left">My Blog</a>

    Get in on the action

    Get in on the action; view, contribute to, or download the project from Github.

    Created by Mark Greenall

    Github project: StringBean

    Continue reading on