flexcss

FlexCss
===

!Dependencies

**A lightweight Flexbox based mobile-first CSS/Javascript pattern-library created by David Heidrich,
build for hellofellow.com.**

- Real-World-Example
- Demo-Page

Installation

Feel free to use my patterns in your project

npm install flexcss --save-dev

Overview

Includes different ready-to-use Javascript Components and Widgets that are heavily optimized to be used in a responsive environment.

- A Form Validation framework for HTML5
- supports custom validation
- Complex Modals
- Image LightBox (based on Modal)
- Tooltip
- Dropdown
- Off-Canvas Navigation
- Tabs

All Javascript Components haven been created without external dependencies (almost).

$3

- Object.assign (MDN,
Polyfill)
- Promise (Polyfill)
- fetch (link)

$3

- master contains the latest es6 rewrite
- hellofellow version that runs on hellofellow, will be abandoned in the future (and replaced with master).
- No pull-requests are accepted here

Browser/Device Support

Due the use of Flexbox and other HTML5 features we are limited to IE 10+.

| Browser | Version |
| -------- | ------- |
| Safari | 7.1+ |
| Google Chrome | 30+ |
| Internet Explorer | 10+|
| Firefox | 30+|

I tested FlexCss on different Android and iOS Devices.

Sass/css

The patterns included may be used for prototyping and to get an idea what is possible with flexbox.
It's not supposed to be a generic production-ready framework yet (but might become in the future).

$3

FlexCss includes a custom font set of fontello (http://fontello.com/),
you can disable including this by overwriting $includeFontello and set it to false

Either way, there is also a mixin called icon which you can use to setup a font.

Development

Requires node to be installed.
run npm install, and gulp to start compiling sources, recompilation is triggered automatically on file change

$3

jekyll is used to create the pages for this project, run bundle install
for setup and then bundle exec jekyll serve to start the local server to read documentation.

$3

There is no 100% coverage yet, but I'm working on it :D.

run npm test to run all specs, run npm test --watch to start TDD mode.

TODO

The Project is in a really early stage and a lot of things have to be improved.
Although running in production, it's not 100% ready for a public release. Use at your own risk!

- [ ] API Documentation, more examples
- [ ] Code Cleanup
- [ ] get near to 100% Coverage by specs
- [ ] improve tooling and gulp setup

License

The MIT License (MIT)

Copyright (c) 2015 David Heidrich, hellofellow KG

Any contribution is welcome, just issue a pull-request or bug/feature if you found something :)

hellofellow and the hellofellow logo Copyright © 2013 – 2015 hellofellow KG