Playground

• Playground
  • Text
    • Badges
    • Breadcrumbs
    • Pagination
  • Simple Content-Slider
  • Buttons
    • Loading state
    • Block
    • Small and mini
    • Alternative colors
    • Outlined
  • Forms
    • Example form with HTML5 validation
    • Complex form Examples
      • Multiple fields in one row
    • A wide form
    • Uneditable and disabled inputs
    • Checkboxes and Radios
  • Modals
    • Alerts
    • Minimal Markup Example
    • Async
  • Tabs and Navigation
    • Small Tabs
  • Sub-Navigation
  • Dropdowns
  • Tooltips

Fork me @bowlingx v0.7.0

This is FlexCss, a full-featured pattern library built for hellofellow.com with

• low-footprint Javascript components (just ~67kb minified and ~20kB compressed) that rock
• build with ES6 and sass
• modular
• zero-dependencies

I created FlexCss from scratch because the current web-frameworks available lack my use case of being lightweight and still solve real-world problems™.

Feel free to drop me some comments.

Text

Some very basic Headlines

h1. heading

h2. heading

h3. heading

h4. heading

h5. heading

h6. heading

This is an example copy text with a link (hover over it to show a tooltip) and some bold text in it.

We may fade-out text that is less important. A link to something would also be different.

<p class="fade-out">A less important text</p>

Badges

Badges add meta-information to elements. Checkout this simple Badge or just this number 10.

They work nicely in Navigation bars or even lists:

• A list with Badge 5 20
• Another Item

<span class="badge">5</span>

Breadcrumbs

Breadcrumbs show a specific path of the current page, they will be truncated to the first and last item on small screens.

<ul class="breadcrumb">
    <li><a href="#">Root</a></li>
    <li><a href="#">Child 1</a></li>
</ul>

Pagination

Different types of pagination, on small screens only arrows (next and prev) are visible.

<ul class="paginator">
    <li class="arrow item">
        <a><i class="icon-left-open"></i></a>
    </li>
    <li class="current item">
        <a href="#">2</a>
    </li>
    <li class="item">
        <a href="#">3</a>
    </li>
    <li class="arrow item">
        <a><i class="icon-right-open"></i></a>
    </li>
</ul>

Simple Content-Slider

A Simple responsive slider in pure CSS with FlexCss.LightBox enabled on image-targets.

Photos © Lies Thru a Lens 1, 2, 3, 4 – License

<div class="slide-container">
    <input id="activate-slide-1" type="radio" name="slider" checked="checked">
    <input type="radio" id="activate-slide-2" name="slider">
    <!-- [..] -->
    <ul class="slider">
        <li class="slide">
            <a data-thumb>
                <img alt="thumbnail" src="//img.com/img-1.jpg"/>
            </a>
        </li>
        <li class="slide">
            <a data-thumb>
                <img alt="thumbnail" src="//img.com/img-2.jpg"/>
            </a>
        </li>
        <!-- [..] -->
    </ul>
    <ul class="slide-navigation">
        <li>
            <label class="icon-circle" for="activate-slide-1"></label>
        </li>
        <li>
            <label class="icon-circle" for="activate-slide-2"></label>
        </li>
        <!-- [..] -->
    </ul>
</div>

Buttons

Different Buttons and sizes. The following also have tooltips.

A Primary Button Action Button: or disabled

Loading state

preparing… alternative loading

Block

Buttons that spread over whole container.

block Button
a block button with icon

Small and mini

small mini

Alternative colors

secondary danger alternative

Outlined

primary secondary danger alternative

<!-- Buttons may have different sizes (normal and small) -->
<button class="button"></button>
<button class="button small"></button>

<!-- Buttons may have different states -->
<button class="button loading"></button>

<!-- Buttons may have different functions/colors -->
<button class="button danger"></button>
<button class="button secondary"></button>
<button class="button alternative outline"></button>

Forms

Forms are fully responsive and include styles for common HTML widgets (input, select, checkbox). They behave to an internal grid without extra markup that is 3 columns on wide-screen and falls back to 1 column on small devices. I tried to follow best practices to make it as easy as possible for Users AND Developers to use/create a form.

All Examples have validation enabled with FlexCss.Form.

Example form with HTML5 validation

A simple Login-Form…

<form>
    <fieldset>
        <legend>Please login</legend>
        <div class="control-group">
            <label for="login">Username / E-Mail-Address</label>

            <div class="controls">
                <input required
                       placeholder="Provide your E-Mail-Adress or Username"
                       type="email" id="login"/>
            </div>
        </div>
        <div class="control-group">
            <label for="password">Password</label>

            <div class="controls">
                <input required type="password" id="password"/>
            </div>
        </div>
        <div class="control-group">
            <label class="checkbox no-label">
                <input type="checkbox" value="true" checked>
                <span class="checkbox-container">keep me logged in</span>
            </label>
        </div>

        <div class="form-actions">
            <button class="button small indent-label" type="submit">Login</button>
        </div>
    </fieldset>
</form>

Complex form Examples

Forms can be quite complex, FlexCss has multiple options to display widgets.

Multiple fields in one row

Use multi-form to group inputs / widgets in one row, no-label on constrols can be used if no label is present.

<div class="control-group">
    <div class="controls no-label">
        <div class="multi-form">
            <input type="text"/>
            <input type="text"/>
            <!-- [...] -->
        </div>
    </div>
</div>

A wide form

wide forms will stay in widescreen mode and the label is always on top

Uneditable and disabled inputs

To let simple elements look like an input field, add .input

<span class="input">Value</span>

<span class="input uneditable-input">Uneditable</span>

<div class="select-element disabled">
   <select disabled></select>
</div>

Checkboxes and Radios

To render a checkbox or radio we use a wrapper element, the class is always checkbox.

<div class="controls multi-select-field">
    <label class="checkbox">
        <input required type="radio" name="radio" value="S"/>
        <span class="checkbox-container">Scala</span>
    </label>
</div>

Modals

A Default Modal with a .wide form inside. Besides this, if you add .center to a modal it will be truly centered on Desktop size.

Modals are stackable (try attach-image) and may also replace an existing one (try ? next to new topic).
All Modals will be appended to a dedicated Container Element .modal-container.

Alerts

If you add .alert to a modal, it becomes a handy alert box with a fixed width. On smaller screens there will be a transition from the bottom.

Minimal Markup Example

<button data-modal="a-modal">open a modal</button>
<div id="a-modal" class="modal">
    <i data-close-modal class="modal-close icon-cancel-1"></i>
    <p>Modal-Content</p>
</div>

Async

Modals may be loaded async.

open an async modal

Tabs and Navigation

Tabs allow content to be separated under different topics.

Small Tabs

• a tab
• a second tab

Sub-Navigation

Dropdowns

Dropdowns in generals try always to fit in the current viewport and behave totally different on small devices.

Shrink down your browser to see what happens.

a simple dropdown

Dropdowns can be loaded async.

An async dropdown

<button data-dropdown="dropdown-test" class="button small">A dropdown</button>
<div id="dropdown-test" class="dropdown">
    <ul>
        <li><a data-close-dropdown href="#">A Dropdown item</a></li>
    </ul>
</div>

Tooltips

Tooltips are still a valid argument on Devices with mouse input.

FlexCss.Tooltip will work on all elements with data-tooltip and a title attribute.

Tooltips automatically adjust to the viewport.