{"id":15293229,"url":"https://github.com/awilddevappears/tequila-sass","last_synced_at":"2026-05-02T13:35:30.804Z","repository":{"id":98073869,"uuid":"58385073","full_name":"AWildDevAppears/tequila-sass","owner":"AWildDevAppears","description":"A collection of sass mixins","archived":false,"fork":false,"pushed_at":"2017-10-02T15:49:41.000Z","size":32,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-12-02T01:30:09.283Z","etag":null,"topics":["mixins","sass","sass-mixins","scss","scss-mixins"],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AWildDevAppears.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-05-09T14:57:06.000Z","updated_at":"2017-11-28T23:42:21.000Z","dependencies_parsed_at":"2023-05-23T10:15:08.606Z","dependency_job_id":null,"html_url":"https://github.com/AWildDevAppears/tequila-sass","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/AWildDevAppears%2Ftequila-sass","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AWildDevAppears%2Ftequila-sass/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AWildDevAppears%2Ftequila-sass/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AWildDevAppears%2Ftequila-sass/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AWildDevAppears","download_url":"https://codeload.github.com/AWildDevAppears/tequila-sass/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":236239219,"owners_count":19117150,"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":["mixins","sass","sass-mixins","scss","scss-mixins"],"created_at":"2024-09-30T16:45:07.731Z","updated_at":"2026-05-02T13:35:30.717Z","avatar_url":"https://github.com/AWildDevAppears.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Tequila\n\nIf everyone else can name their sass modules after alcoholic beverages, why don't I\ndo it too?\n\nThe aim of Tequila is to be a 0 weight framework, meaning that if you import it and, if you don't use it,\nit won't add any bloat to your compiled CSS files. Tequila is built to compliment tools like Thoughtboxes Bourbon mixins and Breakpoint,\nbut has no dependency on these whatsoever (unless documented otherwise).\n\n## Whats under the hood?\n\n### Basic mixins\n\n#### Define type scale\n```\n@include define-type-scale((\n    scale: 1.414,\n    base-size: 1,\n    base-weight: 400,\n    line-height: 1.45,\n    rem: true,\n));\n```\nCan be used with or without [math module](https://github.com/sass-eyeglass/eyeglass-math)\nor anything else that defines pow() like Compass.\n\nSet up font scaling on your webapp using http://type-scale.com/\nIf you have a designer, ask them to provide you with a link from this site (if not, grab it yourself) - it should resemble:\nhttp://type-scale.com/?size=16\u0026scale=1.414\u0026text=CSS%20Architecture%20for%20large-scale\u0026webfont=Libre+Baskerville\u0026font-family=gotham\u0026font-weight=400\u0026font-family-headers=\u0026font-weight-headers=inherit\u0026background-color=white\u0026font-color=%23333\nThe options array takes the same parameters as $type-scale, defaults are defined in $type-scale-base;\n\n### Generators\n\n#### Angle\n```\n.class-name {\n    @include angle(after, false, 1.5deg);\n}\n```\nAngle is a mixin for drawing slanted boxes (because svgs are annoying to maintain).\nIt takes 3 parameters, the first is the pseudo selector that the slanted section\nshould be placed onto; before, after or both.\n\nThe second parameter if whether the angle should be flipped or not, depending on\nwhich direction you want the slant to go.\n\nThe third and final parameter is the angle at which you want the slant to go.\n\nThis feature was taken from\n[here](https://viget.com/inspire/angled-edges-with-css-masks-and-transforms)\n\n#### Arrow\n```\n.class-name {\n    @include arrow(up, 10px, red);\n}\n```\nThis mixin is used to draw arrows on blocks, and takes the parameters: the direction:\nwhich way you want the arrow to point (up, down, left or right); the size:\nhow big you want the arrow to be and the color that you want the arrow to be.\n\n#### Color set\n```\n@include color-set(btn, $color-map, true);\n```\nColor set is a mixin for generating a set of something e.g. buttons. The first\nargument is what you want to prepend all of your color scheme classes with (for\nbuttons it could be btn), the second parameter is a map of all of the different\ncolors that this component can be (e.g. ( \"primary\": red, \"secondary\": blue) for\ngenerating \"btn-primary\" and \"btn-secondary classes\"). The third param is whether\nthis block has a hover state, if your component has hover states you will need to\nassign two colors to your map, the first being the neutral state and the second\nbeing the hover state.\n\n### Bullets\n```\nul {\n    @include bullets(circle, 2em, pink);\n}\n```\nUNSTABLE\n\nBullets is a mixin to style bullet points, because CSS does not let us style bullet\npoints easily. With this mixin you can easily style bullet points, changing their color,\nsize and shape simply by changing the three parameters in the mixin.\n\nIt kind of works now, but not 100% reliably.\n\n### Utilities\n\n#### Psuedos\n\n```\n.class-name{\n    ...\n    @include pseudos() {\n        color: red;\n        ...\n    }\n}\n```\nFor applying styles to the hover, focus and active pseudo selectors at the same time.\nStyles for these are placed within the curly braces after the parentheses.\n\n\n#### Selection\n\n```\n@include selection() {\n    color: red;\n    ...\n}\n```\nFor manipulating the visual styling of the `:selection` pseudo element.\n\n\n#### Text hide\n```\n.class-name {\n    @include text-hide();\n    ...\n}\n```\nFor hiding the text within a container\n(good for icons set on backgrounds for screen readers)\n\n#### Hex RGBA\n\n```\n.class-name {\n    background-color: hex-rgba(#eeeeee, .5);\n}\n```\nThis function is for adding alpha to a color that you only have the hex value\nfor.\n\n## Flexcol\n\nInstead of rewriting an entire grid system with fixed sizes (bootstrappy col-md-6 kind of stuff)\nI decided to take a freer approach to the grid system in a similar way to susy\n\nYou can set options for the flex grid to use by overwriting the map called `$full-flex`\nthis holds all of the options for the flex grid itself like gutters and things.\n\n### Flex row\n ```\n    @include flexrow(stretch);\n ```\n`Flexrow` creates a block which displays flex with fallbacks. It also adds negative margin\n around the block. The argument this mixin takes is optional, but if set, changes the flex align of the block\n\n\n### Flex col\n```\n    @include flexcol(1, baseline);\n```\n`Flexcol` sets up an item within a flexrow, the first argument is how much space\nthe block should take up. Setting this to 1 will allow the block to take up 100%\nof the space available to it, meaning that if it is on its own, it will be 100%\nof the width. It also means that if you have two of these blocks,\nthey will take up 50% each, 3 will take up 33.33 respectively, 4, 25% and so on.\n\nYou can also set the first argument to either a percentage or a fraction,\nthis will fix the block to take up this much space and this much space only,\neven if there are no more elements or multiple elements\n\nThe second argument is optional, pass an alignment to set a particular alignment\non this block (uses align-self)\n\n### Flex col at\n```\n    @include flexcol-at(1, 300px, baseline, false);\n```\n\nSoft requires breakpoint\n\nSame old Flexcol, hooked into breakpoints\n\nThe first argument is the same as it was in flexcol, can be 1, a percentage or a\nfraction depending on what you want the col to do, the second argument is the breakpoint,\nas with the other breakpoint mixins you can either pass a breakpoint to this value\nor a max width value. The third argument is your alignment variable,\ndoes exactly the same as the second argument for the normal `flexcol` mixin above\nand is still optional. The final argument is the no breakpoint boolean,\nused for when you do not have the breakpoint library\n\n## Flexbox: in - depth\n\nThe mixins below are for the big features in flexbox\n\n\n### Display flex\n```\n    @include display-flex();\n```\n\nThis one simply sets a block to display flex, use this on the outer row. Flex row uses this\n\n### Display inline flex\n```\n    @include display-inline-flex();\n```\n\nThis one simply sets a block to display inline flex, use this on the outer row.\n\n### Flex direction\n```\n    @include flex-direction(row);\n```\n\nThis changes the direction that the row will use flex, this defaults to row. To\nfind out all of the options, see [this link](https://developer.mozilla.org/en/docs/Web/CSS/flex-direction).\n\n### Flex wrap\n```\n    @include flex-wrap(nowrap);\n```\n\nThis changes whether the row will wrap or not, this defaults to nowrap.\nTo find out all of the options, see [this link](https://developer.mozilla.org/en/docs/Web/CSS/flex-wrap).\n\n### Flex flow\n```\n    @include flex-flow(row nowrap);\n```\n\nFlex flow is a shorthand way of calling flex direction and flex flow\n\nFor more information see [this link](https://developer.mozilla.org/en/docs/Web/CSS/flex-flow).\n\n### Align items\n```\n    @include align-items(stretch);\n```\n\nThis mixin aligns the flex items on the current flex line\n\nFor more information see [this link](https://developer.mozilla.org/en/docs/Web/CSS/flex-align).\n\n\n### Align flex items\n```\n    @include align-flex-items(stretch);\n```\n\nThis mixin aligns a flex container's lines within the flex container when there is extra space on the cross-axis.\n\nFor more information see [this link](https://developer.mozilla.org/en/docs/Web/CSS/align-content).\n\n### Justify content\n```\n    @include justify-content(stretch);\n```\n\nThis mixin aligns a flex container's lines within the flex container when there is extra space on the cross-axis.\n\nFor more information see [this link](https://developer.mozilla.org/en/docs/Web/CSS/align-content).\n\nFor more information see [this link](https://developer.mozilla.org/en/docs/Web/CSS/align-content).\n\n### Flex\n```\n    @include flex(0, 1, 1);\n```\n\nThe flex mixin is a quick way of making flex items, it takes three properties,\nall of which are optional, the 1st is the flex grow property, the second,\nflex shrink and the third, flex basis.\n\nThe flex grow property is the amount of the row you want this item to take up,\nthe flex shrink property states by which factor the block should be shrunk,\nthe flex basis sets the base size of the flex item\n\nFor basic usage of the flex mixin you should be able to get away with not passing\nany arguments to the mixin, for more complex stuff you will need to get to grips\non what the grow, shrink and basis options do\n\nFor more information see [this link](https://developer.mozilla.org/en/docs/Web/CSS/flex)\nand all will be revealed (hopefully).\n\n### Flex order\n```\n    @include flex-order(3);\n```\n\nThis mixin adjusts the position of a flex item, reordering it in the DOM\n\nFor more information see [this link](https://developer.mozilla.org/en/docs/Web/CSS/order).\n\n### Align flex self\n```\n    @include align-flex-self(3);\n```\n\nThis mixin works a lot like `align-flex` except it acts on a single flex item\n\nFor more information see [this link](https://developer.mozilla.org/en/docs/Web/CSS/align-self).\n\n\n## Targeting specific devices\n\nThese are breakpoints for targeting specific devices, for when you have that one device that won't display something on your\nsite correctly. Use these mixins sparingly and don't build your site around them, building a site to work per specific device is\nnever a good idea.\n\n### Target iPhone 4\n\n```\n    @include target-iphone-4(landscape);\n```\n\nThis mixin allows you to target the iPhone 4 and apply styling directly to your site\nwhen it is displayed on this specific device. Specifying orientation ('landscape' or 'portrait') narrows your query to that specific\norientation of device\n\n\n### Target iPhone 5\n\n```\n    @include target-iphone-5(landscape);\n```\n\nThis mixin allows you to target the iPhone 5 and apply styling directly to your site\nwhen it is displayed on this specific device. Specifying orientation ('landscape' or 'portrait') narrows your query to that specific\norientation of device\n\n### Target iPhone 6\n\n```\n    @include target-iphone-6(landscape);\n```\n\nThis mixin allows you to target the iPhone 6 and apply styling directly to your site\nwhen it is displayed on this specific device. Specifying orientation ('landscape' or 'portrait') narrows your query to that specific\norientation of device\n\n### Target iPhone 6+\n\n```\n    @include target-iphone-6-plus(landscape);\n```\n\nThis mixin allows you to target the iPhone 6+ and apply styling directly to your site\nwhen it is displayed on this specific device. Specifying orientation ('landscape' or 'portrait') narrows your query to that specific\norientation of device\n\n### Target Samsung Galaxy S3\n\n```\n    @include target-galaxy-s3(landscape);\n```\n\nThis mixin allows you to target the Samsung Galaxy S3 and apply styling directly to your site when it is displayed on this specific device. Specifying orientation ('landscape' or 'portrait') narrows your query to that specific\norientation of device.\n\n### Target Samsung Galaxy S4\n\n```\n    @include target-galaxy-s4(landscape);\n```\n\nThis mixin allows you to target the Samsung Galaxy S4 and apply styling directly to your site when it is displayed on this specific device. Specifying orientation ('landscape' or 'portrait') narrows your query to that specific orientation of device.\n\n### Target Samsung Galaxy S5\n\n```\n    @include target-galaxy-s5(landscape);\n```\n\nThis mixin allows you to target the Samsung Galaxy S5 and apply styling directly to your site when it is displayed on this specific device. Specifying orientation ('landscape' or 'portrait') narrows your query to that specific orientation of device. This breakpoint also matches the HTC One.\n\n### Target non retina iPads\n\n```\n    @include target-ipad(landscape);\n```\n\nThis mixin allows you to target non-retina iPads, specifically the iPad mini, iPad 1 and iPad 2, and apply styling directly to your site when it is displayed on these specific devices. Specifying orientation ('landscape' or 'portrait') narrows your query to that specific orientation of device.\n\n### Target retina iPads\n\n```\n    @include target-ipad-retina(landscape);\n```\n\nThis mixin allows you to target retina iPads, specifically the iPad 3 and iPad 4, and apply styling directly to your site when it is displayed on this specific device. Specifying orientation ('landscape' or 'portrait') narrows your query to that specific orientation of device.\n\n\n### Target Nexus 7\n\n```\n    @include target-nexus-7(landscape);\n```\n\nThis mixin allows you to target the Nexus 7 and apply styling directly to your site when it is displayed on this specific device. Specifying orientation ('landscape' or 'portrait') narrows your query to that specific orientation of device.\n\n## Other\n\n### Parse font families\n```\n@include parse-font-families($font-1, $font-2, ...)\n```\n\nTakes infinite font families and makes sure they all have at least one fallback.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fawilddevappears%2Ftequila-sass","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fawilddevappears%2Ftequila-sass","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fawilddevappears%2Ftequila-sass/lists"}