sapo / ink Goto Github PK

An HTML5/CSS3 framework used at SAPO for fast and efficient website design and prototyping

License: MIT License

HTML 14.31% CSS 0.19% JavaScript 69.74% PHP 0.05% Roff 0.74% SCSS 14.97%

ink's Introduction

Welcome to Ink

Ink is an interface kit for quick development of web interfaces, simple to use and expand on. It uses a combination of HTML, CSS and JavaScript to offer modern solutions for building layouts, display common interface elements and implement interactive features that are content-centric and user friendly for both your audience and your designers & developers.

Ink is part of SAPO's Open Source Software initiative.

Current Version: 3.1.10

You can read our full documentation, examples and recipes in http://ink.sapo.pt

Getting started

Let's get you started with Ink right away. Here's what you need to know and do:

Download the latest release.
Check the recipes we provide in the dist/cookbook folder and choose one to start from or use quick-start.html as a blank slate.
Make sure you have ink.css, ink-ie.css and ink.js included somewhere in the <head>.
Add your own css and scripts to carry all your project-specific changes. You can use quick-start.css from the dist/css folder. It already contains the same media queries as Ink.
Keep coming back to the documentation to help you along the way.
That's it! You'll see how easy it is once you pick it up.

Repository

Branches

master - The master branch contains the latest release as its HEAD and all previous releases as tags named as the version numbers.
staging - The staging branch is a semi-stable branch containing code from the develop branch which is under testing and will, eventually, go into the next release.
develop* - The develop branch contains our latest code that will eventually lead to a new release and tag on master.

* This branch is very likely to contain code that is not fully functional or documented. Support requests for problems with this branch will have the lowest priority so, use at your own risk.

Structure

Since version 2.3.0 we've moved things around in order keep source code from distribution code separated:

JS
```
dist/js
```
CSS
```
dist/css
```
Sass source
```
src/sass
```
Js source
```
src/js
```

We've also unified our build system using Grunt and Bower. So, building from source is now a lot easier.

Building from source

Required tools

If you want to build from our source code, you'll need to install a few things:

Node.js
Ruby
Compass
Grunt
Bower

OS X

Install Homebrew:

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Install Node.js:

brew install node

Install Grunt:

npm install -g grunt-cli

Install Bower:

npm install -g bower

Install Compass:

sudo gem update --system && sudo gem install compass

Move into Inks folder and install remaining build tools:

npm install

Ubuntu

Install Grunt:

sudo npm install -g grunt-cli

Install Bower:

sudo npm install -g bower

Install Ruby:

sudo apt-get install ruby rubygems

Install Compass:

sudo gem install compass

Move into Inks folder and install remaining build tools:

npm install

Windows

If you don't need to rebuild Javascript code you can just use Scout which is a nice, free and cross platform Sass/Compass compiler.

Building on Windows is a lot trickier so we won't get into details on how to install all the required tools. Instead here's a list of useful pages you'll need to read while trying this endeavour:

Building

Grunt exposes these build tasks:

grunt - Gets third party dependencies, deletes previously built js and css, recompiles and minifies the css, rebuilds and minifies the js bundle files.
grunt test - Runs Inks js test suite.
grunt css - Deletes previously built css, recompiles and minifies the css.
grunt js - Deletes previously built js, builds and minifies the js bundle files.
grunt watch - Watches for changes in either css or js files and calls grunt js and grunt css
grunt watch:css - Watches for changes in Sass files and calls grunt css
grunt watch:js - Watches for changes in JS files and calls grunt js

Documentation

The documentation is no longer distributed with Ink releases. We've completely rewritten or documentation and are now running our site on Github pages using Jekyll.

You can read it at http://ink.sapo.pt Get its source, contribute or report an issue here: https://github.com/sapo/Ink-doc

Ink is built with help from these wonderful projects:

CSS Generation

Sass
Compass

Typography and Icons

Browser feature detection

Modernizr

Build system

Versions

Projects using Ink

You can check out a list of projects we find around the web that are using Ink in some form here.

ink's People

Contributors

Stargazers

Watchers

