-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathindex.html
150 lines (150 loc) · 8.25 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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
---
layout: home
description: Ink is a set of tools for quick development of web interfaces. It offers a fluid and responsive grid, common interface elements, interactive components, a design-first approach with ease of use and simplicity at its core. Start integrating Ink in your projects and remove the hassle of building the basics, staying free to focus on what's important.
site_root: /
tags:
---
<section class="ink">
<div class="ink-grid">
<div class="column-group push-middle">
<div class="xlarge-70 large-70 all-80 align-center push-center">
<p><img src="{{ site.images_path }}ink.png" alt="Ink"></p>
<h1 class="fw-light">Create responsive web interfaces quick and efficiently.</h1>
</div>
</div>
</div>
</section>
<section class="download">
<div class="ink-grid">
<h1 class="fw-light align-center uppercase">Get our code</h1>
<div class="column-group push-middle">
<div class="xlarge-70 large-70 all-80 align-center push-center">
<div class="column-group horizontal-gutters small-vertical-gutters tiny-vertical-gutters">
<div class="all-33 small-100 tiny-100">
<a href="{{site.download_url}}{{site.version}}/ink-{{site.version}}.zip" data-trackerlink="content|maincontainer|downloadzip" onclick="ga('send', 'event', 'link', 'click', 'Download');" class="ink-button download">Download <span>{{site.version}}</span></a>
<p class="half-top-space">This file contains CSS, JavaScript and their minified versions, images, fonts and the cookbook.</p>
</div>
<div class="all-33 small-100 tiny-100">
<a href="{{site.download_src_url}}{{site.version}}.zip" data-trackerlink="content|maincontainer|downloadsourcezip" onclick="ga('send', 'event', 'link', 'click', 'Download with source');" class="ink-button download">Download with source</a>
<p class="half-top-space">This file contains SASS and JavaScript source code, distribution versions and the build tools config files.</p>
</div>
<div class="all-33 small-100 tiny-100">
<a href="{{site.repo_url}}" data-trackerlink="external|maincontainer|gotogithub" class="ink-button repo" onclick="ga('send', 'event', 'link', 'click', 'Moved to Github');">Github</a>
<p class="half-top-space">If you prefer, head on to our github repository, fork the project and help us create an even better Ink.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="what">
<div class="ink-grid">
<h1 class="fw-light uppercase align-center small-align-left tiny-align-left">Lightning fast responsive web development</h1>
<div class="column-group horizontal-gutters push-top">
<div class="xlarge-50 large-50 medium-50 small-100 tiny-100">
<h2 class="fw-light">Responsive from the ground up</h2>
<p>Our grid system is percentage based. Nesting grid elements gives you infinite possibilities. Version 3.0.0 introduces a flex based grid system that gives you unprecedented control over your layouts.</p>
{% highlight html %}
<div class="ink-grid">
<div class="column-group">
<div class="all-50 small-100 tiny-100">...</div>
<div class="all-50 small-100 tiny-100">...</div>
</div>
</div>
{% endhighlight %}
</div>
<div class="xlarge-50 large-50 medium-50 small-100 tiny-100">
<h2 class="fw-light">Easy to code and easy to read</h2>
<p>Our syntax was designed to be clean and readable like a human language, creating legible code that both designers and developers can understand, helping to make your work accessible to anyone on your teams.</p>
{% highlight html %}
<nav class="ink-navigation">
<ul class="horizontal menu">
<li><a href="/home">home</a></li>
<li><a href="/about">about</a></li>
</ul>
</nav>
{% endhighlight %}
</div>
<div class="xlarge-50 large-50 medium-50 small-100 tiny-100">
<h2 class="fw-light">More than HTML and CSS</h2>
<p>We've developed our own JavaScript library based on the latest coding standards and a modular architecture. The <a href="{{ site.url }}javascript/Ink/#Ink_1-Ink_1-requireModules">Ink.requireModules()</a> method ensures all of Ink's power is at your fingertips.</p>
{% highlight js %}
Ink.requireModules(
['Ink.Dom.Css_1'],
function(Css) {
var elm = Ink.s('.ink');
Css.addClassName(elm,'hot');
}
);
{% endhighlight %}
</div>
<div class="xlarge-50 large-50 medium-50 small-100 tiny-100">
<h2 class="fw-light">Customizable</h2>
<p>Ink's CSS is created with <a href="https://sass-lang.com/" target="_blank">SASS</a>. Breakpoints, dimensions, color, font sizes and even class names are defined as variables and are easily reconfigurable. Just <a href="{{ site.url }}ui-elements/">edit a couple of files</a>, recompile and you'll have your unique custom build.</p>
{% highlight scss %}
// scss
$ink-class-prefix: my-;
$navigation-class-name: #{$ink-class-prefix}nav
// css
.my-nav {
...
}
{% endhighlight %}
</div>
</div>
</div>
</section>
<section class="showcase">
<div class="ink-grid">
<h1 class="fw-light align-center uppercase">Made with Ink</h1>
<div class="column-group gutters">
<div class="all-25 medium-50 small-50 tiny-100 align-center">
<p><img src="{{ site.images_path }}meomusic.jpg" alt="Meo Music"></p>
<p class="fw-thin">Meo Music is the largest portuguese music streaming service.</p>
</div>
<div class="all-25 medium-50 small-50 tiny-100 align-center">
<p><a href="https://sobre.sapo.pt/" title="About SAPO"><img src="{{ site.images_path }}sobre.jpg" alt="About SAPO"></a></p>
<p class="fw-thin">Learn about SAPO products, mission and job opportunities.</p>
</div>
<div class="all-25 medium-50 small-50 tiny-100 align-center">
<p><a href="https://lifestyle.sapo.pt/" title="SAPO Lifestyle"><img src="{{ site.images_path }}lifestyle.jpg" alt="SAPO Lifestyle"></a></p>
<p class="fw-thin">SAPO Lifestyle is a content gatherer for fashion, travel, health and much more.</p>
</div>
<div class="all-25 medium-50 small-50 tiny-100 align-center">
<p><img src="{{ site.images_path }}codebits.jpg" alt="Codebits"></p>
<p class="fw-thin">Portugal's largest tech event organized yearly by SAPO.</p>
</div>
</div>
</div>
</section>
<section class="who">
<div class="ink-grid">
<div class="column-group push-middle">
<div class="all-90 align-center push-center">
<h1 class="fw-light uppercase">Ink is made at SAPO</h1>
<p>
For the last 18 years, SAPO has lead the way in web development, in Portugal. We've always contributed to and made use of many open source projects, many of which are critical to our operations. Ink is developed under our <a href="https://oss.sapo.pt">open source initiative</a> and made freely available under the <a href="https://opensource.org/licenses/MIT">MIT</a> license.
</p>
<p>
<iframe src="https://ghbtns.com/github-btn.html?user=sapo&repo=Ink&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
<iframe src="https://ghbtns.com/github-btn.html?user=sapo&repo=Ink&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
</p>
<div class="column-group horizontal-gutters copyright fw-thin uppercase">
<div class="all-33 small-100 tiny-100 align-left small-align-center tiny-align-center">
<p><a class="SAPOlogo" href="https://www.sapo.pt">sapo.pt</a></p>
</div>
<div class="all-33 small-100 tiny-100 align-center small-align-center tiny-align-center">
<p>
<a href="https://heapanalytics.com/?utm_source=badge"><img style="width:108px;height:41px" src="//heapanalytics.com/img/badgeLight.png" alt="Heap | Mobile and Web Analytics" /></a>
</p>
</div>
<div class="all-33 small-100 tiny-100 align-right small-align-center tiny-align-center">
<p class="fastly">
CDN service is provided by <a href="https://fastly.com" target="_blank"><img src="{{ site.images_path }}/fastly_white.png" alt="Fastly"></a>
</p>
</div>
</div>
</div>
</div>
</div>
</section>