About Inkline

Inkline is the intuitive UI Components library that gives you the foundation for building high quality, accessible, and customizable Vue.js Design Systems.

Inkline aims to provide a great User Interface (UI), User Experience (UX), and Developer Experience (DX), using a consistent and expressive API. Inkline has been designed for creating flawless responsive web applications.

In October 2019, Inkline has been awarded as a finalist for the Vue.js London 2019 Open Source Awards, for the Developer Experience category.

Getting started

The only prerequisite for using Inkline is having a basic understanding of Vue.js. If you are new to Vue.js, the best way to learn is reading through the Official Vue.js Documentation.

Finally, make sure to read through the Getting Started guide and discover everything Inkline has to offer.

Core Values

When designing Inkline as a framework, there were 3 core values that the whole code base revolved around: UI, UX and DX.

UI - User Interface

In our view, when using Inkline as a framework you should get a great looking, reliable and flawless responsive website:

  • Design

    Components should be designed correctly and look objectively good. The design should be minimal to offer a good base for customization.

  • Responsiveness

    Components should look great on any screen size, ranging from phones and tablets to laptops and desktops.

  • Customization

    Components should be customizable using color variants, design modifiers, and CSS Variables.

    All of Inkline's CSS Variables are inter-connected and propagate throughout the whole design system where applicable, providing you with a beautiful, consistent, and configurable design.

UX - User Experience

A web application created with Inkline should be natural and intuitive to use. The best User Experience should be great out of the box:

  • Functionality

    Components should be working as expected. Custom form components should have at least the same functionality as a native browser input.

  • Visual Feedback

    Components should provide hover, focus, active, disabled and readonly states whenever needed.

  • Micro-interactions

    Components should provide the right visual feedback with micro-interactions wherever possible. Animations should non-intrusive and appropriate.

  • Accessibility

    Components should be accessible and should provide the correct aria-properties for their respective states. Components should be usable when navigating with a keyboard as well.

DX - Developer Experience

Last but not least, Inkline code should be a pleasure to write. This is a feature that most frameworks overlook, but it is as important as UI and UX.

  • Code Design

    Code needs to be well written. It needs to use the best practices and provide integrations with existing tools. The code needs to be linted and follow a good style guide. The framework also needs to promote code reuse.

  • Documentation

    Great and easy to follow documentation with lots of examples. We know you love copy pasting.

  • Consistency

    Components should be natural and intuitive to use. Components should have consistent property names and class names.

  • Performance

    Webpack introduced the concept of Tree shaking. Tree shaking simply means that any module that remains unused will not be included in the final bundle that gets deployed. Inkline fully takes advantage of it.

  • Testing

    The framework needs to be well tested. Unit tests and integration tests should have a target of 100% code coverage.

  • Completely Typed

    Inkline is written entirely in TypeScript and provides first-class TypeScript support.

FAQs

Here is a list of frequently asked questions. If you think a common question is missing from the list, please create an issue here.

  1. How is Inkline different from other UI Libraries?

    Inkline offers complete control over the look and feel of your web application using thousands of inter-connected variables. Most of the other frameworks focus on providing a predefined design style such as Material Design and are hard to extend and truly make your own.

    Inkline is constantly growing and offers a great Form Validation, Datatable and Select solution.

  2. What was the inspiration when creating Inkline?

    Inkline is inspired by some of the well-established UI Frameworks out there, but we took our own approach in everything. Inkline aims to be as developer-friendly as possible.

    Inkline is strongly inspired by projects such as Bootstrap, Vuetify, Buefy, Chakra, and Tailwind.