{"id":17845725,"url":"https://github.com/guidevloper/minimalista","last_synced_at":"2025-04-02T15:25:01.144Z","repository":{"id":57297894,"uuid":"177500342","full_name":"GuiDevloper/minimalista","owner":"GuiDevloper","description":"A old-school based library acting minimalist","archived":false,"fork":false,"pushed_at":"2019-04-23T01:01:40.000Z","size":22,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-22T21:15:38.053Z","etag":null,"topics":["library","minimal","module","old-school"],"latest_commit_sha":null,"homepage":"https://npmjs.com/package/minimalista","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/GuiDevloper.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-03-25T02:29:33.000Z","updated_at":"2020-01-05T19:00:01.000Z","dependencies_parsed_at":"2022-09-02T06:30:55.604Z","dependency_job_id":null,"html_url":"https://github.com/GuiDevloper/minimalista","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GuiDevloper%2Fminimalista","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GuiDevloper%2Fminimalista/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GuiDevloper%2Fminimalista/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GuiDevloper%2Fminimalista/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GuiDevloper","download_url":"https://codeload.github.com/GuiDevloper/minimalista/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246839330,"owners_count":20842220,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["library","minimal","module","old-school"],"created_at":"2024-10-27T21:36:46.699Z","updated_at":"2025-04-02T15:25:01.118Z","avatar_url":"https://github.com/GuiDevloper.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eMinimalista\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"npm version\" src=\"https://img.shields.io/npm/v/minimalista.svg\"\u003e\n  \u003cimg alt=\"npm downloads\" src=\"https://img.shields.io/npm/dm/minimalista.svg?label=npm%20downloads\"\u003e\n  \u003cimg alt=\"license\" src=\"https://img.shields.io/npm/l/minimalista.svg\"\u003e\n  \u003cimg alt=\"GitHub file size in bytes\" src=\"https://img.shields.io/github/size/guidevloper/minimalista/index.js.svg?label=github%20module%20size\"\u003e\u003cbr\u003e\n  \u003cimg width=\"540px\" alt=\"Minimalista em extensão do Chrome\" src=\"https://i.pinimg.com/originals/f6/05/74/f60574b4fb1393db4f6843303759af73.gif\"\u003e\n  \u003cbr\u003e\u003cem align=\"center\"\u003eUso da geração de cor contrastante em extensão para Chrome\u003c/em\u003e\n\u003c/p\u003e\n\nA old-school based library acting minimalist\n\n**To read the english version of this document [click here](https://github.com/GuiDevloper/minimalista/blob/master/README_en.md).**\n\n### Uso 1: Com empacotador estilo Webpack\n\nEm seu terminal com [Node](https://nodejs.org/pt-br/) rode o comando [`npm`](https://www.npmjs.com/get-npm):\n\n```\nnpm i minimalista --save-dev\n```\n\nou [`yarn`](https://yarnpkg.com/pt-BR/):\n\n```\nyarn add minimalista --dev\n```\n\nA _flag_ `--save-dev` ou `--dev` é opcional, boa no caso de usar esta biblioteca somente em pré-_build_.\n\n### Uso 2: ```type=\"module\"``` na tag _script_\n\n```html\n\u003cscript src=\"seu_codigo.js\" type=\"module\" charset=\"utf-8\"\u003e\u003c/script\u003e\n```\n\nEste modo evita necessidade de configuração em outras ferramentas, e traz o módulo diretamente no seu código com essa _feature_ do HTML.\u003cbr\u003e\nPorém, ao usar este deve se atentar a [atual compatibilidade da _feature_ nos browsers](https://caniuse.com/#search=JavaScript%20modules%20script%20tag) e sempre servir a página em algum _host_, como _localhost_.\n\n### Importando para o seu código\n\n```javascript\n// seu_codigo.js\n\n// usando empacotador\nvar url_pro_modulo_uso1 = \"minimalista\";\n// usando type=\"module\"\nvar url_pro_modulo_uso2 =\n  \"https://cdn.jsdelivr.net/npm/minimalista@1.1.0/index.min.js\";\nimport {\n  getByTag,\n  getByClass,\n  getById,\n  setStyle,\n  Ajax,\n  widthBody\n} from \"url-pro-modulo-aqui\";\n// necessita string pura, variável não aceitável\n\n```\nObs: A versão 1.0.0 é menor pois não contém a manipulação de cores, lançada na v1.1.0\n\n### Exemplo de Uso Real\n\n```javascript\n// seu_codigo.js\n\n// uso do Ajax\nvar ajaxProfile = Ajax.send(\"./user/data.json\", \"POST\");\najaxProfile.onreadystatechange = function() {\n  if (Ajax.isReady(this)) {\n    var userData = Object.values(\n      JSON.parse(ajaxProfile.responseText)\n    );\n    // getById() + getByClass()\n    // o elemento #user-data de dentro do .profile\n    var userProfile = getById(\"user-data\", getByClass(\"profile\")[0]);\n    // uso do getByTag()\n    // todos os elementos \u003cp\u003e do userProfile\n    var paragraphs = getByTag(\"p\", userProfile);\n    // percorrendo os \u003cp\u003e\n    for (var [p, i] of paragraphs) {\n      // colocando dados em cada\n      p.innerText = userData[i][0];\n      // mudando estilo do \u003cp\u003e dinamicamente\n      setStyle(p, userData[i][1]); // uso do setStyle()\n    }\n  }\n};\n\n// Ao alterar o tamanho da janela\nwindow.addEventListener(\"resize\", function() {\n  // armazena a largura em pixels\n  var screenWidth = widthBody(); // uso do widthBody()\n  // 33% ou 50% da tela\n  var qtdParts = screenWidth \u003e 769 ? 3 : 2;\n  // todos os .grid-item ganham novo tamanho\n  setStyle(\n    getByClass(\"grid-item\"),\n    `width: ${screenWidth / qtdParts};`\n  );\n  // útil quando há conteúdo adicionado dinamicamente\n  // e seus tamanhos envolvem reposicionamento\n});\n```\n\n### Exemplo Real Usando Vue\n\nNeste exemplo o módulo é usado em uma [extensão para Chrome e Firefox](https://github.com/guidevloper/what-have-you-made-today), que muda a página inicial, gerando uma nova cor de texto contrastado com o fundo escolhido pelo usuário.\n\n```javascript\nimport { contrast, getRgb, genColor, minCon } from 'minimalista';\n\nexport default {\n  ...\n  data: function() {\n    return {\n      min: { contrast, getRgb, genColor, minCon }\n    };\n  },\n  methods: {\n    getContrasted: function(bg, color = '191c4c') {\n      const mini = this.min;\n      // armazena contraste dos 2 RGB\n      const contrast = mini.contrast(\n        mini.getRgb(bg),\n        mini.getRgb(color));\n      // If contraste é suficiente de acordo com WCAG20\n      if (contrast \u003e mini.minCon.aa) {\n        return color;\n      } else {\n        // gera nova cor baseada nas atuais\n        const newColor = mini.genColor(\n          mini.getRgb(bg),\n          mini.getRgb(color));\n        // testa do começo\n        return this.getContrasted(bg, newColor);\n      }\n    }\n  }\n};\n```\n\n## Lista de funções\n\nTodas as funções disponíveis, assim como seus parâmetros e retornos, [estão explicadas aqui](https://github.com/GuiDevloper/minimalista/blob/master/functions_list.md).\n\n## Licença\n[MIT](https://github.com/GuiDevloper/minimalista/blob/master/LICENSE)\n\nCopyright (c) 2019, Guilherme Correia\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fguidevloper%2Fminimalista","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fguidevloper%2Fminimalista","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fguidevloper%2Fminimalista/lists"}