1.0.26 • Published 8 months ago
@morphosium/xcelsior v1.0.26
Attention: This project will not be maintained anymore and i have no relationship with that organisation. You can follow me on Linkedin, Github (huseyincangunduz) or instagram (hcangunduz.dev) for fore open source libraries and etc.
xcelsior (alpha)
Xcelsior helps creating user interfaces containers and it makes developing views with sidebar easier.
Demonstration
How to use?
Install xcelsior by downloading files or using package manager:
npm i @morphosium/xcelsior
or
yarn add @morphosium/xcelsior
Import CSS and JS files (if you want make sidebars mobile safe)
<head> <link rel="stylesheet" href="../build/css/index.css"> </head> <body> <!-- UI Elements --> <script src="../build/js/bundle/xcelsior.js"></script> <!-- another scripts --> </body>
If you consider use at a module, import necessary modules by:
import { MobileSidebarUtil } from "@morphosium/xcelsior";
And import styles by (if you using webpack or something)
@import "~@morphosium/xcelsior/index.css";
All element definitions must be at
<xcelsior-root> </xcelsior-root>
Grids
<xcelsior-root> <xcelsior-grid-view class="main-sidebar mobile-view-safe"> <div class="sidebar" style="width: 300px;" section-name="right"> <h1>Right</h1> </div> <div class="content"> <h1>content</h1> </div> <div class="sidebar" style="width: 300px;" section-name="left"> <h1>Left</h1> </div> </xcelsior-grid-view> </xcelsior-root>
Mobile safe grid view, scrollable elements and utils
- Take a look at advanced example
If you encounter a issue, please don't be shy to contact or open issue ticket
Contact
Hüseyin Can Gündüz
github: @huseyincangunduz
instagram: @hussainlobo
twitter: @hcangunduz
email: hcangunduz@gmail.com
Repo issues tab