Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bowlingx/flexcss
A simple css pattern-library using flexbox, build for hellofellow
https://github.com/bowlingx/flexcss
css flexbox form-validation
Last synced: 2 months ago
JSON representation
A simple css pattern-library using flexbox, build for hellofellow
- Host: GitHub
- URL: https://github.com/bowlingx/flexcss
- Owner: BowlingX
- License: mit
- Created: 2014-11-26T21:50:46.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2019-02-11T00:13:54.000Z (about 6 years ago)
- Last Synced: 2024-12-15T17:53:22.367Z (2 months ago)
- Topics: css, flexbox, form-validation
- Language: JavaScript
- Homepage:
- Size: 25.5 MB
- Stars: 84
- Watchers: 9
- Forks: 12
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
FlexCss
===
[](https://circleci.com/gh/BowlingX/flexcss)
[](https://www.codacy.com/app/billing/flexcss)
[](https://coveralls.io/r/BowlingX/flexcss?branch=master)
[](https://www.npmjs.com/package/flexcss)
[](https://github.com/semantic-release/semantic-release)
**A lightweight Flexbox based mobile-first CSS/Javascript pattern-library created by [David Heidrich](https://github.com/BowlingX),
build for [hellofellow.com](https://hellofellow.com).**
- [Real-World-Example](https://hellofellow.com)
- [Demo-Page](http://bowlingx.github.io/flexcss)
## 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).
### Polyfills / Dependencies used
- `Object.assign` ([MDN](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Object/assign),
[Polyfill](https://www.npmjs.com/package/object-assign))
- `Promise` ([Polyfill](https://github.com/jakearchibald/es6-promise))
- `fetch` ([link](https://github.com/github/fetch))
### Branch Information
- `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).
### Fonts
`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
### jekyll
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.
### Tests
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