sapo / ink Goto Github PK
View Code? Open in Web Editor NEWAn HTML5/CSS3 framework used at SAPO for fast and efficient website design and prototyping
Home Page: http://ink.sapo.pt
License: MIT License
An HTML5/CSS3 framework used at SAPO for fast and efficient website design and prototyping
Home Page: http://ink.sapo.pt
License: MIT License
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.
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)
There's a typo, here: "font size ofr your parent element".
In order to fix the compilation of the LESS source dynamically in .NET, I had to fix some issues:
@font-condensed: 'Ubuntu_condensed';
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.
Hi,
In the following code:
The message for required field in select appear but not the shadow while the input get the shadow :s
Hi,
I think that ink needs a way to fix the footer at the bottom of the page.
Changing the cursor type to "help" when users are hovering the <abbr>
would give further cues tips that a tooltip is available.
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.
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!
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!
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
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
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.
Is there a way to create 100% fluid layouts for Larger screens?
Cheers
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>
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
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.)"
When I press a toggle button, an 'active' class should be added for a permanent visual effect.
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.
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
When explaining how to add a close button, the text should explain that if using Ink JS, the close button will automatically work.
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>
I'm no expert, in websites. How can i publish my own INK website without the "cookbook" on the link.
Thanks in advance. :)
When use a inline form the required error message appear in the beginning of the element and not below the input.
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
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.".
Is there a way to do that, so button appears inline?
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.
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.
Hi Pedro,
Are you thinking doing in Saas? I only see a Less folder! When a Saas/Scss folder?
Great work by the way :)
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...
It would be nice if we could have a NuGet Package (https://nuget.org), even better if there were two or three:
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.
Near the end of the page, in the Footer Menu section, the entire text is a placeholder.
http://ink.sapo.pt/index.php/navigation#nav-pills
Aqui aparece pagination invés de pills.
E o disabled não me funcionou...
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
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...
Near the top of the page, the descriptions of each font stack end in "bla bla".
I'm taking a stab at making a yeoman generator for InK. Is that OK with you? Or is someone else already doing this?
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:
Thanks - loving Ink so far...just a noob though.
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
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>
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">
. . .
Quando tento replicar o vosso exemplo de janela modal obtenho o seguinte erro:
uncaught exception: Missing div with class "modal-body"
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
How can I create a custom field type so it doesn't validate a field with less than 3 characters?
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.
It shows differently than the other input types. Check screenshot:
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 "*"
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.
This doesn't work:
"Vertical menus are built exactly the same way as the horizontal ones, just replace the
Very good project! Good luck!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.