|
1 |
| -Flat UI Free 2.1.1 |
2 |
| -======= |
| 1 | +# harp-flat-ui |
3 | 2 |
|
4 |
| -Flat UI Free is licensed under a Creative Commons Attribution 3.0 Unported (CC BY 3.0) (http://creativecommons.org/licenses/by/3.0/) and MIT License - http://opensource.org/licenses/mit-license.html. |
| 3 | +> A comfortable, responsive, and functional framework built upon LESS and Bootstrap. |
5 | 4 |
|
6 |
| -You are allowed to use these elements anywhere you want, however we’ll highly appreciate if you will link to our website when you share them - http://designmodo.com |
| 5 | +## Dependencies |
7 | 6 |
|
8 |
| -Thanks for supporting our website and enjoy! |
| 7 | +* [NodeJS](http://nodejs.org/) – _Server-side JavaScript runtime_ |
| 8 | +* [Harp](http://harpjs.com/) – _The static web server with built-in preprocessing_ |
9 | 9 |
|
10 |
| -## Links: |
| 10 | +## Install |
11 | 11 |
|
12 |
| -+ [Demo page](http://designmodo.github.com/Flat-UI/) |
13 |
| -+ [Official page](http://designmodo.com/flat-free) |
14 |
| -+ [Premium Version of Flat UI](http://designmodo.com/flat/) |
| 12 | +To install Flat UI, run the following command from the root of your Harp project: |
15 | 13 |
|
16 |
| -## Changelog |
| 14 | +```bash |
| 15 | +harp install flat-ui |
| 16 | +``` |
17 | 17 |
|
18 |
| -+ 1.0 Fixed several small IE bugs |
19 |
| -+ 1.1 New icons, Login screen implemented to a real HTML one. Small bug fixes and refinements. |
20 |
| -+ 2.0 Compatibility with Flat UI Pro (Less instead of Sass), Bootstrap upgraded to 2.3.1, grids refinements, various Less compiler bugfixes, Video module bugfix, various small bugfixes. |
21 |
| -+ 2.1 Bootstrap upgraded to 3.0, better box model, update html5 video player to version 4.1, added components documentation and sturt-up template, various small bugfixes. |
22 |
| -+ 2.1.1 Typography improved (new global variables, padding and margins changed for basic elements, global default font-size now is 18px, with a line-height of 1.722, added support for <abbr>, <address>, <code>, <pre>, right-aligned <blockquote>), Buttons module completely rewritten (new global variables, buttons now require a .btn-default for the standard version, added support for .btn-link), fixed some bugs in .navbar, mixins updated (added standard mixins from Bootstrap 3), layout updated for stylized select and dropdown menu, various small bugfixes. |
| 18 | +Your project will look something like this… |
23 | 19 |
|
24 |
| -## Authors |
| 20 | +``` |
| 21 | +myproject/ <-- your project root (or public dir if in framework-mode) |
| 22 | + |- components/ <-- harp puts components here |
| 23 | + | +- harp-flat-ui/ <-- where this lib gets installed |
| 24 | + | … |
| 25 | + |- main.less <-- where you reference Bootstrap |
| 26 | + +- index.jade <-- where you reference main.css |
| 27 | +``` |
25 | 28 |
|
26 |
| -**Sergey Shmidt** |
| 29 | +## Link |
27 | 30 |
|
28 |
| -+ [http://shmidt.in](http://shmidt.in) |
29 |
| -+ [http://twitter.com/monstercritic](http://twitter.com/monstercritic) |
| 31 | +Now, from within a `.less` file in your project, you can `@import` Bootstrap and Flat UI: |
30 | 32 |
|
31 |
| -**Sergii Iurevych** |
| 33 | +```less |
| 34 | +@import "components/harp-bootstrap/less/_bootstrap.less"; |
| 35 | +@import "components/harp-bootstrap/less/_flat-ui.less"; |
| 36 | +``` |
32 | 37 |
|
33 |
| -+ [http://twitter.com/iurevych](http://twitter.com/iurevych) |
34 |
| -+ [http://github.com/iurevych](http://github.com/iurevych) |
| 38 | +Or, just a portion of Bootstrap: |
35 | 39 |
|
36 |
| -## Typeface |
37 |
| -Flat UI Free is made using the Lato typeface, which can be downloaded for free here: http://www.google.com/webfonts/specimen/Lato |
| 40 | +```less |
| 41 | +@import "components/harp-bootstrap/less/_variables.less"; |
| 42 | +@import "components/harp-bootstrap/less/_mixins.less"; |
| 43 | +@import "components/harp-bootstrap/less/_grid.less"; |
| 44 | +``` |
38 | 45 |
|
39 |
| -##Useful Links (How To) |
| 46 | +## Resources |
40 | 47 |
|
41 |
| -How to Use UI Kits, Beginners Video Tips: [http://designmodo.com/how-to-use/](http://designmodo.com/how-to-use/) |
| 48 | +* [Harp documentation](http://harpjs.com/docs) |
| 49 | +* [LESS documentation](http://lesscss.org) |
| 50 | +* [Bootstrap documentation](http://getbootstrap.com) |
| 51 | +* [Flat UI demo](http://designmodo.github.com/Flat-UI/) |
42 | 52 |
|
| 53 | +## License |
43 | 54 |
|
44 |
| -UI Kit Benefits: [http://designmodo.com/benefits/](http://designmodo.com/benefits/) |
45 |
| - |
46 |
| - |
47 |
| -Create a Website using UI Packs (PSD to HTML) – Day 1: [http://designmodo.com/create-website-day-1](http://designmodo.com/create-website-day-1) |
48 |
| - |
49 |
| -Create a Website using UI Packs (PSD to HTML) – Day 2: [http://designmodo.com/create-website-day-2](http://designmodo.com/create-website-day-2) |
50 |
| - |
51 |
| -Create a Website using UI Packs (PSD to HTML) – Day 3: [http://designmodo.com/create-website-day-3](http://designmodo.com/create-website-day-3) |
52 |
| - |
53 |
| -Create a Website Design using The Bricks UI: [http://designmodo.com/website-design-bricks-ui/](http://designmodo.com/website-design-bricks-ui/) |
54 |
| - |
55 |
| -What is UI Kit and Why You Should Use it: [http://designmodo.com/ui-kit-use](http://designmodo.com/ui-kit-use) |
56 |
| - |
57 |
| -How Companies can Save Time and Money Using UI Kits: [http://designmodo.com/save-time-money-using-ui-kits](http://designmodo.com/save-time-money-using-ui-kits) |
58 |
| - |
59 |
| -UI Kits for Developers – Prototyping and Homemade Design: [http://designmodo.com/ui-kits-developers](http://designmodo.com/ui-kits-developers) |
60 |
| - |
61 |
| - |
62 |
| -Our Shop: |
63 |
| - |
64 |
| -[http://designmodo.com/shop/](http://designmodo.com/shop/) |
65 |
| - |
66 |
| - |
67 |
| -Tutorials: |
68 |
| - |
69 |
| -[http://designmodo.com/tutorials/](http://designmodo.com/tutorials/) |
70 |
| - |
71 |
| - |
72 |
| -Freebies: |
73 |
| - |
74 |
| -[http://designmodo.com/freebies/](http://designmodo.com/freebies/) |
75 |
| - |
76 |
| - |
77 |
| -Affiliate Program (earn money): |
78 |
| - |
79 |
| -[http://designmodo.com/affiliates/](http://designmodo.com/affiliates/) |
80 |
| - |
81 |
| - |
82 |
| -Social Media: |
83 |
| - |
84 |
| -Twitter: [http://www.twitter.com/designmodo](http://www.twitter.com/designmodo) |
85 |
| - |
86 |
| -Facebook: [http://www.facebook.com/designmodo](http://www.facebook.com/designmodo) |
87 |
| - |
88 |
| -RSS: [http://feeds.feedburner.com/designmodo](http://feeds.feedburner.com/designmodo) |
89 |
| - |
90 |
| -Google+: [https://www.google.com/+DesignModo](https://www.google.com/+DesignModo) |
| 55 | +This component is [Flat UI](https://github.com/designmodo/Flat-UI), which is MIT and Creative Commons Attribution 3.0 Unported licensed. |
0 commit comments