-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
118 lines (100 loc) · 6.83 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Plumes - Flying-fast Metro UI future vision components!</title>
<meta name="author" content="CodeCorico">
<meta name="Description" content="Plumes brings a bouquet of frontend components based on Metro UI future vision from Microsoft.">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="./assets/normalize.css">
<link rel="stylesheet" href="./assets/skeleton.css">
<link rel="stylesheet" href="./assets/website.css">
<meta itemprop="name" content="Plumes - Flying-fast Metro UI future vision components!">
<meta itemprop="description" content="Plumes brings a bouquet of frontend components based on Metro UI future vision from Microsoft.">
<meta itemprop="image" content="http://plumes.codecorico.com/preview.jpg">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@codecoricoteam">
<meta name="twitter:title" content="Plumes - Flying-fast Metro UI future vision components!">
<meta name="twitter:description" content="Plumes brings a bouquet of frontend components based on Metro UI future vision from Microsoft.">
<meta name="twitter:creator" content="@codecoricoteam">
<meta name="twitter:image:src" content="http://plumes.codecorico.com/preview.jpg">
<meta property="og:title" content="Plumes - Flying-fast Metro UI future vision components!" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://plumes.codecorico.com" />
<meta property="og:image" content="http://plumes.codecorico.com/preview.jpg" />
<meta property="og:description" content="Plumes brings a bouquet of frontend components based on Metro UI future vision from Microsoft." />
</head>
<body>
<div class="container">
<section class="header">
<h1 class="title"><img src="./assets/logo.png" alt="Plumes" title="Plumes" /></h1>
<h2>Flying-fast Metro UI future vision components!</h2>
<a class="button button-primary" href="https://github.com/CodeCorico/plumes/archive/0.6.1.zip" target="_blank">Download (0.6.1)</a>
<a class="button" href="https://github.com/CodeCorico/plumes" target="_blank">GitHub project</a>
<div class="sharing">
<div class="g-plus" data-action="share" data-href="http://plumes.codecorico.com" data-width="200" data-height="24"></div>
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://plumes.codecorico.com" data-text="Plumes is a Flying-fast Metro UI future vision components!" data-size="large" data-related="codecoricoteam" data-hashtags="plumes">Tweet</a>
<iframe src="//www.facebook.com/plugins/share_button.php?href=http%3A%2F%2Fplumes.codecorico.com&layout=button_count&appId=153164814788634" scrolling="no" frameborder="0" style="height: 24px; width: 120px; border:none; overflow:hidden;" allowTransparency="true"></iframe>
</div>
</section>
<nav class="navbar" id="navbar">
<div class="container">
<ul class="navbar-list">
<li class="navbar-item"><a class="navbar-link" href="#intro">Intro</a></li>
<li class="navbar-item"><a class="navbar-link" href="#more">More</a></li>
</ul>
</div>
</nav>
<div class="docs-section" id="intro">
<h6 class="docs-header">Intro</h6>
<div class="row">
<div class="four columns">
<h2>Why?</h2>
<p>
From years now, Microsoft has released their design pattern called Metro (then renamed in Modern UI, then Window 8 style, but we prefer Metro). They published <a href="https://www.youtube.com/playlist?list=PLoI9elhpjaY8HaHrGshZmaadMehh0Ib3H">many videos from their future vision</a> but no one of their apps is tailored as they wished.
That's why Plumes brings a bouquet of frontend components (HTML/CSS/JS) based on Metro UI future vision.
</p>
</div>
<div class="four columns">
<h2>Devices</h2>
<p>
Plumes is specially designed as very simple frontend engine for creating desktop and mobile webapps (with Cordova, PhoneGap, etc.). For now components are based on Ractive.js and Ractive-Require. The goal is to load these components on demand without load the entire page at start. Ractive is light so we have no complex mechanism to work on a maximum devices.
</p>
</div>
<div class="four columns">
<h2>KISS</h2>
<p>
Each component is very lightweight and contains few features. It creates small and fast animations that does not need superfluous. Simplicity is a key goal in design and unnecessary complexity needs to be avoided. This helps maintain the code quickly and by everyone.
</p>
</div>
</div>
<iframe width="560" height="315" style="display: block; margin: 0 auto;" src="https://www.youtube.com/embed/w-tFdreZB94?list=PLoI9elhpjaY8HaHrGshZmaadMehh0Ib3H" frameborder="0" allowfullscreen></iframe>
</div>
<div class="docs-section" id="more">
<h6 class="docs-header">More</h6>
<div class="row">
<div class="two columns">
<img src="./assets/CodeCorico.png" alt="CodeCorico" />
</div>
<div class="ten columns">
<p>The project is maintened by an enthusiast community. They work together on enhancing the engine by making new features, fixes and more on GitHub.</p>
<ul>
<li><a href="https://github.com/CodeCorico/plumes/blob/master/CONTRIBUTING.md" target="_blank">Join the contribution team and be part of the CodeCorico Community!</a></li>
<li><a href="https://gitter.im/CodeCorico/Plumes?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge"><img src="https://camo.githubusercontent.com/da2edb525cde1455a622c58c0effc3a90b9a181c/68747470733a2f2f6261646765732e6769747465722e696d2f4a6f696e253230436861742e737667" alt="Discussion chat" data-canonical-src="https://badges.gitter.im/Join%20Chat.svg" style="max-width:100%;"></a></li>
<li><a href="https://twitter.com/CodeCoricoTeam" target="_blank">Follow the CodeCorico team on Twitter</a></li>
</ul>
</div>
</div>
</div>
</div>
<script type="text/javascript">
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
</script>
<script src="https://apis.google.com/js/platform.js" async defer>
{lang: 'fr'}
</script>
</body>
</html>