From 15ed3615cb3037769ee9cb08bfd1606b26062750 Mon Sep 17 00:00:00 2001 From: Tomasz O Date: Wed, 14 Aug 2019 23:41:32 +0200 Subject: [PATCH] Create README.md --- README.md | 235 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 235 insertions(+) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..40b790e --- /dev/null +++ b/README.md @@ -0,0 +1,235 @@ +# Airframe + +High Quality **Dashboard / Admin / Analytics template** that works great on any smartphone, tablet or desktop. Available as **Open Source as MIT license.** + +- [View Demo](http://dashboards.webkom.co/jquery/airframe) +- [React Version](http://dashboards.webkom.co/react/airframe/) +- [Next Version](http://airframe.nextjs.webkom.co) - _Documentation in preparation_ +- [Angular Version](http://dashboards.webkom.co/angular/airframe) - _Documentation in preparation_ +- [Vue Version](http://dashboards.webkom.co/vue/airframe) - _Documentation in preparation_ +- [MVC.Net Version](http://dashboards.webkom.co/net-mvc/airframe) - _Documentation in preparation_ +- *Sketch Files (Soon)* + +![aiframe-2019-light-primary-ExchangeTrading2x-bfc026c1-0477-45c8-ba55-f6dd43141e4c](https://user-images.githubusercontent.com/2330394/63056029-77e91e80-bee7-11e9-92b8-6178fa2691d3.png) + +# Introduction + +**Airframe Dashboard** with a minimalist design and innovative Light UI will let you build an amazing and powerful application with great UI. Perfectly designed for large scale applications, with detailed step by step documentation. + +This **Airframe version** is a standard HTML template using **jQuery** and **Bootstrap 4**. Most of the layouting and components you are able to find in the [Official Bootstrap Documentation](http://getbootstrap.com). + +# Features + +**Airframe Dashboard** has a huge collection of components that can be used in a great number of combinations and variations. It can be used in all types of custom web applications such as **CRMs**, **CMSs**, **Admin Panels**, **Admin Dashboards**, **Analytics**, etc. + +- **10+ Layout Variations** - a multitude of possibilities to rearrange the layout, allows to customize the look of your application just as you imagined. +- **Applications** - applications ready, allows you to save time and focus on project development. +- **UI Components** - we offer you a large number of UI components; fully ready for changes that will customize them for your needs. +- **Responsive Design** - fully adapted to your application, exactly well presented on the desktop, a tablet or smartphone. +- **120+ Unique Pages** designed to make use of them directly in your application. +- **2 Starters** so that you can immediately work with the components that are necessary for your application. + +# Author + +**Tomasz Owczarczyk:** + +- Github: [https://github.com/0wczar](https://github.com/0wczar) +- Dribbble: [https://dribbble.com/tomaszo](https://dribbble.com/tomaszo) +- Linkedin: [https://www.linkedin.com/in/tomaszowczarczyk/](https://www.linkedin.com/in/tomaszowczarczyk/) +- Twitter: [https://twitter.com/towcza](https://twitter.com/towcza) + +# Installation + +## Additional Components +This Dashboard has some additional classes and JS components to achieve the final effect. + +### Layout +This component will keep the whole layout in place it should look like this. +```html +
+
+ +
+
+
+ +
+
+ +
+ + + +
+ + +
+ +
+ + +
+ +
+ +
+ + +
+ +
+
+
+``` + +**Notable classes** +* `sidebar--animations--enabled` - will make the sidebar animated in most of the interactions +* `sidebar--slim` - will allow the sidebar to be slim when collapsed on desktop +* `sidebar--collapse` - will hide the sidebar, or make it slim if defined so +* `sidebar__mobile-fluid` - all of the contents of that element will be scrollable on mobile sidebar +* `sidebar__section` - building block of the sidebar +* `sidebar__section--fluid` - section which will fill all available height of the sidebar +* `sidebar__section--cover` - removes the section padding +* `sidebar__hide-slim` - __(helper)__ hides an element when the sidebar goes into slim mode +* `sidebar__show-slim` - __(helper)__ shows an element when the sidebar goes into slim mode + +### Sidebar Menu +Provides navigation for the sidebar. Allows for multilevel nesting, may be in a slim form with dropdowns. Has to be placed in a fluid, covered section. Example Sidebar Menu: +```html + +``` +* `sidebar-menu` - parent of the menu +* `sidebar-menu--slim` - should be present when the sidebar is in slim collapsed mode +* `sidebar-menu__entry` - contains the 0 level link +* `sidebar-menu__entry--nested` - contains the 0 level nested links +* `sidebar-menu__entry--no-caret` - removes the caret which is added by nested entries +* `sidebar-menu__link` - level 0 link +* `sidebar-menu__entry__icon` - icon representing a particular entry +* `sidebar-submenu` - contains the nested entries +* `sidebar-submenu__entry` - contains the nth level link +* `sidebar-submenu__entry--nested` - contains the nth level nested links +* `sidebar-submenu__entry__link` - nth level link + +### Navbars +Navbars are essentially Bootstraps navbars, but there are some additional classes which extend their behavior. +* `navbar-themed` - will receive the theme colors from the layout theme class +* `navbar-shadow` - will add a shadow at the bottom of the navbar +* `navbar-multi-collapse` - allows to make the navbar collapse, not collapse all of the items, the underling `container` should also have `navbar-collapse-wrap` class + +### Additional Helpers +* `sidebar__brand` - will add a theme color to a brand text +* `sidebar__link` - should be used on additional links in sidebar, will add proper themed colors +* `sidebar__link--muted` - muted modifier for the sidebar link +* `text-theme` - will set the text color to the current theme +* `bg-theme` - will set the background color to the current theme + +## JavaScript +You can add predefined script which will handle all of the sidebar behaviour: sidebar menu, sidebar collapsing, animations etc. + +```html + + + + + + + +
+ + + + +
+ + + + + +``` + +# Credits +Used plugins in this dashboard: + +* [Bootstrap 4.x](http://getbootstrap.com) - Bootstrap is the most popular HTML, CSS, and JS framework +* [Peity 3.3.x](http://benpickles.github.io/peity/) - progressive pie, donut, bar and line charts +* [Font Awesome 4.7.x](http://fontawesome.io/) - Font Awesome, the iconic font and CSS framework. +* [Holder 2.x.x](http://holderjs.com) - client side image placeholders +* [Highcharts 7.x.x](http://www.highcharts.com/demo) - Interactive JavaScript charts for your web pages. +* [AG Grid 7.x.x](https://github.com/ag-grid/ag-grid) - Advanced Data Grid / Data Table supporting Javascript / React / AngularJS / Web Components