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

Related tags

Frameworks Ink
Overview

Welcome to Ink Build Status devDependency Status

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:

  1. Download the latest release.
  2. 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.
  3. Make sure you have ink.css, ink-ie.css and ink.js included somewhere in the <head>.
  4. 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.
  5. Keep coming back to the documentation to help you along the way.
  6. 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

Typography and Icons

Browser feature detection

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.

Comments
  • Pseudo Selectors

    Pseudo Selectors

    Ando aqui ás voltas sem conseguir descobrir qual o modo de usar as pseudo class

    Como uso por exemplo o "eq"

    Ink.ss('.Slider-nav .nav-slide').eq(activeIndex);

    ou :eq.

    Penso que vos falta muita documentação ! Ou então isto é mesmo só para geeks ou pode ser sempre o problema geral, falta de tempo.

    opened by gaspas 16
  • Remove Compass dependency

    Remove Compass dependency

    Hi!

    I created distribution Ink Framework, in which there is no relationship with Compass library. I decided to implement the missing functions related with the generation of the declaration @font-face.

    By removing the dependence we can easily take advantage of the framework on Windows or in environments where there is limited possibility of using Ruby.

    I used the library libsass, which is becoming popular due to its portability and excellent performance.

    opened by TomaszJanusz 11
  • Update touch icons on the document <head>

    Update touch icons on the document

    The current tags used in InK are outdated and the sizes of the icons don't match with the most recent specifications from Apple:

    https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

    Distribution 
    opened by ivogomes 11
  • Is it normal that Sticky elements

    Is it normal that Sticky elements "jumps" when scrolling ?

    Try this example http://jsfiddle.net/gzwXF/1/

    When scrolling to the top, the sticky element doesn't stop when it arrives at 20px from the top but continue scrolling and then it jumps to 20px from the top.

    Same thing if we remove data-top-element="#up" It will jump right after the scrolling begins

    opened by iamfiras 11
  • Horizontal Menu in IE 8

    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

    opened by jeffdlong 11
  • How-To: Nested Vertical Flexboxes inside Fixed Height Body

    How-To: Nested Vertical Flexboxes inside Fixed Height Body

    One of the primary reasons I embraced Ink is because of the FlexBox support. I do see that Ink supports vertical flex layouts but I haven't gotten them to work very well.

    Specifically I'm looking to be able to next one vertical flex layout inside another vertical flex layout - inside a body with a fixed height, the height of the window viewport.

    Does anyone know that this is indeed possible with Ink and can provide an example. Thanks!

    HTML SASS/CSS 
    opened by pworder 10
  • triggering a parsing of a DOM node at an arbitrary time

    triggering a parsing of a DOM node at an arbitrary time

    Hello,

    Let's say that you have a DOM that gets populated based on some user events. The page first loads, Ink applies javascript to it, and then for example the user can click a button which will generate DOM nodes.

    How can i apply Ink to those newly created nodes? Specifically, i would like to be able to have navigation submenu parsed.

    Right now, we have a single-page AngularJS based application. It loads views lazily, meaning that when Ink parses the DOM at page load, most of the UI isn't here for now. When the user navigates the application, some <nav ... /> blocks are appended to the DOM, however the submenu based items are not working; because Ink didn't add its magic to it yet. We are writing a set of directives to enable that, but we were unable to find any API in Ink that would allow us to apply navigation related functions to a specific DOM node that just got loaded.

    Maybe exposing an Ink.init(domNode) would be a good idea. In the meantime, what should we call instead?

    Thank you for your time and keep up the hard work!

    opened by hickscorp 9
  • Manual pagination for carousel. possible ?

    Manual pagination for carousel. possible ?

    Hello, is it possible to create pagination from existing markup, so i can use it as 'pagination' for a carousel ?

    tl;dr; My goal is to achive this: ink custom_carousel_3

    In order to create GIF, I had to create a pagination with JS like in the docs, then i just manualy adapted (manualy changed text , added some css-classes to <LI>s) HTML in ChromeDevTools, so it gets a desired look

    Since <li>s for pagination markup created automatically by Ink.UI.Carousel_1 I didn't figured out, how to get custom-text instead of just an index. Also i'm not interested on sideButtons next and previous either.

    I was hoping, that numberFormatter callback will solve my problem, but it takes only one parameter (Receives a 0-indexed number...) Maybe try to add to numberFormatter function a second param elem, which will represent the current <li>-tag, so everybody can use it (i.e. innerText or some data-attributes) ?

    Any suggestions or Ideas ?!

    P.S. Markup of a div, which should be a carousel with custom pagination:

    <div id="pico-fontstyles-carousel-1" class="ink-carousel pico-fontstyles-carousel-container">
        <ul class="stage column-group pico-fontstyles-carousel-list unstyled" style="width: 100%;">
          <li class="slide all-100 pico-fontstyles-carousel-item pico-fontstyle-regular">
            <img class="lazyload-item imagequery" data-rc="/regular.png" />
          </li>
          <li class="slide all-100 pico-fontstyles-carousel-item pico-fontstyle-bold">
            <img class="lazyload-item imagequery" data-src="/bold.png" />
          </li>
          <li class="slide all-100 pico-fontstyles-carousel-item pico-fontstyle-italic">
            <img class="lazyload-item imagequery" data-src="/italic.png" />
          </li>
        </ul>
        <nav id="pico-fontstyles-carousel-pagination-1" class="pico-fontstyles-carousel-pagination ink-navigation" data-size="3">                               
            <ul class="pagination inline" style="margin: 0; padding: 0;">
                <!-- pagination LIs goes here DELIVERED from server -->
                <li data-fontstyle="regular" class="font-style">
                    <a href="javascript:void(0);" data-index="0">Regular</a>
                </li>
                <li data-fontstyle="bold" class="font-style">
                    <a href="javascript:void(0);" data-index="1">Bold</a>
                </li>
                <li data-fontstyle="italic" class="font-style">
                    <a href="javascript:void(0);" data-index="2">Italic</a>
                </li>
                <li data-fontstyle="light" class="font-style">
                    <a href="javascript:void(0);" data-index="3">Light</a>
                </li>
            </ul>
        </nav>
    </div>
    
    opened by vladimir-light 9
  • Ink Modal auto displays when autoDisplay=false

    Ink Modal auto displays when autoDisplay=false

    When creating a new modal via javascript the modal is automatically displayed even when the autoDisplay: false option is provided.

    Ink.requireModules(['Ink.UI.Modal_1'], function(Modal) {
       var modal = new Modal('#myModal', { autoDisplay: false });
    });
    

    I'm developing against an earlier copy of the development branch, but I think I had detected this in the master branch before.

    opened by danielbcorreia 9
  • Event

    Event "Click" generates a random result in Chrome (OK on other browsers)

    Hi,

    I found a random result with the management of the event click on the Chrome browser.

    The following code generates a blank result on the property "ObjTarget.id" ​​random way (sometimes it works, other times not):

    Event.observe( document, 'click', function( e ){
    try {
        Event.stop(e);
        var ObjTarget = Event.element(e);
        console.log('@ OnClick -> ', ObjTarget.id);
        ...
    }
    ...
    }
    

    On other browsers, it works perfectly.

    The example of the attached picture shows the log with 7 consecutive clicks on the same button :

    chrome_click_event

    I am at your disposal for further tests if necessary

    Best regards and Happy New Year to all,

    Greg

    opened by locas13 9
  • Modify ink.pagination.js ?

    Modify ink.pagination.js ?

    Hello there.

    The ink.pagination script is really great (and easy to use). But i've got a small problem. On a page, I've got a very long table. Which means, if I set data-page-size to 10, it gives me this :

    pagination

    It would be nice to be able to have something like this : pagination2

    Is a change expected in this script to include this improvement ? If not, how could I do this ?

    Thanks :)

    opened by Einenlum 9
  • Typescript: Cannot find name 'Ink'

    Typescript: Cannot find name 'Ink'

    Trying to figure out how I'm going to rid this typescript issue. I don't think there's a TS module for Ink is there? I'd like not to suppress it and get typing out of this because I have a rule that says no suppressing of TS in my project.

    Screen Shot 2020-08-07 at 1 11 14 AM

    opened by dschinkel 1
  • can't choose past years on datepicker

    can't choose past years on datepicker

    Hi, when I click on arrow link to view paste years the picker cloe itself. It only works if the picker is always-open. You can try in all datepickers in your sample page. I use 3.1.10 version.

    opened by tommasobaviera 0
  • Modal dialog does not appear

    Modal dialog does not appear

    Ink: Version 3.1.10

    I want to use ink's modal dialogs but it doesn't work on my webapp. I used exactly the code from the example on But when i click on the open link nothing happens.

    I use ink together with angularjs 1.5.0

    I checked the functionality by omitting the data-trigger tag. I wanted to see whether the dialog appears automatically. But nothing happened.

    Maybe the order of the script files is wrong. If so, please add a hint to the documentation. my HTML header looks like this:

    <script src="js/scriptjs.js"></script>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-route.min.js"></script>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-cookies.js"></script>
            <script src="js/jquery-1.11.1.min.js"></script>
            <script src="js/transition.js"></script>
            <script src="js/angular-image-crop-master/image-crop.js"></script>
            <script src="js/angular-recursive.js"></script>
            <script src="js/angular-typeahead.js"></script>
            <script src="js/ng-google-chart.js"></script>
            <script src="js/jsSha.js"></script>
            <script src="js/smart-table.min.js"></script>
    
            <!-- load Ink's javascript files from the cdn -->
    
            <script type="text/javascript" src="http://cdn.ink.sapo.pt/3.1.10/js/holder.js"></script>
            <script type="text/javascript" src="http://cdn.ink.sapo.pt/3.1.10/js/ink-all.min.js"></script>
            <script type="text/javascript" src="http://cdn.ink.sapo.pt/3.1.10/js/autoload.js"></script>
             <!-- test browser flexbox support and load legacy grid if unsupported -->
            <script type="text/javascript" src="http://cdn.ink.sapo.pt/3.1.10/js/modernizr.js"></script>
            <script type="text/javascript">
                Modernizr.load({
                    test: Modernizr.flexbox,
                    nope: 'http://cdn.ink.sapo.pt/3.1.10/css/ink-legacy.min.css'
                });
            </script>
            <script type="text/javascript" src="js/angular-translate.min.js"></script>
            <script type="text/javascript" src="js/angular-translate-loader-url.min.js"></script>
            <script type="text/javascript" src="js/angular-translate-loader-static-files.min.js"></script>
            <script>custom webapp scripts</script>
    

    UPDATE: Pagination doesn't work either. I wanted to use it on a table.

    opened by JackyBull 0
  • Lazy loads with Carousel

    Lazy loads with Carousel

    Using lazy load images with carousel doesn't work propely.

    When we go to 3 page of carousel there will be placeholder instead of proper image (lazy load trigger on scroll).

    opened by Perfect7M 1
  • Glitching Happening For Sticky Component - Mobile Browsers

    Glitching Happening For Sticky Component - Mobile Browsers

    I'm noticing an entire screen repaint in Safari on my iPhone once I hit my sticky and the repaint is happening once the offsetTop kicks in for my sticky. The entire page goes white for a split second. Um, this is kinda a problem!

    Here's a screencast demonstrating the problem. When you view this on my IPhone using Safari, it not only does that short jump down, but that causes Safari to blank out the entire screen for a split second. My wife noticed it as well.

    https://www.youtube.com/watch?v=tXQXxGwmIfQ&feature=youtu.be and another cast of it https://www.youtube.com/watch?v=HRQViiVNknQ&feature=youtu.be

    This is my React.js code.

    import {Component,Store} from 'reactivate';
    var ReactDOM = require('react-dom'),
        Scroll  = require('react-scroll'),
        DirectLink = Scroll.DirectLink,
        Link = require('react-router').Link;
    
    const TableOfContents = Component({
        store: Store('/companies'),
        contextTypes: {
            router: React.PropTypes.func.isRequired
        },
        componentDidMount() {
            const el = ReactDOM.findDOMNode(this);
            new Ink.UI.Sticky(el,{offsetTop: 50, topElement: "#ft-company-profile", bottomElement: "#footer"});
        },
        render(){
            return (
                <div>
                    <p className="margin-8"><span className="blue medium"><Link to="/">HOME</Link></span></p>
            )
        }
    })
    
    export default TableOfContents;
    

    Second, I noticed that when I try to look at the INK site from my iPhone in various browsers (Safari, Chrome, Firefox) I'm not seeing your demos work at all. Here's what I see happening in each browser on my iPhone:

    FireFox - I don't even see the sticky rendering in the demo at all

    img_0287

    Safari & Chrome - I see the sticky but you can't interact with the demo, meaning you can't scroll in that box at all:

    img_0289

    So I assume that this should be working. Why isn't it?

    Right now I don't know if it's a problem on my side (how I've coded markup + using INK) or if there are real problems to be concerned about with INK sticky components.

    opened by dschinkel 0
Releases(3.1.10)
  • 3.1.10(Aug 6, 2015)

    JS

    • Ink.Dom.Browser no longer detects some IE11 mobile browsers as Safari
    • Fix a bug in Modal when open() is called with no arguments and there's an onShow callback present.
    • When a Carousel does not have a stage, the error message now makes some more sense than "a is not defined".
    • Do not crash with <option> elements in FormValidator_2
    • Do a better feature detection of the vh/vw units, for old IOS safari.
    • Fix SmoothScroller adding "active" classes in <li> elements, but never removing them
    Source code(tar.gz)
    Source code(zip)
    ink-3.1.10.zip(7.35 MB)
  • 3.1.9(May 29, 2015)

  • 3.1.8(May 27, 2015)

    CSS

    • Fixes round corners when there's only one child in the .button-group element.
    • Fixes vertical alignment in Safari.
    • Base font settings are now defined with the font property and the $base-font-weight,$base-font-stretch and $base-font-variant variables were added.

    JS

    • Dropdown does not need to be passed a 'target' option anymore, it can find its menu by itself
    • Modal will not stop propagation of events any more
    • Modal's onShow callback now takes an object with the modal trigger. It now is function (modalInstance, { trigger }) {}
    • Modal getModalElement, getShadeElement methods, which return the corresponding DOM elements which make up the modal
    • Pagination JS now supports chevron and dotted mode at the same time.
    • FormValidator_2 now supports a data-lang option to set its language to something else.
    • FormValidator_2 FormElement instances now have forceInvalid and forceValid methods, so you can arbitrarily say an input is valid or invalid and bypass all validation rules.
    • Support Opera Mini, which does not have onscroll, in LazyLoad
    • InkArray.forEachObj, for iterating an object's key/value pairs as you do in InkArray.forEach.
    • Fixed an Ink.UI.DatePicker bug in Chrome, which didn't let you select the field.
    Source code(tar.gz)
    Source code(zip)
    ink-3.1.8.zip(7.22 MB)
  • 3.1.7(Apr 7, 2015)

  • 3.1.6(Mar 31, 2015)

    JS

    • Fixed a bug where multiple toggles would misbehave if they had data-close-on-click.
    • Change Toggle defaults when data-can-toggle-an-ancestor is present, to avoid a bug where the toggle won't do anything.
    • Fixes #435.
    • Fixes #430.
    • Fixes a bug with InkElement where scrollHeight() was returning 0 in chrome.
    • Fixes a bug in Modal, which was ignoring closeOnClick: false and closing the Modal anyway.
    • InkArray.groupBy() can group non-adjacent objects now (#436).
    • groupBy() can take a string as a key, which makes it take that property name from each item and use that as the key.
    • Ink.Util.Validator.isEAN can now validate ean-8 barcodes.

    CSS

    • Fixes #432 and #433.
    Source code(tar.gz)
    Source code(zip)
    ink-3.1.6.zip(7.18 MB)
  • 3.1.5(Mar 18, 2015)

    JS

    • Merges #417
    • Adds LazyLoad to Autoload with the .ink-lazyload class
    • Add loadedClass (data-loaded-class="class-name") option to put classes in LazyLoaded elements when they are loaded so they can be styled.
    • Adds TL phones to Ink.Util.Validator
    • Adds EAN validation to Ink.Util.Validator and Ink.UI.FormValidator_2
    • Fixes multiple onInViewport callbacks in Ink.UI.LazyLoad_1
    • Make FormValidator's "matches" rule match form elements without a [rules] attribute, because those may not be validated.
    • Modal now uses Flex and VH/VH CSS dimensions remove or lighten the necessity for javascript layout. It is more smooth and a lot faster too! It gracefully degrades into using some javascript layout, or fully rely on it, on older browsers.
    • Toggle will now pass (newState, { element }) as arguments to the onChangeState callback, instead of just the new state
    • DatePicker bugfixes
    • when isAccordion, the closeOnClick option of a toggle will default to false.
    • DatePicker lang option, to set the language to Portuguese easily, and an Ink.Util.I18n instance to help create more languages.
    Source code(tar.gz)
    Source code(zip)
    ink-3.1.5.zip(7.17 MB)
  • 3.1.4(Feb 12, 2015)

  • 3.1.3(Feb 5, 2015)

    CSS

    • Merges #422
    • Fixes non-aliased fonts in Windows by rolling back Roboto

    JS

    • Ink.UI.Table fixed in Internet Explorer
    • Ink.Net.JsonP: abort() method added, which allows you to cancel requests and ignore responses.
    • Prevent a tab change in Ink.UI.Tabs when the user is clicking the active tab. This avoids an annoying scroll.
    • Removed a resize event handler on Tabs, which added the "menu horizontal" classes to the menu on small layouts. Use CSS!
    • Fix bug when swiping off of sides of carousel
    • Added validateCors option to Ink.Net.Ajax, which adds CORS headers only if necessary.
    • Tooltips are able to be triggered with keyboard, through focus events.
    • Added better keyboard focus support to Drawer
    • FormValidator_2: 'matches' now works together with 'required' so that an empty confirmation field is only valid if the matched field is not required.
    • FormValidator_2: Fixed a problem with validating 'matches' fields, in that they weren't validated if they were empty.
    • FormValidator_2 is now in autoload. Now you only need to add the .ink-formvalidator class to create it!
    Source code(tar.gz)
    Source code(zip)
    ink-3.1.3.zip(7.15 MB)
  • 3.1.2(Dec 18, 2014)

    Javascript

    Minor breaking change: Ink.UI.Toggle no longer supports detecting whether the toggled element is currently visible (using getComputedStyle) in order to set its initial state. To achieve the same effect, set the class of the first target to be the same as the classNameOn option (which defaults to 'show-all'). This may break some things, but it improves the predictability and usability of the component.

    Fixes #414

    Fixes terrible bug in FormValidator_2 where neverSubmit is always true

    Source code(tar.gz)
    Source code(zip)
    ink-3.1.2.zip(7.18 MB)
  • 3.1.1(Oct 14, 2014)

    CSS

    • Fixes issue with Drawer menu animation. https://github.com/sapo/Ink/commit/a3f8b1fb062e0c3c7e93081ad94f186db3f487f0

    JS

    • Fixes serious Drawer rendering issue in IE11, and lack of transition in Firefox. https://github.com/sapo/Ink/commit/ec350a4241373fb084544414abe84bc83ec6f736

    And more!

    Source code(tar.gz)
    Source code(zip)
    ink-3.1.1.zip(7.72 MB)
  • 3.1.0(Sep 24, 2014)

    CSS

    • Fixes issue #385.
    • Fixes multiline label indentation.
    • New print.scss module.

    JS

    • Carousel won't call onChange more than necessary now
    • Carousel advances in percentage values instead of pixel values, making it resistant to a bug where the slides become off as the Carousel advances.
    • OldIE fixes for Ink.Autoload.run and Ink.requireModules

    .. And more.

    Source code(tar.gz)
    Source code(zip)
    ink-3.1.0.zip(7.10 MB)
  • 3.0.5(Jul 23, 2014)

    CSS

    • Adds 16.66 (1/6) grid division
    • Style fixes in ink-modal and ink-table
    • Fixes issue #367, #373 and #381

    JS

    Shiny new stuff :heart: :

    • setOption() function in UI component instances
    • getInstance() function in UI component classes. Use it like this: var myModal = Modal.getInstance('#element-with-a-modal'). This deprecates the need of disabling Ink.UI.Autoload to interact with UI components.
    • Do not pollute elements with data-instance attributes. This also fixes a memory leak when UI components are removed from the DOM.

    Fixes by @entomb:

    • Issue #364
    • Ink.Dom.Event.KEY_SPACE (eb28b233)

    Random stuff:

    • Ink.Dom.Element.isDOMElement(el) function (moved from Ink.UI.Common to Ink.Dom.Element)
    • Fixed #276
    • Fixed an Ink.UI.TagField crash when it is created.
    • DatePicker improved a bit.
    • Fixed cryptic error reported when Ink.requireModules fails to load a script.

    .. And lots of small fixes.

    Source code(tar.gz)
    Source code(zip)
    ink-3.0.5.zip(7.06 MB)
  • 3.0.4(Jun 24, 2014)

    CSS

    • Bumping FontAwesome version to 4.1.0

    JS

    • Fixed a problem with SmoothScroller which was, together with Autoload, throwing errors whenever a click occurred.
    • Fixed a problem with Modal, and percentage measurements, introduced in the previous version.
    Source code(tar.gz)
    Source code(zip)
    ink-3.0.4.zip(7.10 MB)
  • 3.0.3(Jun 23, 2014)

    CSS

    • Adds disabled state styling for buttons inside a button-group (#353)
    • Adds media types support for media queries. 0bf08b641fbfc0951e4b857214fc19b0cb684a30

    JS

    • Witch hunt for event.stopPropagation() calls
    • Ink.UI.Common now warns and stops UI components from being instantiated several times in the same element.
    Source code(tar.gz)
    Source code(zip)
    ink-3.0.3.zip(7.10 MB)
  • 3.0.2(May 16, 2014)

    Breaking changes:

    If you were using requireModules to load modules asynchronously (eg. not using ink-all.js), now there is no default URL for the Ink namespace. This will only affect you if you are using requireModules asynchronously and are not calling setPath() yourself. We're not bumping a major because this is not likely to affect anyone although, theoretically, it's a breaking change.

    CSS

    • Removes a fade() call left over from the old LESS source (#349)

    JS

    • Fixing FormValidator
    • Removing the default Ink.setPath() call. We removed this because it causes surprising results and brings no benefits, and causes people to accidentally use http://js.ink.sapo.pt every time they misspelled a module name. Now you will get an error.
    Source code(tar.gz)
    Source code(zip)
    ink-3.0.2.zip(7.09 MB)
  • 3.0.1(May 15, 2014)

    CSS

    • Extends flyout menus to horizontal navigation.
    • Removes SVG font files and references in CSS and reduces dist bundle in about 7MB: dcc6dd9a73111de94c664c4c72fbf7508570c9ab.
    • Fixes bug where breakpoint dependent gutter size calculation was broken: 3a32937569adae67ea034052a92e7f6712c5e84a

    JS

    • Bugfixes in FormValidator and Drawer
    • oldIE fixes
    Source code(tar.gz)
    Source code(zip)
    ink-3.0.1.zip(7.16 MB)
  • 3.0.0(Apr 14, 2014)

    General

    Drops IE7 support. If you need to support IE7 please use 2.3.2.

    Documentation

    • Completely rewritten the documentation
    • Documentation is now created with jekyll and hosted on github pages. See gh-pages branch for more details.

    CSS

    • New flexbox based grid.
    • Loads of new breakpoint aware selectors. Check our glossary to see what's new.
    • Ink CSS is now created using SASS and Compass.
    • Deprecated shadowed and rounded classes.
    • FontAwesomes css is now distributed on its own.
    • Ubuntu font is no longer distributed and is replaced by Roboto.

    JavaScript

    • Ink.UI.Common.elOrSelector doesn't throw an error anymore. It will just return null.
    • Carousel doesn't go to the second page on resize anymore.
      • Fixed getPage() returning undefined sometimes
      • Added spaceAfterLastSlide option (defaults to true in 3.x) to control whether there is white space after the last slide in the last page.
    • SmoothScroller can have a margin option. Works well for sites with top menus.
    Source code(tar.gz)
    Source code(zip)
    ink-3.0.0.zip(8.73 MB)
  • 2.3.2(Apr 2, 2014)

  • 2.3.1(Mar 28, 2014)

  • 2.3.0(Mar 28, 2014)

    Global

    Drops the makefiles and unifies the dependency management and build process with grunt and bower. Changes the repository structure. Source code is now kept under "src" and compiled/distributable code is kept in the "dist" folder.

    CSS

    Layout

    • Default ink-grid maximum width increased to 1400px.
    • Adds 2 breakpoints: "tiny" for screen widths below 320px and "extra-large" for screen widths over 1200px. The new breakpoints are disabled by default. To use them you'll need to edit src/less/grid.less and src/less/config/__grid.less and uncomment the code that creates the additional breakpoints.
    • Adds breakpoint dependent spacing and column horizontal alignment classes i.e. small-top-space, small-push-center.
    • Adds breakpoint dependent text alignment classes i.e. small-align-center.
    • Adds breakpoint dependent gutters i.e. small-gutters.
    • Adds "double" size variant for gutters and spacing class i.e. double-gutters.

    Typography

    • Typography Removes overzealous typographic vertical spacing rules.
    • Bug fixes and improvements
    • Improves CSS selector specificity to avoid class name collisions in several components.
    • Several bug fixes.

    JavaScript

    UI

    • Adds UI Carousel component.
    • Improves UI Sticky component.
    • Improves UI DatePicker component.
    • Improves UI Common.options() component. enables UI modules to receive options of several types including Numbers, Booleans and Selectors (this improves most other components)
    • Renames Ink.UI.Aux to Ink.UI.Common.
    • Global fixes and changes
    • Core Event API change/addition. Integrated Bean ( https://github.com/fat/bean ) in the module. New methods on the API ( on, one, off, clone, fire ). Also created observeDelegated(element, eventName, selector, callback)
    • Ink.Dom.Element.create() can now call Ink.Dom.Event functions for quick creation and placement of elements: InkElement.create('div', { insertBottom: document.body });
    • Ink.Dom.Element.wrap() and unwrap.
    • Core Ajax
    • Formvalidator v1
    • Treeview
    • SortableList
    • Tagfield
    • Table
    • Modal
    • Sticky
    • Datepicker
    • Promoted Ink.Autoload to an Ink module. It now has the Autoload.run() function for running Autoload on dynamically generated content.
    • Core Bug fixes.
    Source code(tar.gz)
    Source code(zip)
    ink-2.3.0.zip(5.98 MB)
  • 2.2.1(Mar 28, 2014)

    Repository

    • structural change: Ink.js Git submodule dropped, now Ink and Ink.js are the same repository

    Javascript

    • Ink.UI.Sticky bugfixes
    • Ink.UI.Draggables improved
    • Ink.Dom.Event improvements: throttle (limit the amount of times a function can be called) and observeMulti (attaches an event to a selector or array of elements).
    • Ink.UI.Toggle now toggles several elements at once, if the selector selects many elements.

    Global

    • HTML/CSS legacy IE fixes
    • Javascript minor bug fixes
    Source code(tar.gz)
    Source code(zip)
    Ink-2.2.1.zip(5.05 MB)
  • 2.2.0(Mar 28, 2014)

    Documentation

    • Updated documentation

    HTML/CSS

    • Moved .ink-shade and .drag to utilities.less in order for the classes to be reusable by other components
    • Removed hard coded z-index values
    • Solved layering issue with datepicker component

    JavaScript

    • Bug fixes in Ink.UI.Draggable and Ink.UI.Droppable
    • Bug fixes in Ink.UI.Toggle
    • Improvement in Ink.Dom.Loaded
    • Added DOM component Ink.Dom.FormSerialize
    • Added UI component Ink.UI.Tooltip
    Source code(tar.gz)
    Source code(zip)
    ink-2.2.0.zip(5.33 MB)
  • 2.1.1(Mar 28, 2014)

  • 2.1.0(Mar 28, 2014)

    Documentation

    • Improved documentation and site layout

    HTML/CSS

    • Badges
    • Appended and prepended input fields
    • Added more spacing and gutter size options. E. g. .half-space, .quarter-space, top-space, .bottom-space, .left-space, .right-space, .half-gutters, .horizontal-gutters and much more.

    JavaScript

    • Added UI component Draggable
    • Added UI component Droppable
    Source code(tar.gz)
    Source code(zip)
    ink-2.1.0.zip(5.39 MB)
  • 2.0.0(Mar 28, 2014)

    Documentation

    • Vastly improved documentation and better site layout

    HTML/CSS

    • Layout component rewritten to use less markup and be easier to implement
    • Extensive new typography rules for better looking typesetting with little effort
    • Added more flexibility to forms

    JavaScript

    • Implemented an improved Javascript core
    • Documentation has been improved and extending the Javascript core and/or components is now easier.
    • Added support to UI components configurations via data attributes.
    • Improved the UI components in matters of responsiveness and UX.
    Source code(tar.gz)
    Source code(zip)
    ink-2.0.0.zip(4.30 MB)
  • 0.1.0(Mar 28, 2014)

Materialize, a CSS Framework based on Material Design

MaterializeCSS Materialize, a CSS Framework based on material design. -- Browse the docs -- Table of Contents Quickstart Documentation Supported Brows

Alvin Wang 38.8k Dec 28, 2022
HTML5 application architecture using Backbone.js

An Application Architecture Using Backbone.js Introduction Chaplin is an architecture for JavaScript applications using the Backbone.js library. All i

Chaplin – JavaScript Application Architecture Using Backbone.js 2.9k Jan 4, 2023
⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.

Fast 3kB alternative to React with the same modern API. All the power of Virtual DOM components, without the overhead: Familiar React API & patterns:

Preact 33.5k Dec 31, 2022
Blazing fast Apple TV application development using pure JavaScript

atvjs Blazing fast Apple TV application development using pure JavaScript. Philosophy What's included Getting Started Basic Examples Creating Pages Ad

Emad Alam 292 Dec 14, 2022
:fire: An extremely fast, React-like JavaScript library for building modern user interfaces

Inferno is an insanely fast, React-like library for building high-performance user interfaces on both the client and server. Description The main obje

Inferno 15.6k Jan 3, 2023
🌟 DataFormsJS 🌟 A minimal JavaScript Framework and standalone React and Web Components for rapid development of high quality websites and single page applications.

?? Welcome to DataFormsJS! Thanks for visiting! ?? ?? ?? ?? ?? ?? 中文 (简体) 欢迎来到 DataFormsJS Español Bienvenido a DataFormsJS Português (do Brasil) Bem

DataFormsJS 156 Dec 8, 2022
A framework for real-time applications and REST APIs with JavaScript and TypeScript

A framework for real-time applications and REST APIs with JavaScript and TypeScript Feathers is a lightweight web-framework for creating real-time app

Feathers 14.2k Dec 28, 2022
MVC framework making it easy to write realtime, collaborative applications that run in both Node.js and browsers

Derby The Derby MVC framework makes it easy to write realtime, collaborative applications that run in both Node.js and browsers. Derby includes a powe

DerbyJS 4.7k Dec 31, 2022
The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

Bootstrap Sleek, intuitive, and powerful front-end framework for faster and easier web development. Explore Bootstrap docs » Report bug · Request feat

Bootstrap 161.1k Jan 4, 2023
An open-source, self-hosted, low-code framework to build internal tools, web apps, admin panels, BI dashboards, workflows, and CRUD apps with YAML or JSON.

An open-source, self-hosted, low-code framework to build internal tools, web apps, admin panels, BI dashboards, workflows, and CRUD apps with YAML or JSON.

Lowdefy 2k Jan 4, 2023
Supabase client initialization and encapsulation in fastify framework

fastify-supabase Supabase client initialization and encapsulation in fastify framework. Install Install the package with: npm i fastify-supabase --sav

null 19 Aug 2, 2022
Brail is a framework built on NextJS for developing email templates in React, and returning HTML that is compatible with major email clients.

Brail is a framework built on NextJS for developing email templates in React, and returning HTML that is compatible with major email clients. It aims to seperate the concerns of generating the emails and delivering them.

null 121 Jan 2, 2023
The worlds smallest fully-responsive css framework

FLUIDITY A fully responsive css framework that is impossibly small HTML is almost 100% responsive out of the box. This stylesheet patches the remainin

murmurs 1.1k Sep 24, 2022
HTML Framework that allows you not to write JavaScript code.

EHTML (or Extended HTML) can be described as a set of custom elements that you can put on HTML page for different purposes and use cases. The main ide

Guseyn Ismayylov 171 Dec 29, 2022
One framework. Mobile & desktop.

Angular - One framework. Mobile & desktop. Angular is a development platform for building mobile and desktop web applications using Typescript/JavaScr

Angular 85.7k Jan 4, 2023
Ember.js - A JavaScript framework for creating ambitious web applications

Ember.js is a JavaScript framework that greatly reduces the time, effort and resources needed to build any web application. It is focused on making yo

Ember.js 22.4k Jan 8, 2023
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

Supporting Vue.js Vue.js is an MIT-licensed open source project with its ongoing development made possible entirely by the support of these awesome ba

vuejs 201.7k Jan 8, 2023
The tiny framework for building hypertext applications.

Hyperapp The tiny framework for building hypertext applications. Do more with less—We have minimized the concepts you need to learn to get stuff done.

Jorge Bucaran 18.9k Jan 4, 2023