Forkers

btsantos msoftware codeclarity johnulist mdll yrsdi corroded andreyber jorgenio arthitkhun nowaym jewel88 vishalpanchal woerwin nxbdi fengyiyi cmono charmyin f2er 5atyajit soycake fhmunna mission-zhong moocss nvdnkpr pengneal zbcdj2008 sirithink andregomes is00hcw djoudi aeglethemis parvulus1 amanikamail scottbrimberry skopp tetsalves donn1e cyrke tyidnet oasisyen jtarrinho1978 wowo kimico filipepenedo malduarte farsotstider tiagoantunespt pntrivedy toluolubajo lujaw nelsonjsduarte donbinks16 rcarmo intfrr tshong davgit tpinto bussiere ishansharma halfnhav4 libin repos-html5 fabiosantoscode yanlinaung panallen wolxxx alienx justzx2011 nmjesus cdoru csbrandt novacorps eakcantey likeyourhandle landsurveyorsunited luisfrsousa dluxo artyom4d edinsoncs lsousa jakschu caitp hellcore webrulon roachhd musicaldoctor webtechiom mimundome tngvndrm rogeriopvl stioann chambita inthescript jhei metaphora suskind hornets thangtq1009 rakesh-mohanta

ink's Issues

Ink configurator

Oi,

Os links para: Ink configurator vão dar a isto: http://ink.sapo.pt/index.php/conf
Que está a dar 404...

Abraço

Issues compiling LESS with dotless

In order to fix the compilation of the LESS source dynamically in .NET, I had to fix some issues:

Ubuntu_condensed must be between quotes in "__typography.less", e.g.: @font-condensed: 'Ubuntu_condensed';
Extra ";" on js.modal.window.less, line 89
@Layer-10 is undefined on line 27 of navigation.menu.less. Fix: "utilities.less" import in "ink.less" must appear before the usage of those variables.

After these are fixed, the CSS is correctly generated.
I'm updating the NuGet package at this time, and I needed to change the LESS source only to make it work. This fix on the master branch would make it easier to publish updates in the future.

Note: At this time the NuGet packages have been downloaded 270 times, so the target audience is not that small.

Incomplete documentation in the Alerts section

When explaining how to add a close button, the text should explain that if using Ink JS, the close button will automatically work.

Wrap JS in a modular IIFE and pass window, document and undefined as argument

Having them exposed as local variables inside a function scope you could use a compressor like YUI to rename them to a shorter variable name and effectively reduce the size of the minified version.

This is specially true in big files. For instance ink-all.min.js:

window is used roughly 70 times
document is used 230ish times

We'd be looking at almost 2k characters reduction.

However, I can't know if this would add some entropy to the development process, so I'm only putting this here up to discussion before attempting to submit a merge request.

Best regards

Misusage of <address> on the typography page

The <address> tag isn't supposed to be used for physical address. The proposed example on the typography page is a misleading usage of the tag.

Quote from html 5 spec:
"The address element represents the contact information for its nearest article or body element ancestor. If that is the body element, then the contact information applies to the document as a whole... The address element must not be used to represent arbitrary addresses (e.g. postal addresses), unless those addresses are in fact the relevant contact information. (The p element is the appropriate element for marking up postal addresses in general.)"

Adding button in the end of "Block form with inline fields"

Is there a way to do that, so button appears inline?

multilevel menu support on horizontal menues?

Is there multilevel menu support?

I tried with the following

<!-- Add your site or application content here -->
<nav class="ink-navigation">
  <ul class="menu horizontal grey">
    <li><a href="#">Item</a></li>
    <li>
      <a href="#">Item</a>
      <ul class="submenu">
        <li><a href="#">SubItem</a></li>
        <li><a href="#">SubItem</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Item</a>
      <ul class="submenu">
        <li>
          <a href="#">Submenu<i class="icon-caret-right ink-for-l"></i><i class="icon-caret-down ink-for-s ink-for-m"></i></a>
          <ul class="submenu">
            <li><a href="#">Item with a very big title</a></li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
          </ul>
        </li>
        <li><a href="#">SubItem</a></li>
      </ul>
    </li>
    <li><a href="#">Item</a></li>
    <li>
      <a href="#">Item</a>
      <ul class="submenu">
        <li>
          <a href="#">Item</a>
          <ul class="submenu">
            <li><a href="#">SubItem</a></li>
            <li><a href="#">SubItem</a></li>
          </ul>
        </li>
        <li><a href="#">SubItem</a></li>
      </ul>
    </li>
  </ul>
