From 9cc722517a77120189d7475be5d9842c27d97ce6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ot=C3=A1vio=20Augusto?= Date: Mon, 11 Dec 2023 12:45:04 -0300 Subject: [PATCH] fix: doc errors --- INSTRUCOES(PT-BR).md | 340 ++++------------------------------ README.md | 431 ++++++++++++++++++++++++++++++++++++++----- index.html | 4 +- package.json | 2 +- 4 files changed, 418 insertions(+), 359 deletions(-) diff --git a/INSTRUCOES(PT-BR).md b/INSTRUCOES(PT-BR).md index 956b498..dec64d2 100644 --- a/INSTRUCOES(PT-BR).md +++ b/INSTRUCOES(PT-BR).md @@ -1,328 +1,52 @@ # Akatsuki CSS -Akatsuki CSS is a flexible and highly customizable CSS framework with a wide range of presets. It is designed to cater to developers of all skill levels, providing an intuitive way to style elements without the need for additional tools like PostCSS or JavaScript. +O Akatsuki CSS é um framework CSS flexível e altamente personalizável com uma ampla gama de predefinições. Ele foi projetado para atender a desenvolvedores de todos os níveis de habilidade, proporcionando uma maneira intuitiva de estilizar elementos sem a necessidade de ferramentas adicionais como PostCSS ou JavaScript. -## Features +## Recursos -- Easily customizable elements -- Rich collection of presets -- No reliance on PostCSS or JavaScript for customization -- Dependency free +- Elementos facilmente personalizáveis +- Rica coleção de predefinições +- Sem dependência de PostCSS ou JavaScript para personalização +- Livre de dependências -## Getting Started +## Como Começar -To get started with Akatsuki CSS, follow these steps: +Para começar a usar o Akatsuki-CSS, siga estas etapas: -1. [Download](https://www.npmjs.com/package/yonaka) on NPM, clone the repository or use the [Jsdelivr](https://www.jsdelivr.com/package/npm/yonaka). +### JsDelivr -2. Add the `akatsuki.css` file to your project by importing it on your global CSS file. -```css -@import "node_modules/akatsuki-css/akatsuki.css" -``` +1. Acesse o site [JsDelivr](https://www.jsdelivr.com/package/npm/yonaka) +2. Copie a tag HTML ou apenas a URL +3. Adicione ao seu código -or in the HTML +* HTML -```html - -``` + ```html + + + + + + Cool Example 😎 + + ``` -## Customizing +* CSS -- You can overwrite the default values of the variables, by simpling rewriting it in the `:root` or `html` selector. The default specifity is equals to 0 + ```css + @import url("https://cdn.jsdelivr.net/npm/yonaka/dist/yonaka.min.css"); -- Also you can customize a variable for a single tag with the inline css + /*Sobrescreva os Estilos Aqui*/ - * Ex: ```html
Dummy Text
``` - -- Or you can use the inheritance on the parent selector - -### Global Scoped Variables - -#### Overview - -Some of the variables used in the project. - -```css -:where(:root) { - // GLOBAL SCOPED VARS - - --roundness: auto; // The border-radius to everything - --spacing: .8rem; // the spacing between elements - --spacing-y: auto; - --spacing-x: auto; - --jump: .4rem; // the jump value between elements - --theme: dark; // the actual theme in the page - --width: auto; // the witdth of an element - --height: auto; // the height of an element - - // SPACING VARS --------------------------------- - - --xxs: .2rem; // 0.5 Extra Extra Small - --xs: .4rem; // 1.0 Extra Small - --sm: .8rem; // 2.0 Small - --md: 1.6rem; // 4.0 Medium - --lg: 3.2rem; // 6.0 Large - --xl: 6.4rem; // 8.0 Extra Large - --hg: 12.8rem; // 10.0 Huge - - // COLOR PALETTE --------------------------------- - - --text: #d9e5f7; - --background: #03070d; - --primary: #173c73; - --secondary: #081426; - --accent: #296cd1; - - // Color created with the palette - - --destructive: #772626; - - // Blend Colors - - --blend-text-color: #000; - --blend-back-color: #FFF; - --blend-highlight-color: #FFF; - - - // BREAKPOINTS --------------------------------- - - --bp-sm: 40em; - --bp-md: 48em; - --bp-lg: 64em; - --bp-hg: 80em; - - // TYPOGRAPHY --------------------------------- - - --font-family: system-ui, 'Inter', 'Roboto'; - --font-weight: 400; - --font-size: 1.6rem; - --line-height: 1.15; - -} - -// LIGHT THEME - -[data-theme="light"] { - --text: #081426; - --background: #f3f6fc; - --primary: #8cb1e8; - --secondary: #d9e5f7; - --accent: #2e71d6; - - --blend-text-color: #FFF; - --blend-back-color: #000; - --blend-highlight-color: #000; -} -``` - -#### Usage and Pattern - -The framework uses variables for almost everithing, allowing the user to customize a big portion of the Akatsuki-CSS default styling, simulating a mini design system. - -I've create a pattern that works like this. -1. I create the sub variables for example, to a border(color, width and it's style) _Experimental_ - -```css ---border-color: var(--primary) // red; ---border-size: var(--md) // 16px; ---border-style: solid; -``` - -2. Then I created the 'shorthand' border variable - -```css ---border: var(--border-color) var(--border-size) var(--border-style); -``` - -3. After this I can create variations by changing the value of any of the above variables in the HTML element or even in the global CSS. - -```html -
-

Lorem

-
-``` - -#### List of customizable variables - -in progress - -##### Customizing colors - -To customize colors, I highly recommend using [realtimecolors](https://www.realtimecolors.com/?colors=e2f7f8-092425-41cbd2-061819-2db7be&fonts=Poppins-Poppins). - -1. First go the site and use the dark mode option, then generate your desired palette(HEX colors recommended). -2. Click to export and toggle the option themes and copy the code. -3. Change it in the framework by overwritting it. - -```css -:root { - --text: #e2f7f8; - --background: #092425; - --primary: #41cbd2; - --secondary: #061819; - --accent: #2db7be; -} - -@media (prefers-color-scheme: light) { :root { - --text: #071c1d; - --background: #daf5f6; - --primary: #2db7be; - --secondary: #e6f8f9; - --accent: #41cbd2; + --background: tomato; } -} -``` - -with these colors, the framework will generate variants as: muted, foreground and etc... - -```css -:where(:root) { - // Color created with the palette - - --destructive: #772626; - - // Blend Colors - - --blend-text-color: #000; - --blend-back-color: #FFF; - --blend-highlight-color: #FFF; - - // Content / Text - - --content-text: color-mix(in oklab, var(--text), var(--blend-text-color) 20%); - - //--inverted-text: filter:invert(1) - - // Foregrounds - - --muted-text: color-mix(in oklab, var(--text), var(--blend-text-color) 35%); - - --foreground-text: color-mix(in oklab, var(--text), var(--blend-text-color) 35%); - - --foreground-primary: color-mix(in oklab, var(--primary), var(--blend-text-color) 35%); - - --foreground-background: color-mix(in oklab, var(--background), var(--blend-back-color) 15%); - - --foreground-secondary: color-mix(in oklab, var(--secondary), var(--blend-back-color) 30%); - - --foreground-accent: color-mix(in oklab, var(--accent), var(--blend-text-color) 35%); - - --foreground-destructive: color-mix(in oklab, var(--destructive), var(--blend-back-color) 15%); -} -``` - -## Components - -Akatsuki has a decent amount of components as: switches, headers, navs, buttons, accordions, drropdowns and cards. - -To create them, the user must follow some "rules", because the css is very specific to avoid conflict with others selectors. - -### Switch - -```html - -``` - -- class variants: ```.squished and .squared``` - -### Accordion - -```html -
- Accordion - -

Accordion Text

-
-``` - -### Select - -```html - -``` - -### Dropdown - -```html -
- Dropdown - - -
-``` - -### Header with Nav - -```html -
- - - - - -
-``` - -- class variants: ```.sticky``` - -In this case the nav and the header are together, but you can use them separately. - -### Hero - -```html -
-

Yonaka

-

the best framework in the world

- -
- - -
-
-``` - -Variables: + ``` -```css -.hero { - --bg-img-url: url(https://images.unsplash.com/photo-1528353518104-dbd48bee7bc4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1332&q=80); - --bg-img-size: cover; - --bg-img-repeat: no-repeat; - --bg-img-pos: center; -} -``` +### NPM -A div with the clas wraps everything, you can pass the --bg-img-url to change the background as you please in the inline css or in another stylesheet above in the cascade. +1. Execute no seu terminal `npm i -D yonaka` -___ +* Se desejar ver o que será baixado, vá para NPM -[playground](https://codepen.io/Vattghern203/pen/XWOpQgw?editors=1100) +**Observação:** \ No newline at end of file diff --git a/README.md b/README.md index 3bafe43..3b7f3b3 100644 --- a/README.md +++ b/README.md @@ -13,18 +13,66 @@ Akatsuki CSS is a flexible and highly customizable CSS framework with a wide ran To get started with Akatsuki-CSS, follow these steps: -1. [Download](https://www.npmjs.com/package/yonaka) on NPM, clone the repository or use the [Jsdelivr](https://www.jsdelivr.com/package/npm/yonaka). +### JsDelivr -2. Add the `akatsuki.css` file to your project by importing it on your global CSS file. -```css -@import "node_modules/akatsuki-css/akatsuki.css" -``` +1. Go to the [JsDelivr](https://www.jsdelivr.com/package/npm/yonaka) website +2. Copy the HTML tag or just the URL +3. Add it to your code -or in the HTML +* HTML -```html - -``` + ```html + + + + + + Cool Example 😎 + + ``` + +* CSS + + ```css + @import url("https://cdn.jsdelivr.net/npm/yonaka/dist/yonaka.min.css"); + + /*Overwrite Stuff Here*/ + + :root { + --background: tomato; + } + ``` + +### NPM + +1.Run this in your terminal ```npm i -D yonaka``` +* If you want to see what you will download go to [NPM](https://www.npmjs.com/package/yonaka) + +2. Import the Akatsuki-CSS in your code(same as the JsDelivr option) + +* HTML + + ```html + + + + + + Cool Example 2 😎 + + ``` + +* CSS + + ```css + @import url("node_modules/yonaka/yonaka.css"); + + /*Overwrite Stuff Here*/ + + :root { + --background: rebeccapurple; + } + ``` **Note:** remember to follow the cascade if you want to rewrite some styling. @@ -38,12 +86,12 @@ or in the HTML - Or you can use the inheritance on the parent selector; -**Note=** I personally recommend creating your own stylesheet and import it below the Akatsuki one in your HTML. +**Note:** I personally recommend creating your own stylesheet and import it below the Akatsuki one in your HTML. -### Global Scoped Variables +### Design Systen Variables -#### Overview +#### Global Scoped Some of the variables used in the project can be accessed by any element in the markup, allowing them to be rewrite for specific needs. @@ -52,7 +100,7 @@ Some of the variables used in the project can be accessed by any element in the // GLOBAL SCOPED VARS --roundness: auto; // The border-radius to everything - --spacing: .8rem; // the spacing between elements + --spacing: var(--md); // the spacing between elements --spacing-y: auto; --spacing-x: auto; --jump: .4rem; // the jump value between elements @@ -60,17 +108,26 @@ Some of the variables used in the project can be accessed by any element in the --width: auto; // the witdth of an element --height: auto; // the height of an element + --main-container-size: 80dvw; + --min-layou-size: 20rem; + + --spacing-between-sections: var(--lg); + // SPACING VARS --------------------------------- - --xxs: .2rem; // 0.5 Extra Extra Small - --xs: .4rem; // 1.0 Extra Small - --sm: .8rem; // 2.0 Small - --md: 1.6rem; // 4.0 Medium - --lg: 3.2rem; // 6.0 Large - --xl: 6.4rem; // 8.0 Extra Large - --hg: 12.8rem; // 10.0 Huge + --sl: calc(var(--base) / 10); + --3xs: calc(var(--base) / 8); + --xxs: calc(var(--base) / 6); // 0.5 Extra Extra Small + --xs: calc(var(--base) / 4); // 1.0 Extra Small + --sm: calc(var(--base) / 2); // 2.0 Small + --md: var(--base); // 4.0 Medium AKA default + --lg: calc(var(--base) * 2); // 6.0 Large + --xl: calc(var(--base) * 4); // 8.0 Extra Large + --xxl: calc(var(--base) * 6); + --3xl: calc(var(--base) * 8); // 10.0 Huge + --hg: calc(var(--base) * 10); - // COLOR PALETTE --------------------------------- + // COLOR PALETTE (Default) --------------------------------- --text: #d9e5f7; --background: #03070d; @@ -78,18 +135,26 @@ Some of the variables used in the project can be accessed by any element in the --secondary: #081426; --accent: #296cd1; - // Color created with the palette + // BORDERS, OUTLINES, BOX-SHADOWS - --destructive: #772626; + --border: var(--border-md); + --outline: var(--outline-sm); + --box-shadow: var(--shadow-md); // Blend Colors - --blend-text-color: #000; - --blend-back-color: #FFF; - --blend-highlight-color: #FFF; + --blend-text-color: #000; // Color that blend with texts + --blend-back-color: #FFF; // Color that blend with bg colors + --blend-highlight-color: #FFF; // Color the enhance visibility - - // BREAKPOINTS --------------------------------- + // Color Mix + + --color-mix-method: var(--color-method-in-oklab); + + --muted-blend-intensity: 45%; + --foreground-blend-intensity: 15%; + + // BREAKPOINTS ------------------------------------------------ --bp-sm: 40em; --bp-md: 48em; @@ -98,25 +163,48 @@ Some of the variables used in the project can be accessed by any element in the // TYPOGRAPHY --------------------------------- - --font-family: system-ui, 'Inter', 'Roboto'; + --font-sans-serif: 'Inter', system-ui, 'Roboto', Poppins, Monstserrat, 'Open Sans', Lato, Nunito, sans-serif; --font-weight: 400; --font-size: 1.6rem; - --line-height: 1.15; + --line-height: 1.5; } -// LIGHT THEME +// THEMES ----------------------------------------------------- -[data-theme="light"] { - --text: #081426; - --background: #f3f6fc; - --primary: #8cb1e8; - --secondary: #d9e5f7; - --accent: #2e71d6; +@media (prefers-color-scheme: light) { + :where(:root, html, [data-theme=light]) { + --text: #081426; + --background: #f3f6fc; + --primary: #8cb1e8; + --secondary: #d9e5f7; + --accent: #2e71d6; + } +} + +@media (prefers-color-scheme: dark) { + :where(:root, html, [data-theme=dark]) { + --text: #d9e5f7; + --background: #03070d; + --primary: #173c73; + --secondary: #081426; + --accent: #296cd1; + } +} +``` + +#### Private Scope - --blend-text-color: #FFF; - --blend-back-color: #000; - --blend-highlight-color: #000; +They're variables that only has effect on itself and it's children. + +You can use global scoped vars and changes it. + +```css +:where(:root, html) { + --_bg: var(--background); + + --_border: var(--border); /* Using the default border from global scope */ + --border-style: dotted; } ``` @@ -147,9 +235,155 @@ I've create a pattern that works like this. ``` -#### List of customizable variables +#### List of customizable utiliyu variables + +* some examples(_Experimental_) 👨‍🔬 + +```css +:where(:root, html, *, *::after, *::before) { + + // OUTLINE --------------------------------------------------- + + --offset-min: 0rem; // Minimal value possible + --offset-sm: 1rem; + --offset-md: 1.25rem; + --offset-lg: 1.50rem; + --offset-hg: 1.75rem; + + // Offset Base + + --outline-offset: var(--offset-md, 1.25rem); + + // Offset Customization + + --outline-color: var(--accent); + --outline-style: solid; + + + --outline-sm: .1rem var(--outline-style) var(--outline-color); + --outline-md: .2rem var(--outline-style) var(--outline-color); + --outline-lg: .4rem var(--outline-style) var(--outline-color); + + // Base + + --outline: var(--outline-md); + + // BORDER ------------------------------------------------------ + + --border-color: var(--accent); + --border-style: solid; + + --border-sm: .1rem var(--border-style) var(--border-color); + --border-md: .2rem var(--border-style) var(--border-color); + --border-lg: .4rem var(--border-style) var(--border-color); + --border-hg: .6rem var(--border-style) var(--border-color); + + // Base -_in progress_ + --border: var(--border-sm); + + // BOX SHADOW -------------------------------------------------- + + /* Small variant */ + --box-shadow-xs: 0 .1rem .2rem rgba(0, 0, 0, 0.08); + + /* Regular shadow (same as the provided --box-shadow-sm) */ + --box-shadow-sm: 0 .2rem .4rem rgba(0, 0, 0, 0.1); + + /* Larger variant */ + --box-shadow-lg: 0 .4rem .8rem rgba(0, 0, 0, 0.1); + + /* Extra large variant */ + --box-shadow-xl: 0 .8rem 1.6rem rgba(0, 0, 0, 0.15); + + /* Double extra large variant */ + --box-shadow-2xl: 0 1rem 2rem rgba(0, 0, 0, 0.2); + + // Base -------------------------- + + --box-shadow: var(--box-shadow-sm, 0 .2rem .4rem rgba(0, 0, 0, 0.1)); + + // Z-INDEX ----------------------------------------------------- + + --index-nav: 900; + --index-popup: 999; + --index-backtap: -1; + --index-back: 20; + --index-hidden-back: -20; + + --z-index: var(--index-back, 20); + + // EFFECTS ----------------------------------------------------- + + --effect-bright-level: var(--_effect-level, 150%); + --effect-bright: brightness(var(--effect-bright-level)); + + // TRANSITIONS ------------------------------------------------- + + --transition-props-colors: + background-color, + border-color, + color, + fill, + outline-color, + text-decoration-color; + + --transition-props-motion: + transform, + rotate, + scale, + zoom; + + --transition-props-sizes: + height, + max-height, + max-width, + min-height, + min-width, + width; + + --transition-props-filter: filter, backdrop-filter; + + --transition-props-effect: opacity, box-shadow; + + --transition-props-all: all; + + --transition-props: unset; + + // EASE CURVES -------------------------------------------- + + --transition-ease: ease; + --transition-ease-in: ease-in; + --transition-linear: linear; + --transition-ease-in-out: ease-in-out; + + // Custom Easing (Cubic Bezier) + + --transition-middle-break: cubic-bezier(0, .82, 1, .21); + --transition-out-back: cubic-bezier(0.68, -0.6, 0.32, 1.6); + --transition-out-circle: cubic-bezier(0.85, 0, 0.15, 1); + --transition-friction: cubic-bezier(0, 1.46 ,1 ,-0.29); + + // My own creation 👨‍🔬 + + --transition-delay-in: cubic-bezier(.13, 0, 1, .13); + --transition-jump-the-gun: cubic-bezier(.1, .65, .65, .9); + --transition-samurai-cut: cubic-bezier(0, 1.51, 1, 1.88); + --transition-time-reversal: cubic-bezier(0.71, 1.7, 0.76, -0.49); + + --transition-time-ssl: 2s; // Super Slow + --transition-time-sl: .8s; // Slow + --transition-time-md: .4s; // Medium + --transition-time-ft: .2s; // Fast + + + // TRANSITION DELAY ------------------------------------------ + + --transition-delay-short: .1s; /* Short delay */ + --transition-delay-normal: .3s; /* Normal delay */ + --transition-delay-long: .6s; /* Long delay */ +} +``` ##### Customizing colors @@ -242,6 +476,34 @@ To create them, the user must follow some "rules", because the css is very speci **Note:** Follow the structure of the HTML or just copy it. +### Inputs + +Some inputs is needed to be inside a label and has the for attribute pointing for it's id + +* Ex: file, color, dates, radio, checkbox, range + +### Card + +```html +
+ a japanese landscape +

image card

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto quas blanditiis.

+
+``` + +### Buttons + +```html + + + + + +``` + ### Switch ```html @@ -332,10 +594,63 @@ Same as the Accordion, use the open attribute to make it be opened at start. In this case the nav and the header are together, but you can use them separately. +### Accordionn Gallery + +```html +
+ +
+ Japan +
Japan
+ +
+
+ China +
China
+
+ +
+ Korea +
Korea
+
+ +
+ Taiwan +
Taiwan
+
+ +
+``` + +### Scroll Gallery(Pinterest Style) + +```html +
+ + Tokyo + Kyoto + Osaka + Nara + Sapporo + Hiroshima + Yokohama + Fukuoka + Nagoya + Kobe + Sendai + Kawasaki + Saitama + Okayama +
+``` + + +You can add many more images. Lazy loading is recommended. + ### Hero ```html -
+

Yonaka

the best framework in the world

@@ -346,18 +661,38 @@ In this case the nav and the header are together, but you can use them separatel
``` +### Modal + +```html + +
OPA
+ +

lorem

+ +
OMG
+ + + +``` + +The ID must match the onclick function + +* tip: Avoid using kebab-case 💀 + Variables: ```css .hero { - --bg-img-url: url(https://images.unsplash.com/photo-1528353518104-dbd48bee7bc4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1332&q=80); - --bg-img-size: cover; - --bg-img-repeat: no-repeat; - --bg-img-pos: center; + --_bg-img-url: url(https://images.unsplash.com/photo-1528353518104-dbd48bee7bc4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1332&q=80); + --_bg-img-size: cover; + --_bg-img-repeat: no-repeat; + --_bg-img-pos: center; } ``` -A div with the clas wraps everything, you can pass the --bg-img-url to change the background as you please in the inline css or in another stylesheet above in the cascade. +A div with the class wraps everything, you can pass the --_bg-img-url to change the background as you please in the inline css or in another stylesheet above in the cascade. ___ diff --git a/index.html b/index.html index a6ed76c..f16f246 100644 --- a/index.html +++ b/index.html @@ -43,7 +43,7 @@ -
+

Yonaka

@@ -65,7 +65,7 @@

Welcome to Yonaka

What is it?

-

It's a TCC for my Computer Sciece Course

+

It's a mix of several other ideas combined in one, trying to

diff --git a/package.json b/package.json index 9f72808..770a7f4 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "yonaka", "description": "A easily customizable css framework", - "version": "1.1.21", + "version": "1.1.22", "main": "dist/yonaka.css", "devDependencies": { "anymatch": "^3.1.3",