{"id":21201890,"url":"https://github.com/devonchurch/fish-tacos","last_synced_at":"2026-04-04T20:33:19.468Z","repository":{"id":57237436,"uuid":"134027817","full_name":"devonChurch/fish-tacos","owner":"devonChurch","description":"A responsive resize system for CSS px values","archived":false,"fork":false,"pushed_at":"2019-01-12T06:06:06.000Z","size":330,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-24T16:32:19.597Z","etag":null,"topics":["css","fluid","helper","javascript","measurements","react","responsive","styled-components","utility"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/devonChurch.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":"2018-05-19T03:58:42.000Z","updated_at":"2019-01-12T06:06:07.000Z","dependencies_parsed_at":"2022-08-26T15:10:54.113Z","dependency_job_id":null,"html_url":"https://github.com/devonChurch/fish-tacos","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devonChurch%2Ffish-tacos","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devonChurch%2Ffish-tacos/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devonChurch%2Ffish-tacos/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devonChurch%2Ffish-tacos/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devonChurch","download_url":"https://codeload.github.com/devonChurch/fish-tacos/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243654511,"owners_count":20325914,"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":["css","fluid","helper","javascript","measurements","react","responsive","styled-components","utility"],"created_at":"2024-11-20T20:11:56.932Z","updated_at":"2025-12-30T22:54:06.853Z","avatar_url":"https://github.com/devonChurch.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Fish Tacos :tropical_fish: :fish: :blowfish:\n\n## What\n\nThis module complements the **react** and **styled-components** libraries to create an API that removes the cognitive load and arduous boilerplate associated with responsive scenarios.\n\n[![Build Status](https://travis-ci.org/devonChurch/fish-tacos.svg?branch=master)](https://travis-ci.org/devonChurch/fish-tacos) [![npm version](https://badge.fury.io/js/fish-tacos.svg)](https://badge.fury.io/js/fish-tacos)\n\n[![depends on styled-components](https://user-images.githubusercontent.com/15273233/40872099-ab686562-669c-11e8-8b7f-0d70f87280cb.png)](https://www.styled-components.com/) [![typescript](https://user-images.githubusercontent.com/15273233/40872275-a61d4660-669f-11e8-8edf-860f1947759f.png)](https://www.typescriptlang.org/) [![code style prettier](https://img.shields.io/badge/code_style-prettier-FF69A4.svg)](https://prettier.io/)\n\n[![commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n## Why\n\nSetting a `min-width` and `max-width` on your elements is a great way to create **fluid** layouts that adhere to **responsive** methodologies.\n\nUnfortunately `min-*` and `max-*` declarations are not supported natively in **CSS** for things like `font-size`, `padding`, `margin`, etc. These properties would benefit greatly from this functionality to help make content more accessible to a wider range of device sizes.\n\n**This module addresses the scenarios where:**\n\n* Users can experience jarring layout reflows as various breakpoints are triggered forcing abrupt changes to **CSS** values.\n\n* Percentage based values _(referencing things like **viewport** or an **element container**)_ can encounter cases where values scale to exaggerated limits _(both **big** and **small**)_ due to the absence of _Minimum_ and _Maximum_ thresholds.\n\n## Demo\n\n[This demo](https://codepen.io/DevonChurch/project/live/AJGJPY/) retro fits several **Bootstrap** components with the fluid resizing system this module offers. Resize the window to see the responsive measurement declarations scale _up_ / _down_ while staying within the limits of their thresholds.\n\n![fish-tacos](https://user-images.githubusercontent.com/15273233/40871976-3008e8d0-669a-11e8-99b1-66955a994286.gif)\n\n## Installation\n\nInstall the module from **NPM** .\n\n```\nnpm install --save fish-tacos\n```\n\nImport the module into your project.\n\n```javascript\nimport ft from \"fish-tacos\";\n```\n\n## Usage\n\nThe API is very simple. Specify the **CSS property** that you want to change and supply a _Minimum_ and _Maximum_ threshold to restrict scaling.\n\nBecause designers like to supply their measurements in **pixel** based units our API uses pixels as the base target and converts them into **REM**'s in the final output. This gives styles an enhanced level of accessibility _(with dynamic font scaling)_ while making **design** and **development** collaboration easier.\n\nThe result is pure, static **CSS**. This means the fluid scaling is based on native browser functionality and therefore performant.\n\n### Basic\n\n```javascript\nft(\"font-size\", [20, 32]);\n```\n\n_The above declaration will create the following vanilla **CSS**:_\n\n```css\nfont-size: 1.25rem;\n\n@media (min-width: 30rem) {\n  font-size: 4.166666666666667vw;\n}\n\n@media (min-width: 48rem) {\n  font-size: 2rem;\n}\n```\n\n### Verbose\n\nIf you want to target a property that uses `top`, `right`, `bottom` and `left` references for more granularity you can use the more verbose permutation below.\n\n```javascript\nft(\"margin\", { top: [30, 60], bottom: [10, 30] });\n```\n\n_The above declaration will create the following vanilla **CSS**:_\n\n```css\nmargin-top: 1.875rem;\n\n@media (min-width: 30rem) {\n  margin-top: 6.25vw;\n}\n\n@media (min-width: 60rem) {\n  margin-top: 3.75rem;\n}\n\nmargin-bottom: 0.625rem;\n\n@media (min-width: 30rem) {\n  margin-bottom: 2.0833333333333335vw;\n}\n\n@media (min-width: 90rem) {\n  margin-bottom: 1.875rem;\n}\n```\n\n### Static\n\nAs of **release 1.2.0** you can now pass in a static *number* or *string* and have it be included as a *non-fluid* measurement :smiley:.\n\n+ **String**: Will be included verbatim.\n+ **Number**: Should be supplied as a **pixel** reference and will be converted to **REM**'s.\n\n```javascript\nft(\"margin\", { top: 50, right: \"auto\", bottom: 20, left: \"auto\" });\n```\n\n_The above declaration will create the following vanilla **CSS**:_\n\n```css\nmargin-top: 3.125rem;\n\nmargin-right: auto;\n\nmargin-bottom: 1.25rem;\n\nmargin-left: auto;\n```\n\n### Consolidation\n\nAs of **release 1.3.0** you can now *consolidate* verbose references that share the same values into a single declaration by comma separating their keys :thumbsup:.\n\n```javascript\nft(\"margin\", { \"top,bottom\": [20, 50], \"right,left\": \"auto\" });\n```\n\n_The above declaration will create the following vanilla **CSS**:_\n\n```css\nmargin-top: 1.25rem;\n\n@media (min-width: 30rem) {\n  margin-top: 4.166666666666667vw;\n}\n\n@media (min-width: 75rem) {\n  margin-top: 3.125rem;\n}\n\nmargin-bottom: 1.25rem;\n\n@media (min-width: 30rem) {\n  margin-bottom: 4.166666666666667vw;\n}\n\n@media (min-width: 75rem) {\n  margin-bottom: 3.125rem;\n}\n\nmargin-right: auto;\n\nmargin-left: auto;\n```\n\n## Example\n\nIntegrating this module into your existing workflow is as easy as swapping out a standard **CSS** _property_ / _value_ declaration for the new API.\n\n```javascript\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport styled from \"styled-components\";\nimport ft from \"fish-tacos\";\n\nconst Heading1 = styled.h1`\n  ${ft(\"font-size\", [30, 50])}\n  ${ft(\"margin\", { top: [30, 60], \"right,left\": \"auto\", bottom: 20 })};\n`;\n\nReactDOM.render(\n  \u003cHeading1\u003eHello World 👋\u003c/Heading1\u003e,\n  document.getElementById(\"app\")\n);\n```\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevonchurch%2Ffish-tacos","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevonchurch%2Ffish-tacos","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevonchurch%2Ffish-tacos/lists"}