</nav>

with no luck...

my-page.html (...thirds...)

Na página modelo: "my-page.html"
e especificamente no trecho: ... thirds...

Quando mudo a largura do navegador... onde havia 3 "objetos" nas 3 "colunas"... 01 coluna desaparece e fica apenas 2 colunas com 2 objetos na linha (row), e o terceiro objeto não aparece mais.

Continuando a reduzir a largura,... quando mostra 1 coluna apenas... volta a mostrar os 3 objetos, um abaixo do outro.

Resumindo:
Quando ...thirds... fica em 2 colunas, o 3º elemento (objeto) não é mostrado no navegador.

Obrigado pela atenção.

Tomas

Missing style for input[type=email]

It shows differently than the other input types. Check screenshot:

http://d.pr/i/AHya

Vertical menu

This doesn't work:
"Vertical menus are built exactly the same way as the horizontal ones, just replace the

Very good project! Good luck!

Font Awesome update

http://fortawesome.github.io/Font-Awesome/icons/

"You asked, Font Awesome delivers with 58 shiny new icons in version 3.2.0. "

Há alguns que me davam jeito, como do Foursquare e Youtube

Multiple dropdowns don't close each other on click

When defining multiple dropdowns, there expected behaviour when opening a dropdown is closing any other open dropdowns. There should be at least an option for this behaviour.

Use "help" cursor for abbrevations

Changing the cursor type to "help" when users are hovering the <abbr> would give further cues tips that a tooltip is available.

Ink.UI.Toggle: allow target as an element

Currently, the options hash of the Ink.UI.Toggle_1 constructor only allows the target as selector string. This should allow passing a DOM element as well, for easier integration with other js libs.

Date Picker

Position relative to the related input in order to have it "move" along when window is resized or anything creates a structure displacement.

Default should be to appear below or above the input, with specific classes or calls to make it display to a specific direction, if required.

Incomplete text in the Typography section

Near the top of the page, the descriptions of each font stack end in "bla bla".

form validator does not work for dates

The form validator for dates always produces an 'invalid date' error regardless of the value submitted, even when the field is empty.

Here's a minimal code to reproduce the problem:

<form class="ink-form" id="searchForm" method="post" action="#" onsubmit="return Ink.UI.FormValidator.validate(this);">
<fieldset>
<label for="obsdate">Observation Date</label>
<div class="control">
<input type="text" name="obsdate" id="obsdate" class="ink-fv-date"/>
</div>
</fieldset>
<button type="submit" class="ink-button blue">Submit</button>
</form>

Sass / Scss files

Hi Pedro,
Are you thinking doing in Saas? I only see a Less folder! When a Saas/Scss folder?
Great work by the way :)

.required does not work with inline form with inline fields

Hi,

I was following the documentation about the forms.

What I was trying to do is a form with the following fields:
Title, First Name, Middle Name, Last Name

On one line, with the labels on the left of each field resulting with the code:

<fieldset class="column-group gutters">
    <div class="control-group required validation error large-25 medium-25 small-100">
        <div class="column-group gutters">
            <label for="title" class="large-30">Title</label>
            <div class="control large-70"><input type="text" id="title" /></div>
            <p class="tip hide">Please provide your title.</p>
        </div>
    </div>
    <div class="control-group large-25 medium-25 small-100">
        <div class="column-group gutters">
            <label for="firstname" class="large-40">First Name</label>
            <div class="control large-60"><input type="text" id="firstname" /></div>
        </div>
    </div>
    <div class="control-group large-25 medium-25 small-100">
        <div class="column-group gutters">
            <label for="middlename" class="large-50">Middle Name</label>
            <div class="control large-50"><input type="text" id="middlename" placeholder="optional" /></div>
        </div>
    </div>
    <div class="control-group large-25 medium-25 small-100">
        <div class="column-group">
            <label for="lastname" class="large-40">Last Name</label>
            <div class="control large-60"><input type="text" id="lastname" /></div>
        </div>
    </div>
