<h2>Overview:</h2>
<p>Scale.css is a mobile-first "boilerplate" that aims to provide a good starting point for readable and balanced typography on various devices. It includes a set of media queries and typographic basic styles, with proportions based on The Chromatic Scale. This tool is tested and compatible with a wide range of browsers and devices.</p>
<h2>Features:</h2>
<ul>
<li>Mobile-first approach with a base font size of 12px for feature phones</li>
<li>Support for browsers without media query support, including max-width and horizontal centering</li>
<li>Scalability using EMs relative to the base font size</li>
<li>Compatibility with various browsers and devices</li>
</ul>
<h2>Summary:</h2>
<p>Scale.css is a mobile-first boilerplate that focuses on providing a good starting point for typography that is readable and balanced on different devices. It offers a range of features such as support for browsers without media query support and scalability using EMs. The tool is well-tested and compatible with various browsers and devices.</p>


<h2>Overview:</h2>
<p>Vue Design System is an open-source tool for building UI Design Systems with Vue.js. It provides organized tools, patterns, and practices that serve as the foundation for application development. The tool is built on top of Vue.js, Vue Styleguidist, Webpack, and Theo. It is aimed at designers and front-end developers with basic knowledge of component-based workflows and HTML, SCSS, and JavaScript.</p>
<h2>Features:</h2>
<ul>
<li><strong>Set of interconnected patterns &#x26; practices</strong>: Provides a comprehensive set of interconnected patterns and practices for building UI Design Systems.</li>
<li><strong>Well thought-out terminology, naming conventions, and hierarchy</strong>: Offers a well-structured terminology, naming conventions, and hierarchy for easier understanding and organization.</li>
<li><strong>Automated overview of design system progress</strong>: Allows users to get an automated overview of how the design system progresses over time.</li>
<li><strong>Global design tokens in YAML format</strong>: Provides global design tokens in YAML format that can be used in any component.</li>
<li><strong>Automatic generation of living documentation</strong>: Generates living, user-editable documentation automatically.</li>
<li><strong>Easy export and usage as an NPM dependency</strong>: Enables users to export and use the Design System as an NPM dependency in other Vue.js or Nuxt.js projects.</li>
<li><strong>Quick availability of new elements, tokens, and patterns</strong>: Any new token, element, or pattern created is immediately available across all components.</li>
<li><strong>Pre-configured Prettier setup for code auto-formatting</strong>: Includes a pre-configured setup for auto-formatting code using Prettier on save and before commit.</li>
<li><strong>Additional features</strong>: Live reloading, autoprefixing, SCSS and helper functions, simple defaults for SVG and webfont usage out-of-the-box, separation of documentation and app logic.</li>
</ul>


Arielsalminen

Scale

Vue Design System