DEV Community: Louis Low The latest articles on DEV Community by Louis Low (@louislow). https://dev.to/louislow https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F420456%2Fb8e38f9c-3b8c-45de-969b-b1a5ddfa1cc0.jpg DEV Community: Louis Low https://dev.to/louislow en 100DaysOfCode: Day 04, UI Design with Knott JS + Weavv CSS Louis Low Thu, 08 Sep 2022 16:26:14 +0000 https://dev.to/louislow/100daysofcode-day-04-ui-design-with-knott-js-weavv-css-1d08 https://dev.to/louislow/100daysofcode-day-04-ui-design-with-knott-js-weavv-css-1d08 <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--s6MRYdhh--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i5ez3oo5gbxd1dqzo37w.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--s6MRYdhh--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i5ez3oo5gbxd1dqzo37w.png" alt="Image" width="880" height="495"></a><br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--agf4VCst--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/60aoijvz4nbtr3xu9okq.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--agf4VCst--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/60aoijvz4nbtr3xu9okq.png" alt="Image" width="880" height="495"></a></p> <p><iframe src="https://stackblitz.com/edit/node-d1ohqx?embed=1&amp;file=app/app.js&amp;theme=dark" width="100%" height="500"> </iframe> </p> <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--566lAguM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"> <a href="https://github.com/louislow81"> louislow81 </a> / <a href="https://github.com/louislow81/100DaysOfCode"> 100DaysOfCode </a> </h2> <h3> The 100 Days of Code with HTML, WEAVV CSS, and Vanilla.JS or sometime use Knott.JS to create Web Components </h3> </div> </div> <br> <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--566lAguM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"> <a href="https://github.com/louislow81"> louislow81 </a> / <a href="https://github.com/louislow81/knott.js"> knott.js </a> </h2> <h3> A tiny Virtual DOM web component and styling library for the basic web. </h3> </div> <div class="ltag-github-body"> <div id="readme" class="md"> <p> <a rel="noopener noreferrer nofollow" href="https://raw.githubusercontent.com/louislow81/knott.js/e832386075591d7ad4e42b7703e46836d2ca5988/knott-logo.svg"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--s3-arO_0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://raw.githubusercontent.com/louislow81/knott.js/e832386075591d7ad4e42b7703e46836d2ca5988/knott-logo.svg" width="200px" alt="Knott JS"></a> </p> <h2> A tiny Virtual DOM web component and styling library for the basic web.</h2> <p><a href="https://opensource.org/licenses/MIT" rel="nofollow"><img src="https://camo.githubusercontent.com/28044ecf31ba56f2684bd081fb809249487c05239a228658182c516040b1088f/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d4d49542d627269676874677265656e2e737667" alt="License: MIT"></a> <a href="https://badge.fury.io/js/knott" rel="nofollow"><img src="https://camo.githubusercontent.com/a0b3b97475f2158961d5fe2d1dda4b3c97b5295fe93aeb03f5e862b3b31533b2/68747470733a2f2f62616467652e667572792e696f2f6a732f6b6e6f74742e737667" alt="npm version"></a> <a href="https://www.npmjs.com/package/knott" rel="nofollow"><img src="https://camo.githubusercontent.com/04d1d3fde7837aa30706a57f1965500bba781c3de25e74dd651f5c5ec4d9aae1/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f646d2f6b6e6f74742e737667" alt="npm downloads"></a></p> <h1> Introduction</h1> <p><code>Knott.JS</code> is a tiny <strong>Virtual DOM</strong> JavaScript library for creating object-based web components it's called <strong>virtual nodes</strong> with very basic necessary features to build a simple web application or website.</p> <h1> Menu</h1> <ul> <li><a href="https://github.com/louislow81/knott.js#craft">Create Element</a></li> <li><a href="https://github.com/louislow81/knott.js#virtual-node">Virtual Node</a></li> <li><a href="https://github.com/louislow81/knott.js#create-component">Create Component</a></li> <li><a href="https://github.com/louislow81/knott.js#import-component">Import Component</a></li> <li><a href="https://github.com/louislow81/knott.js#component-properties">Component Properties</a></li> <li><a href="https://github.com/louislow81/knott.js#event-listener">Event Listener</a></li> <li><a href="https://github.com/louislow81/knott.js#mount-component">Mount Component</a></li> <li><a href="https://github.com/louislow81/knott.js#unmount-component">UnMount Component</a></li> <li><a href="https://github.com/louislow81/knott.js#data-binding">Data Binding</a></li> <li><a href="https://github.com/louislow81/knott.js#iteration">Iteration</a></li> <li><a href="https://github.com/louislow81/knott.js#showhide-component-with-click-handler">Show/Hide Component</a></li> <li><a href="https://github.com/louislow81/knott.js#dom-styling">DOM Styling</a></li> <li><a href="https://github.com/louislow81/knott.js#service-worker">Service Worker</a></li> </ul> <h1> Web Component</h1> <h2> <code>craft</code> </h2> <p>Use <code>craft()</code> to create virtual nodes commonly everywhere in the project. It takes a <strong>selector</strong> as a new element, <strong>props</strong> as attributes, <strong>text</strong> as string to put on the document, <strong>html</strong> to add custom <em>non-virtual-node</em> element, optional <strong>actions</strong> as an event listener, <strong>tasks</strong> as custom function calls, and expands the array of children elements in the same node with <strong>expand: [...]</strong>. Read more details below.</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto js-code-highlight"> <pre><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">craft</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">"knott"</span><span class="pl-kos">;</span> <span class="pl-en">craft</span><span class="pl-kos">(</span> <span class="pl-s1">selector</span><span class="pl-kos">,</span></pre>… </div> </div> </div> <div class="gh-btn-container"><a class="gh-btn" href="https://github.com/louislow81/knott.js">View on GitHub</a></div> </div> <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--566lAguM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"> <a href="https://github.com/weavv"> weavv </a> / <a href="https://github.com/weavv/weavv-css-documentation"> weavv-css-documentation </a> </h2> <h3> The official WEAVV CSS documentation website </h3> </div> <div class="ltag-github-body"> <div id="readme" class="md"> <p><a href="https://app.netlify.com/sites/weavvcss/deploys" rel="nofollow"><img src="https://camo.githubusercontent.com/19daaf497a0ee9ab3a436fd5dac154bfc9745d69bc12325a7604e132d7276f6a/68747470733a2f2f6170692e6e65746c6966792e636f6d2f6170692f76312f6261646765732f34643464353763352d383534312d343865652d393131322d3564363838636638356437652f6465706c6f792d737461747573" alt="Netlify Status"></a></p> <p><a rel="noopener noreferrer nofollow" href="https://raw.githubusercontent.com/weavv/weavv-css-documentation/main/images/github/banner.png"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--wv_UlEAA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://raw.githubusercontent.com/weavv/weavv-css-documentation/main/images/github/banner.png" alt="image"></a></p> <h2> WEAVV CSS Documentation</h2> <blockquote> <p><a href="https://weavvcss.netlify.app" rel="nofollow">Read the official documentation</a></p> </blockquote> <h2> Developer Tools</h2> <ul> <li> <a href="https://weavvcss.netlify.app/playground" rel="nofollow">WEAVV Playground</a> - Online code editor for testing and prototyping UI design with WEAVV.</li> <li> <a href="https://www.npmjs.com/package/weavv-cli" rel="nofollow">WEAVV CLI</a> - Create empty project on-the-go with example template, written with Vanilla JS web component. Optional to use HTML inline CSS class or to use SASS with <code>@extend</code> directive to extract WEAVV CSS classes in semantic way.</li> </ul> <h2> Features</h2> <ul> <li><a href="https://weavvcss.netlify.app/responsive-utilities/" rel="nofollow">Breakpoints</a></li> <li><a href="https://weavvcss.netlify.app/getting-started-themes/" rel="nofollow">Dark/Light Mode</a></li> <li><a href="https://weavvcss.netlify.app/pseudo-class-variants/" rel="nofollow">Variants</a></li> <li><a href="https://weavvcss.netlify.app/getting-started-palette/" rel="nofollow">Color Palette</a></li> <li><a href="https://weavvcss.netlify.app/getting-started-gradient/" rel="nofollow">Gradient Presets</a></li> <li><a href="https://weavvcss.netlify.app/background-gradient/" rel="nofollow">Custom Gradient</a></li> <li><a href="https://weavvcss.netlify.app/getting-started-animations/" rel="nofollow">Animations</a></li> <li><a href="https://weavvcss.netlify.app/getting-started-filters/" rel="nofollow">Filters</a></li> <li><a href="https://weavvcss.netlify.app/getting-started-fluids/" rel="nofollow">Fluids</a></li> <li><a href="https://weavvcss.netlify.app/getting-started-orientation" rel="nofollow">Orientation</a></li> <li><a href="https://weavvcss.netlify.app/plugin-api/" rel="nofollow">Plugin API</a></li> </ul> <h2> Build</h2> <p>clone the repository,</p> <div class="highlight highlight-source-shell notranslate position-relative overflow-auto js-code-highlight"> <pre>$ git clone https://github.com/weavv/weavv-css-documentation.git $ <span class="pl-c1">cd</span> weavv-css-documentation</pre> </div> <p>install dependencies,</p> <div class="highlight highlight-source-shell notranslate position-relative overflow-auto js-code-highlight"> <pre><span class="pl-c"><span class="pl-c">#</span> YARN</span> $ yarn <span class="pl-c"><span class="pl-c">#</span> NPM</span> $ npm i</pre> </div> <p>serve locally,</p> <div class="highlight highlight-source-shell notranslate position-relative overflow-auto js-code-highlight"> <pre><span class="pl-c"><span class="pl-c">#</span> YARN</span> $ yarn dev <span class="pl-c"><span class="pl-c">#</span> NMP</span> $ npm run dev</pre> </div> <h2> Credits</h2> <p><a href="https://mozilla.github.io/nunjucks/" rel="nofollow">Nunjunks</a>, <a href="https://gulpjs.com/" rel="nofollow">Gulp</a>, <a href="https://nodejs.org/" rel="nofollow">NodeJS</a>, <a href="https://sass-lang.com/" rel="nofollow">Sass</a></p> <p><a href="https://github.com/weavv/weavv-css/blob/master/LICENSE">MIT</a></p> </div> </div> <div class="gh-btn-container"><a class="gh-btn" href="https://github.com/weavv/weavv-css-documentation">View on GitHub</a></div> </div> <p>Enjoy!</p> javascript css webcomponents 100DaysOfCode: Artwork Profile UI Design with Weavv CSS Louis Low Mon, 22 Aug 2022 15:10:00 +0000 https://dev.to/louislow/100daysofcode-artwork-profile-ui-design-with-weavv-554e https://dev.to/louislow/100daysofcode-artwork-profile-ui-design-with-weavv-554e <p><iframe height="600" src="https://codepen.io/loouislow81/embed/abYMEdb?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> <br> </p> <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--566lAguM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"> <a href="https://github.com/louislow81"> louislow81 </a> / <a href="https://github.com/louislow81/100DaysOfCode"> 100DaysOfCode </a> </h2> <h3> The 100 Days of Code with HTML, WEAVV CSS, and Vanilla.JS or sometime use Knott.JS to create Web Components </h3> </div> </div> <br> <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--566lAguM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"> <a href="https://github.com/weavv"> weavv </a> / <a href="https://github.com/weavv/weavv-css-documentation"> weavv-css-documentation </a> </h2> <h3> The WEAVV CSS website </h3> </div> <div class="ltag-github-body"> <div id="readme" class="md"> <p><a href="https://app.netlify.com/sites/weavvcss/deploys" rel="nofollow"><img src="https://camo.githubusercontent.com/19daaf497a0ee9ab3a436fd5dac154bfc9745d69bc12325a7604e132d7276f6a/68747470733a2f2f6170692e6e65746c6966792e636f6d2f6170692f76312f6261646765732f34643464353763352d383534312d343865652d393131322d3564363838636638356437652f6465706c6f792d737461747573" alt="Netlify Status"></a></p> <p><a rel="noopener noreferrer nofollow" href="https://raw.githubusercontent.com/weavv/weavv-css-documentation/main/images/github/banner.png"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--wv_UlEAA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://raw.githubusercontent.com/weavv/weavv-css-documentation/main/images/github/banner.png" alt="image"></a></p> <h2> WEAVV CSS Documentation</h2> <blockquote> <p><a href="https://weavvcss.netlify.app" rel="nofollow">Read the official documentation</a></p> </blockquote> <h2> Developer Tools</h2> <ul> <li> <a href="https://weavvcss.netlify.app/playground" rel="nofollow">WEAVV Playground</a> - Online code editor for testing and prototyping UI design with WEAVV.</li> <li> <a href="https://www.npmjs.com/package/weavv-cli" rel="nofollow">WEAVV CLI</a> - Create empty project on-the-go with example template, written with Vanilla JS web component. Optional to use HTML inline CSS class or to use SASS with <code>@extend</code> directive to extract WEAVV CSS classes in semantic way.</li> </ul> <h2> Features</h2> <ul> <li><a href="https://weavvcss.netlify.app/responsive-utilities/" rel="nofollow">Breakpoints</a></li> <li><a href="https://weavvcss.netlify.app/getting-started-themes/" rel="nofollow">Dark/Light Mode</a></li> <li><a href="https://weavvcss.netlify.app/pseudo-class-variants/" rel="nofollow">Variants</a></li> <li><a href="https://weavvcss.netlify.app/getting-started-palette/" rel="nofollow">Color Palette</a></li> <li><a href="https://weavvcss.netlify.app/getting-started-gradient/" rel="nofollow">Gradient Presets</a></li> <li><a href="https://weavvcss.netlify.app/background-gradient/" rel="nofollow">Custom Gradient</a></li> <li><a href="https://weavvcss.netlify.app/getting-started-animations/" rel="nofollow">Animations</a></li> <li><a href="https://weavvcss.netlify.app/getting-started-filters/" rel="nofollow">Filters</a></li> <li><a href="https://weavvcss.netlify.app/getting-started-fluids/" rel="nofollow">Fluids</a></li> <li><a href="https://weavvcss.netlify.app/getting-started-orientation" rel="nofollow">Orientation</a></li> <li><a href="https://weavvcss.netlify.app/plugin-api/" rel="nofollow">Plugin API</a></li> </ul> <h2> Build</h2> <p>clone the repository,</p> <div class="highlight highlight-source-shell notranslate position-relative overflow-auto js-code-highlight"> <pre>$ git clone https://github.com/weavv/weavv-css-documentation.git $ <span class="pl-c1">cd</span> weavv-css-documentation</pre> </div> <p>install dependencies,</p> <div class="highlight highlight-source-shell notranslate position-relative overflow-auto js-code-highlight"> <pre><span class="pl-c"><span class="pl-c">#</span> YARN</span> $ yarn <span class="pl-c"><span class="pl-c">#</span> NPM</span> $ npm i</pre> </div> <p>serve locally,</p> <div class="highlight highlight-source-shell notranslate position-relative overflow-auto js-code-highlight"> <pre><span class="pl-c"><span class="pl-c">#</span> YARN</span> $ yarn dev <span class="pl-c"><span class="pl-c">#</span> NMP</span> $ npm run dev</pre> </div> <h2> Credits</h2> <p><a href="https://mozilla.github.io/nunjucks/" rel="nofollow">Nunjunks</a>, <a href="https://gulpjs.com/" rel="nofollow">Gulp</a>, <a href="https://nodejs.org/" rel="nofollow">NodeJS</a>, <a href="https://sass-lang.com/" rel="nofollow">Sass</a></p> <p><a href="https://github.com/weavv/weavv-css/blob/master/LICENSE">MIT</a></p> </div> </div> <br> <div class="gh-btn-container"><a class="gh-btn" href="https://github.com/weavv/weavv-css-documentation">View on GitHub</a></div> <br> </div> <br> <p>Enjoy!</p> 100daysofcode css html webcomponents 100DaysOfCode: Card UI Design with Weavv CSS Louis Low Sun, 21 Aug 2022 09:36:00 +0000 https://dev.to/louislow/100daysofcode-card-ui-design-with-weavv-3p68 https://dev.to/louislow/100daysofcode-card-ui-design-with-weavv-3p68 <p><iframe height="600" src="https://codepen.io/loouislow81/embed/JjLxQRz?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> <br> </p> <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--566lAguM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"> <a href="https://github.com/louislow81"> louislow81 </a> / <a href="https://github.com/louislow81/100DaysOfCode"> 100DaysOfCode </a> </h2> <h3> The 100 Days of Code with HTML, WEAVV CSS, and Vanilla.JS or sometime use Knott.JS to create Web Components </h3> </div> </div> <br> <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--566lAguM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"> <a href="https://github.com/weavv"> weavv </a> / <a href="https://github.com/weavv/weavv-css-documentation"> weavv-css-documentation </a> </h2> <h3> The WEAVV CSS website </h3> </div> <div class="ltag-github-body"> <div id="readme" class="md"> <p><a href="https://app.netlify.com/sites/weavvcss/deploys" rel="nofollow"><img src="https://camo.githubusercontent.com/19daaf497a0ee9ab3a436fd5dac154bfc9745d69bc12325a7604e132d7276f6a/68747470733a2f2f6170692e6e65746c6966792e636f6d2f6170692f76312f6261646765732f34643464353763352d383534312d343865652d393131322d3564363838636638356437652f6465706c6f792d737461747573" alt="Netlify Status"></a></p> <p><a rel="noopener noreferrer nofollow" href="https://raw.githubusercontent.com/weavv/weavv-css-documentation/main/images/github/banner.png"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--wv_UlEAA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://raw.githubusercontent.com/weavv/weavv-css-documentation/main/images/github/banner.png" alt="image"></a></p> <h2> WEAVV CSS Documentation</h2> <blockquote> <p><a href="https://weavvcss.netlify.app" rel="nofollow">Read the official documentation</a></p> </blockquote> <h2> Developer Tools</h2> <ul> <li> <a href="https://weavvcss.netlify.app/playground" rel="nofollow">WEAVV Playground</a> - Online code editor for testing and prototyping UI design with WEAVV.</li> <li> <a href="https://www.npmjs.com/package/weavv-cli" rel="nofollow">WEAVV CLI</a> - Create empty project on-the-go with example template, written with Vanilla JS web component. Optional to use HTML inline CSS class or to use SASS with <code>@extend</code> directive to extract WEAVV CSS classes in semantic way.</li> </ul> <h2> Features</h2> <ul> <li><a href="https://weavvcss.netlify.app/responsive-utilities/" rel="nofollow">Breakpoints</a></li> <li><a href="https://weavvcss.netlify.app/getting-started-themes/" rel="nofollow">Dark/Light Mode</a></li> <li><a href="https://weavvcss.netlify.app/pseudo-class-variants/" rel="nofollow">Variants</a></li> <li><a href="https://weavvcss.netlify.app/getting-started-palette/" rel="nofollow">Color Palette</a></li> <li><a href="https://weavvcss.netlify.app/getting-started-gradient/" rel="nofollow">Gradient Presets</a></li> <li><a href="https://weavvcss.netlify.app/background-gradient/" rel="nofollow">Custom Gradient</a></li> <li><a href="https://weavvcss.netlify.app/getting-started-animations/" rel="nofollow">Animations</a></li> <li><a href="https://weavvcss.netlify.app/getting-started-filters/" rel="nofollow">Filters</a></li> <li><a href="https://weavvcss.netlify.app/getting-started-fluids/" rel="nofollow">Fluids</a></li> <li><a href="https://weavvcss.netlify.app/getting-started-orientation" rel="nofollow">Orientation</a></li> <li><a href="https://weavvcss.netlify.app/plugin-api/" rel="nofollow">Plugin API</a></li> </ul> <h2> Build</h2> <p>clone the repository,</p> <div class="highlight highlight-source-shell notranslate position-relative overflow-auto js-code-highlight"> <pre>$ git clone https://github.com/weavv/weavv-css-documentation.git $ <span class="pl-c1">cd</span> weavv-css-documentation</pre> </div> <p>install dependencies,</p> <div class="highlight highlight-source-shell notranslate position-relative overflow-auto js-code-highlight"> <pre><span class="pl-c"><span class="pl-c">#</span> YARN</span> $ yarn <span class="pl-c"><span class="pl-c">#</span> NPM</span> $ npm i</pre> </div> <p>serve locally,</p> <div class="highlight highlight-source-shell notranslate position-relative overflow-auto js-code-highlight"> <pre><span class="pl-c"><span class="pl-c">#</span> YARN</span> $ yarn dev <span class="pl-c"><span class="pl-c">#</span> NMP</span> $ npm run dev</pre> </div> <h2> Credits</h2> <p><a href="https://mozilla.github.io/nunjucks/" rel="nofollow">Nunjunks</a>, <a href="https://gulpjs.com/" rel="nofollow">Gulp</a>, <a href="https://nodejs.org/" rel="nofollow">NodeJS</a>, <a href="https://sass-lang.com/" rel="nofollow">Sass</a></p> <p><a href="https://github.com/weavv/weavv-css/blob/master/LICENSE">MIT</a></p> </div> </div> <br> <div class="gh-btn-container"><a class="gh-btn" href="https://github.com/weavv/weavv-css-documentation">View on GitHub</a></div> <br> </div> <br> <p>Enjoy!</p> 100daysofcode css html webcomponents Weavv CSS: Ultra-Wide screen is a new design. Louis Low Tue, 09 Aug 2022 07:33:00 +0000 https://dev.to/louislow/weavv-css-pf6 https://dev.to/louislow/weavv-css-pf6 <p>Hi everyone! I had just released a long-postponed project yesterday. It's called <a href="https://weavvcss.netlify.app">WEAVV CSS</a>. A low-level functional CSS framework has more than 100+ utility components and countless component APIs to have more freedom to manipulate the UI design as flexibly as possible.</p> <p>This low-level CSS framework's main go-to emphasizes ultra-wide screen size and allows designers to occupy extra spaces for more aesthetic creativity. The default enabled screen size is 3k &amp; 4k. Up to 8k supported. I would like to see how WEAVV users manipulate this kind of CSS framework on ultra-wide screen design. Thanks, everyone!</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--mmF6GMva--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g6dc2825jognmw6184ee.jpeg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--mmF6GMva--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g6dc2825jognmw6184ee.jpeg" alt="xxx" width="880" height="495"></a></p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--ppKJ6fBO--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e2s0gbqmt9dfjvxloptn.jpeg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ppKJ6fBO--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e2s0gbqmt9dfjvxloptn.jpeg" alt="xxxx" width="880" height="495"></a></p> <p>The <a href="https://weavvcss.netlify.app/playground/">playground</a> is a tool to test and play around with WEAVV CSS without further installation.</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--H3L3mMGj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r1is9bgucghutugdqnwm.jpeg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--H3L3mMGj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r1is9bgucghutugdqnwm.jpeg" alt="xxx" width="880" height="495"></a></p> <h2> Features </h2> <ul> <li><a href="https://weavvcss.netlify.app/responsive-utilities/">Breakpoints</a></li> <li><a href="https://weavvcss.netlify.app/getting-started-themes/">Dark/Light Mode</a></li> <li><a href="https://weavvcss.netlify.app/pseudo-class-variants/">Variants</a></li> <li><a href="https://weavvcss.netlify.app/getting-started-palette/">Color Palette</a></li> <li><a href="https://weavvcss.netlify.app/getting-started-gradient/">Gradient Presets</a></li> <li><a href="https://weavvcss.netlify.app/background-gradient/">Custom Gradient</a></li> <li><a href="https://weavvcss.netlify.app/getting-started-animations/">Animations</a></li> <li><a href="https://weavvcss.netlify.app/getting-started-filters/">Filters</a></li> <li><a href="https://weavvcss.netlify.app/getting-started-fluids/">Fluids</a></li> <li><a href="https://weavvcss.netlify.app/getting-started-orientation">Orientation</a></li> <li><a href="https://weavvcss.netlify.app/plugin-api/">Plugin API</a></li> </ul> <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--566lAguM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"> <a href="https://github.com/weavv"> weavv </a> / <a href="https://github.com/weavv/weavv-css-documentation"> weavv-css-documentation </a> </h2> <h3> The WEAVV CSS website </h3> </div> <div class="ltag-github-body"> <div id="readme" class="md"> <p><a href="https://app.netlify.com/sites/weavvcss/deploys" rel="nofollow"><img src="https://camo.githubusercontent.com/19daaf497a0ee9ab3a436fd5dac154bfc9745d69bc12325a7604e132d7276f6a/68747470733a2f2f6170692e6e65746c6966792e636f6d2f6170692f76312f6261646765732f34643464353763352d383534312d343865652d393131322d3564363838636638356437652f6465706c6f792d737461747573" alt="Netlify Status"></a></p> <p><a rel="noopener noreferrer nofollow" href="https://raw.githubusercontent.com/weavv/weavv-css-documentation/main/images/github/banner.png"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--wv_UlEAA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://raw.githubusercontent.com/weavv/weavv-css-documentation/main/images/github/banner.png" alt="image"></a></p> <h2> WEAVV CSS Documentation</h2> <blockquote> <p><a href="https://weavvcss.netlify.app" rel="nofollow">Read the official documentation</a></p> </blockquote> <h2> Developer Tools</h2> <ul> <li> <a href="https://weavvcss.netlify.app/playground" rel="nofollow">WEAVV Playground</a> - Online code editor for testing and prototyping UI design with WEAVV.</li> <li> <a href="https://www.npmjs.com/package/weavv-cli" rel="nofollow">WEAVV CLI</a> - Create empty project on-the-go with example template, written with Vanilla JS web component. Optional to use HTML inline CSS class or to use SASS with <code>@extend</code> directive to extract WEAVV CSS classes in semantic way.</li> </ul> <h2> Features</h2> <ul> <li><a href="https://weavvcss.netlify.app/responsive-utilities/" rel="nofollow">Breakpoints</a></li> <li><a href="https://weavvcss.netlify.app/getting-started-themes/" rel="nofollow">Dark/Light Mode</a></li> <li><a href="https://weavvcss.netlify.app/pseudo-class-variants/" rel="nofollow">Variants</a></li> <li><a href="https://weavvcss.netlify.app/getting-started-palette/" rel="nofollow">Color Palette</a></li> <li><a href="https://weavvcss.netlify.app/getting-started-gradient/" rel="nofollow">Gradient Presets</a></li> <li><a href="https://weavvcss.netlify.app/background-gradient/" rel="nofollow">Custom Gradient</a></li> <li><a href="https://weavvcss.netlify.app/getting-started-animations/" rel="nofollow">Animations</a></li> <li><a href="https://weavvcss.netlify.app/getting-started-filters/" rel="nofollow">Filters</a></li> <li><a href="https://weavvcss.netlify.app/getting-started-fluids/" rel="nofollow">Fluids</a></li> <li><a href="https://weavvcss.netlify.app/getting-started-orientation" rel="nofollow">Orientation</a></li> <li><a href="https://weavvcss.netlify.app/plugin-api/" rel="nofollow">Plugin API</a></li> </ul> <h2> Build</h2> <p>clone the repository,</p> <div class="highlight highlight-source-shell notranslate position-relative overflow-auto js-code-highlight"> <pre>$ git clone https://github.com/weavv/weavv-css-documentation.git $ <span class="pl-c1">cd</span> weavv-css-documentation</pre> </div> <p>install dependencies,</p> <div class="highlight highlight-source-shell notranslate position-relative overflow-auto js-code-highlight"> <pre><span class="pl-c"><span class="pl-c">#</span> YARN</span> $ yarn <span class="pl-c"><span class="pl-c">#</span> NPM</span> $ npm i</pre> </div> <p>serve locally,</p> <div class="highlight highlight-source-shell notranslate position-relative overflow-auto js-code-highlight"> <pre><span class="pl-c"><span class="pl-c">#</span> YARN</span> $ yarn dev <span class="pl-c"><span class="pl-c">#</span> NMP</span> $ npm run dev</pre> </div> <h2> Credits</h2> <p><a href="https://mozilla.github.io/nunjucks/" rel="nofollow">Nunjunks</a>, <a href="https://gulpjs.com/" rel="nofollow">Gulp</a>, <a href="https://nodejs.org/" rel="nofollow">NodeJS</a>, <a href="https://sass-lang.com/" rel="nofollow">Sass</a></p> <p><a href="https://github.com/weavv/weavv-css/blob/master/LICENSE">MIT</a></p> </div> </div> <br> <div class="gh-btn-container"><a class="gh-btn" href="https://github.com/weavv/weavv-css-documentation">View on GitHub</a></div> <br> </div> <br> <p>Enjoy!</p> cssframework css