</fieldset>

Please note the 'required' class on title element.
The asterisk does not appears and I tried at different levels without getting any result.

Also another bug is that the tip does not appears properly, it is too low and not aligned.

Have a look to the screenshot.

Thanks for the great job though!

can´t find variable: ink

Estou a usar a ink v2 com o clone feito ontem, e estou a ter o seguinte erro can´t find variable: ink

Já fui ao ficheiro ink.js e troquei as refencias SAPO para ink, resolveu em parte, mas apareceram outros.

Código do head (retirado de uma das vossas páginas).

<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="" /> 
    <meta name="keywords" content="" />
    <meta name="robots" content="" />
        <link rel="apple-touch-icon-precomposed" href="./imgs/touch-icon.57.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="./imgs/touch-icon.72.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="./imgs/touch-icon.114.png">
<link rel="apple-touch-startup-image" href="./imgs/splash.320x460.png" media="screen and (min-device-width: 200px) and (max-device-width: 320px) and (orientation:portrait)">
<link rel="apple-touch-startup-image" href="./imgs/splash.768x1004.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">
<link rel="apple-touch-startup-image" href="./imgs/splash.1024x748.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)">
<!-- Load Inks' CSS -->
<link rel="stylesheet" type="text/css" href="./css/ink.css">

<!-- Load Documentation sites' CSS -->
<link rel="stylesheet" type="text/css" href="./css/docs.css">  

<!--[if lt IE 9]>
    <script type="text/javascript" src="./js/html5shiv.js"></script>
    <script type="text/javascript" src="./js/html5shiv-printshiv.js"></script>
<![endif]-->

<!--[if lte IE 7 ]>
    <link rel="stylesheet" href="./css/ink-ie7.css" type="text/css" media="screen" title="no title" charset="utf-8">
<![endif]-->

<!-- Javascript -->
<script type="text/javascript" src="./js/ink.js"></script>
<script type="text/javascript" src="./js/ink.spy.js"></script>
<script type="text/javascript" src="./js/ink.pagination.js"></script>
<script type="text/javascript" src="./js/ink.modal.js"></script>
<script type="text/javascript" src="./js/ink.sticky.js"></script>
<script type="text/javascript" src="./js/ink.toggle.js"></script>
<script type="text/javascript" src="./js/ink.progressbar.js"></script>
<script type="text/javascript" src="./js/ink.tabs.js"></script>
<script type="text/javascript" src="./js/ink.datepicker.js"></script>
<script type="text/javascript" src="./js/ink.treeview.js"></script>
<script type="text/javascript" src="./js/ink.imagequery.js"></script>
<script type="text/javascript" src="./js/ink.sortablelist.js"></script>
<script type="text/javascript" src="./js/ink.table.js"></script>
<script type="text/javascript" src="./js/ink.formvalidator.js"></script>
<script type="text/javascript" src="./js/ink.smoothscroller.js"></script>
<script type="text/javascript" src="./js/autoload.js"></script>
<script type="text/javascript" src="./js/prettify.js"></script>
<!-- End of javascript -->
</head>

Publish with desired "link"

I'm no expert, in websites. How can i publish my own INK website without the "cookbook" on the link.

Thanks in advance. :)

Typo in the Icons section

There's a typo, here: "font size ofr your parent element".

are you planning to add support for submenues?

It's pretty useful in those cases where you have lots of options

I mean a main horizontal menu bar, with dropdown menues nested many levels

Twitter bootstrap added it a couple of versions ago, abut now they are going to discontinue it (a shame indeed)

meta viewport

Bom dia,

Com a tag meta para o viewport tal como estava:

