[{"data":1,"prerenderedAt":299},["Reactive",2],{"content-query-kEo4eSRlKc":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"_empty":6,"title":8,"description":9,"layout":5,"body":10,"_type":294,"_id":295,"_source":296,"_file":297,"_extension":298},"/docs/about","docs",false,"","About - Inkline","Inkline is a modern UI/UX Library for Vue.js, designed for creating flawless content-rich responsive web applications.",{"type":11,"children":12,"toc":286},"root",[13,22,29,35,51,65,72,86,99,105,110,117,122,158,164,169,212,218,223],{"type":14,"tag":15,"props":16,"children":18},"element","h1",{"id":17},"about-inkline",[19],{"type":20,"value":21},"text","About Inkline",{"type":14,"tag":23,"props":24,"children":26},"h2",{"id":25},"inkline-is-the-intuitive-ui-components-library-that-gives-you-the-foundation-for-building-high-quality-accessible-and-customizable-vuejs-design-systems",[27],{"type":20,"value":28},"Inkline is the intuitive UI Components library that gives you the foundation for building high quality, accessible, and customizable Vue.js Design Systems.",{"type":14,"tag":30,"props":31,"children":32},"p",{},[33],{"type":20,"value":34},"Inkline provides a great User Interface, User Experience, and Developer Experience, emphasizing a consistent and expressive API. It has been designed for creating flawless, unique experiences.",{"type":14,"tag":30,"props":36,"children":37},{},[38,40,49],{"type":20,"value":39},"Inkline is officially maintained by ",{"type":14,"tag":41,"props":42,"children":46},"a",{"href":43,"rel":44},"https://github.com/sponsors/alexgrozav",[45],"nofollow",[47],{"type":20,"value":48},"Alex Grozav",{"type":20,"value":50}," and the wonderful community members who are dedicated to building and supporting the system.",{"type":14,"tag":30,"props":52,"children":53},{},[54,56,63],{"type":20,"value":55},"In October 2019, Inkline was awarded as a finalist for the ",{"type":14,"tag":41,"props":57,"children":60},{"href":58,"rel":59},"https://osawards.com/vue/",[45],[61],{"type":20,"value":62},"Vue.js London 2019 Open Source Awards",{"type":20,"value":64},", for the Developer Experience category.",{"type":14,"tag":66,"props":67,"children":69},"h3",{"id":68},"getting-started",[70],{"type":20,"value":71},"Getting started",{"type":14,"tag":30,"props":73,"children":74},{},[75,77,84],{"type":20,"value":76},"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 ",{"type":14,"tag":41,"props":78,"children":81},{"href":79,"rel":80},"https://vuejs.org",[45],[82],{"type":20,"value":83},"Official Vue.js Documentation",{"type":20,"value":85},".",{"type":14,"tag":30,"props":87,"children":88},{},[89,91,97],{"type":20,"value":90},"Finally, make sure to go through the ",{"type":14,"tag":41,"props":92,"children":94},{"href":93},"/docs",[95],{"type":20,"value":96},"Documentation Homepage",{"type":20,"value":98}," and discover everything Inkline has to offer.",{"type":14,"tag":66,"props":100,"children":102},{"id":101},"core-values",[103],{"type":20,"value":104},"Core Values",{"type":14,"tag":30,"props":106,"children":107},{},[108],{"type":20,"value":109},"When developing Inkline, our top priority was to create a UI Library that delivers an exceptional User Experience (UX) through an intuitive and appealing User Interface (UI), and efficient Development Experience (DX).",{"type":14,"tag":111,"props":112,"children":114},"h5",{"id":113},"user-interface-ui",[115],{"type":20,"value":116},"User Interface (UI)",{"type":14,"tag":30,"props":118,"children":119},{},[120],{"type":20,"value":121},"Using Inkline means you will get a great looking, reliable and flawless responsive website:",{"type":14,"tag":123,"props":124,"children":125},"ul",{},[126,138,148],{"type":14,"tag":127,"props":128,"children":129},"li",{},[130,136],{"type":14,"tag":131,"props":132,"children":133},"strong",{},[134],{"type":20,"value":135},"Design",{"type":20,"value":137}," - Components are be designed correctly and look objectively good. The design is minimal to offer a good base for customization.",{"type":14,"tag":127,"props":139,"children":140},{},[141,146],{"type":14,"tag":131,"props":142,"children":143},{},[144],{"type":20,"value":145},"Responsiveness",{"type":20,"value":147}," - Components look great on any screen size, ranging from phones and tablets to laptops and desktops.",{"type":14,"tag":127,"props":149,"children":150},{},[151,156],{"type":14,"tag":131,"props":152,"children":153},{},[154],{"type":20,"value":155},"Customization",{"type":20,"value":157}," - Components are 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.",{"type":14,"tag":111,"props":159,"children":161},{"id":160},"user-experience-ux",[162],{"type":20,"value":163},"User Experience (UX)",{"type":14,"tag":30,"props":165,"children":166},{},[167],{"type":20,"value":168},"A web application created with Inkline will be natural and intuitive to use. The User Experience is great, out of the box:",{"type":14,"tag":123,"props":170,"children":171},{},[172,182,192,202],{"type":14,"tag":127,"props":173,"children":174},{},[175,180],{"type":14,"tag":131,"props":176,"children":177},{},[178],{"type":20,"value":179},"Functionality",{"type":20,"value":181}," - Components are working as expected. Custom form components have at least the same functionality as a native browser input.",{"type":14,"tag":127,"props":183,"children":184},{},[185,190],{"type":14,"tag":131,"props":186,"children":187},{},[188],{"type":20,"value":189},"Visual Feedback",{"type":20,"value":191}," - Components provide hover, focus, active, disabled and readonly states whenever needed.",{"type":14,"tag":127,"props":193,"children":194},{},[195,200],{"type":14,"tag":131,"props":196,"children":197},{},[198],{"type":20,"value":199},"Micro-interactions",{"type":20,"value":201}," - Components provide the right visual feedback with micro-interactions wherever possible. Animations are non-intrusive and appropriate.",{"type":14,"tag":127,"props":203,"children":204},{},[205,210],{"type":14,"tag":131,"props":206,"children":207},{},[208],{"type":20,"value":209},"Accessibility",{"type":20,"value":211}," - Components are accessible and provide the correct aria-properties for their respective states. Components are usable when navigating with a keyboard as well.",{"type":14,"tag":111,"props":213,"children":215},{"id":214},"developer-experience-dx",[216],{"type":20,"value":217},"Developer Experience (DX)",{"type":14,"tag":30,"props":219,"children":220},{},[221],{"type":20,"value":222},"Last but not least, Inkline code should be a pleasure to write. This is something that most UI Libraries overlook, but it is as important as UI and UX.",{"type":14,"tag":123,"props":224,"children":225},{},[226,236,246,256,266,276],{"type":14,"tag":127,"props":227,"children":228},{},[229,234],{"type":14,"tag":131,"props":230,"children":231},{},[232],{"type":20,"value":233},"Code Design",{"type":20,"value":235}," - Code is well written, using Composition API. It uses the best practices and provides integrations with existing tools. The code is linted and follows a good style guide. It also promotes code reuse.",{"type":14,"tag":127,"props":237,"children":238},{},[239,244],{"type":14,"tag":131,"props":240,"children":241},{},[242],{"type":20,"value":243},"Documentation",{"type":20,"value":245}," - Great and easy to follow documentation with lots of examples. We know you love copy-pasting.",{"type":14,"tag":127,"props":247,"children":248},{},[249,254],{"type":14,"tag":131,"props":250,"children":251},{},[252],{"type":20,"value":253},"Consistency",{"type":20,"value":255}," - Components are natural and intuitive to use. Components have consistent property names and class names.",{"type":14,"tag":127,"props":257,"children":258},{},[259,264],{"type":14,"tag":131,"props":260,"children":261},{},[262],{"type":20,"value":263},"Performance",{"type":20,"value":265}," - Webpack introduced the concept of Tree shaking, where any code that remains unused will not be included in the final release bundle. Inkline fully takes advantage of it.",{"type":14,"tag":127,"props":267,"children":268},{},[269,274],{"type":14,"tag":131,"props":270,"children":271},{},[272],{"type":20,"value":273},"Testing",{"type":20,"value":275}," - The UI Library is well tested. Inkline proudly features Unit tests and integration tests with close to 100% code coverage.",{"type":14,"tag":127,"props":277,"children":278},{},[279,284],{"type":14,"tag":131,"props":280,"children":281},{},[282],{"type":20,"value":283},"Completely Typed",{"type":20,"value":285}," - Inkline is written entirely in TypeScript and provides first-class TypeScript support.",{"title":7,"searchDepth":287,"depth":287,"links":288},2,[289],{"id":25,"depth":287,"text":28,"children":290},[291,293],{"id":68,"depth":292,"text":71},3,{"id":101,"depth":292,"text":104},"markdown","content:docs:about.md","content","docs/about.md","md",1794582256444]