Playground
- Playground
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.
Action Button: or
Loading state
Block
Buttons that spread over whole container.
Small and mini
Alternative colors
Outlined
<!-- 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
.
New Topic
Post something usefull here...
- Point 1
- Point 2
- ...
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.
Tabs and Navigation
Tabs allow content to be separated under different topics.
An Asnc Tab
Whats happening here with my friends?
About myself
Small Tabs
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
No content available.
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.
Dropdowns can be loaded async.
<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.