estava a aparecer isto na console:
Viewport argument value "device-width;" for key "width" not recognized. Content ignored.
Viewport argument value "1.0;" for key "initial-scale" was truncated to its numeric prefix.
Viewport argument value "1.0;" for key "maximum-scale" was truncated to its numeric prefix.
Viewport argument value "0;" for key "user-scalable" was truncated to its numeric prefix.

Ao procurar por esta situação, verifiquei que aqui: https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag#Viewport_basics

Tinham os exemplos com virgulas invés de ponto e virgula, tipo isto:

E assim já não deu qualquer erro na console...

ink-dockable not working

The "ink-dockable" property seems broken. Even though it works on the main page, it doesn't work on the samples page: http://js.sapo.pt/SAPO/Ink/index.html
(It also doesn't work on my current project)

Tested on Google Chrome 23.0.1271.64 m on windows and ubuntu

Select required - red shadow

Hi,
In the following code:

http://pastebin.com/EQm0X7ye

The message for required field in select appear but not the shadow while the input get the shadow :s

long menu dropdowns hidden (especially on small and medium views)

On small and medium screen sizes, an ink-collapsible nav dropdown overflows off the screen with no way to access the bottom menu items. A current workaround is:

@media screen and (max-width: 960px) {
  #topbar {
    position: static;
  }
}

. . .

<div id="topbar">
    <nav class="ink-navigation ink-collapsible ink-container">
        <ul class="menu horizontal flat black">

. . .

inline form - poorly positioned required message

When use a inline form the required error message appear in the beginning of the element and not below the input.

Legend hide-* class should not cause offset of the first element in the fieldset

The following style should not be applied when the legend element has a "hide-all" class (or any of the other resolution-specific "hide-*" classes):

.ink-form fieldset legend + * {
    -webkit-margin-top-collapse: separate;
    margin: 2em 0;
}

This rule makes the first element of the form offset 2em down, even if the legend is not showing up. Example html:

<form>
    <fieldset>
        <legend class="hide-all">some hidden legend</legend>
        <div class="someElement">hello</div>
    </fieldset>
</form>

Alterar entre layouts sem definir vários layouts

Eu tenho uma form com vários campos, mas não pretendia que ficasse uma lista muito grande e então dividi em colunas. No caso do layout large tem 3 (33%) colunas, no Medium tem 2 (50%) colunas e no small uma coluna (100%).

Até ao momento eu tinha criado os 3 layouts diferentes e em cada layout tinha os elementos. Isto faz com que tenha 3 vezes os elementos repetidos e ao alterar entre layouts, por exemplo rodar o tablet de landscape para portrait os valores inseridos nos inputs desaparecem.

Agora estava a tentar fazer de uma maneira mais limpa mas que só resulta no caso de serem multiplos, isto é:

<div class="ink-m50">
   <div class="ink-l25">
      input1
      input2
   </div>
   <div class="ink-l25">
      input3
      input4
   </div>
</div>
<div class="ink-m50">
   <div class="ink-l25">
      input5
      input6
   </div>
   <div class="ink-l25">
      input7
      input8
   </div>
</div>

A minha questão é se me está a escapar algo que esteja a fazer com pense que não consigo por exemplo para o large definir 3 colunas.

Horizontal scroll

Olá,

No componente tabela http://ink.sapo.pt/index.php/js/ui quando se pretende usar um scroll horizontal este aparece por baixo da 'pagination' fazendo com que esta tambem ande de um lado para o outro em vez de estar fixa.

Seria possivel colocar a 'pagination' fixa e o scroll logo a seguir à tabelta?

Obrigado

InK Yeoman Generator

I'm taking a stab at making a yeoman generator for InK. Is that OK with you? Or is someone else already doing this?

ink-collapsible requires Ink.js but isn't included in download

If I add "ink-collapsible" to my menu in the my-page.html file included in the Ink download, it doesn't work

<nav class="ink-container ink-collapsible ink-navigation">

However, when I add the Ink.js file it works

<script type="text/javascript" src="http://js.sapo.pt/Bundles/Ink.js"></script>

