https://github.com/modularcode/flexyboard
Super-flexible admin dashboard layout skeleton with Multisidebar, Fixed or scrollable Sidebar/Footer/Header, RTL, support
https://github.com/modularcode/flexyboard
Last synced: 7 months ago
JSON representation
Super-flexible admin dashboard layout skeleton with Multisidebar, Fixed or scrollable Sidebar/Footer/Header, RTL, support
- Host: GitHub
- URL: https://github.com/modularcode/flexyboard
- Owner: modularcode
- License: mit
- Created: 2017-03-09T13:21:20.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-03-11T02:54:37.000Z (almost 9 years ago)
- Last Synced: 2024-05-22T09:05:18.576Z (over 1 year ago)
- Language: CSS
- Homepage: http://modularcode.io/flexyboard/demo
- Size: 39.1 KB
- Stars: 4
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# flexyboard (in development)
> Super-flexible admin dashboard skeleton layout with Multisidebar, Fixed or scrollable Sidebar/Footer/Header, RTL, support
This project is under heavy debelopment, please don't use it in production.
Creating a highly customizable layout is really tricky.
We're creating this project as a base for creating configurable dashboard layouts.
## Technical requirements
- Left Sidebar
- Right Sidebar (optional)
- Header
- Footer
- Content
- RTL switch places of horizontal items, makes taxt-align to the right side
- Sidebars, Header, Footer can be fixed or scrollable
- Sidebars can be collabsed or exposed
- Sidebars might be hidden at certain screen widths
- Content can be fixed (e.g. bootstrap .container) or fluid
- Scrollable (non-fixed) sidebars can be sticked to content
## Install
```
npm i --save flexyboard
```
## Setup
### Default Layout
```
{your header content}
{your sidebar content}
{yout page content}
```
## Customization
### CSS customization
If you're using the css version of flexyboard, to customize elements dimensions (header/footeer heights, sidebars' widths ) You need to overwrite css styles.
```
.flexyboard.f-header {
height: [header_height_value];
}
.flexyboard {
padding-top: [header_height_value];
}
.flexyboard.f-footer {
height: [footer_height_value];
}
.flexyboard {
padding-bottom: [footer_height_value];
}
```
### SASS customization
## ToDo
### Near-term
- Implement the lib
- Publish on NPM
- Default demo
### Mid-term
- Cover with tests
- Add UMD/CommonJS/ES modules support
- Add React component
- Add Angular2 component
### Long-term
- Demo pages with different UI frameworks
- Demo bootstrap
- Demo material
- Demo semantic-ui
- Demo zurb
- Demo facebook