Can you include Ink.js in your download (http://ink.sapo.pt/index.php/download/latest) and update your documentation to mention this? Thanks!

Pequeno pormenor

http://ink.sapo.pt/index.php/navigation#nav-pills

Aqui aparece pagination invés de pills.

E o disabled não me funcionou...

Fix styles for ink-dropdown

The margin fix for ink-button within ink-dropdown is defined in docs.css:

.ink-dropdown .ink-button {
    margin: 5px 0;
}

This should be defined in the main stylesheet instead.

Janela Modal

Quando tento replicar o vosso exemplo de janela modal obtenho o seguinte erro:

uncaught exception: Missing div with class "modal-body"

Lorem Ipsum text in the Navigation section

Near the end of the page, in the Footer Menu section, the entire text is a placeholder.

fix footer at bottom

Hi,
I think that ink needs a way to fix the footer at the bottom of the page.

Form validate() - Dynamically added elements

After click submit button and run Sapo.Ink.formValidator.validate() if I add elements do the form using JS they won't be validated.

You can test the behavior here http://jsfiddle.net/rVQB4/3/ select one or more 'Fornecedor' and click 'Adicionar', now select another 'Fornecedor' and click 'Adicionar'. The validate() function won't take the new added element :s

Any plans to write a Sass version?

Re,

A Sass version would be extremely helpful. If anything, the following clutter:

<div class="ink-l50 ink-m50 ink-s50"></div>

Can be replaced with:

<div class="section"></div>

and Sass:

.section { 
  @include ink-l(50);
  @include ink-m(50);
  @include ink-s(50);
}

Cheers.

Toggle button should have a class 'active' when toggled

When I press a toggle button, an 'active' class should be added for a permanent visual effect.

Sortable List - Drag element with active color

The item when grabbed should have, by default, a style to distinguish it from the rest. With nothing but the text to distinguish creates a bad experience.

NuGet Packages

It would be nice if we could have a NuGet Package (https://nuget.org), even better if there were two or three:

CSS Version
LESS Version
(Optional) Full version, with the html examples

The same thing goes to the JS libs. This would allow us to update Ink and SAPO JS Library in a more automated way.

PS: I was going to publish a LESS package right now, but I feel better if this maintained by you guys.

Lossless compression on default images

For those not blessed with OptiPNG in their servers.

For a wooping (!)~8k size loss. You can use either Smush.it from Yahoo, OptiPNG, PunyPNG or some hip, "newer better faster" service that floats around nowadays.

Form Validator - Custom field types

How can I create a custom field type so it doesn't validate a field with less than 3 characters?

Firefox não permite cross-domain fonts

Existe um problema no firefox com o font awesome. Os icons não aparecem como deviam.
Penso que seja um problema de cross domain. Se for esse o caso e se utiliza o Apache como webserver, basta adicionar no .htaccess o seguinte:

<FilesMatch ".(ttf|otf|eot|woff)$">

Header set Access-Control-Allow-Origin "*"

Horizontal Menu in IE 8

I implemented your Horizontal Menu and for some reason it doesn't seem to work in IE 8??? Works great in chrome. But in IE 8 it turns it into a bulleted list. Thanks, Jeff

Fluid Layouts.

Is there a way to create 100% fluid layouts for Larger screens?

Cheers

Using Ink containers inside SList

Looks like if I use a container (ink-l90) inside a Sortable list, the text inside the container isn't shown. Is this allowed? If not, any thoughts to a workaround.

I'd like to put some text and then an icon to the right of the text for editing the list item.

Sample Code not Working:

Furnace Filter
Kitchen Paint Color
Roof Installer

Thanks - loving Ink so far...just a noob though.

LESS compile error with type selectors

When I´m going to compile Ink .less files I get an error in line 233 of modules/mixins.less.
I´m using grunt-recess for this process, but I get the same error when I try grunt-contrib-less.

Parser error in less/modules/mixins.less
233.
234. (~"[class*=@{breakpoint-alias}-]") {
235. float: left;

Docs in {Less} site points to "prior to LESS 1.3.1 a (~"@{name}") type of selector was supported. Support for this will be removed in 1.4.0.".