{"id":15041344,"url":"https://github.com/hsnaydd/buttono","last_synced_at":"2025-04-04T20:07:26.079Z","repository":{"id":29514679,"uuid":"121897994","full_name":"hsnaydd/buttono","owner":"hsnaydd","description":"A flexible Sass mixin for creating BEM-style buttons.","archived":false,"fork":false,"pushed_at":"2025-03-10T23:22:19.000Z","size":3816,"stargazers_count":89,"open_issues_count":5,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-28T03:06:43.496Z","etag":null,"topics":["bem","button","css","front-end","frontend","mixins","sass","sass-mixins","scss","scss-mixins"],"latest_commit_sha":null,"homepage":"https://hsnaydd.github.io/buttono","language":"SCSS","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/hsnaydd.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","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":"2018-02-17T22:28:40.000Z","updated_at":"2024-12-13T05:27:32.000Z","dependencies_parsed_at":"2024-04-09T21:47:29.366Z","dependency_job_id":"412d45eb-f5f8-43a4-a3e6-2dc14229732b","html_url":"https://github.com/hsnaydd/buttono","commit_stats":{"total_commits":256,"total_committers":2,"mean_commits":128.0,"dds":0.32421875,"last_synced_commit":"be9fe4a2fd5a6b943179151e528d988dbd7ecf72"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hsnaydd%2Fbuttono","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hsnaydd%2Fbuttono/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hsnaydd%2Fbuttono/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hsnaydd%2Fbuttono/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hsnaydd","download_url":"https://codeload.github.com/hsnaydd/buttono/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247242671,"owners_count":20907133,"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":["bem","button","css","front-end","frontend","mixins","sass","sass-mixins","scss","scss-mixins"],"created_at":"2024-09-24T20:45:59.349Z","updated_at":"2025-04-04T20:07:26.041Z","avatar_url":"https://github.com/hsnaydd.png","language":"SCSS","funding_links":[],"categories":["Libraries and Mixins"],"sub_categories":["Miscellaneous"],"readme":"\u003cp align=\"center\"\u003e\n  \u003cbr\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/hsnaydd/buttono/master/buttono.svg?sanitize=true\" alt=\"Buttono logo\" width=\"300\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003eButtono is a \u003ca href=\"https://sass-lang.com/\"\u003eSass\u003c/a\u003e mixin based on \u003cstrong\u003eBEM\u003c/strong\u003e naming convention. It helps you to create nice buttons in an easy way.\u003c/p\u003e\n\n\u003cbr\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/buttono\"\u003e\u003cimg alt=\"npm version\" src=\"https://img.shields.io/npm/v/buttono.svg\"\u003e\u003c/a\u003e\n  \u003ca href=\"/LICENSE\"\u003e\u003cimg alt=\"Lisence\" src=\"https://img.shields.io/github/license/hsnaydd/buttono.svg\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/hsnaydd/buttono/actions?workflow=CI\"\u003e\u003cimg src=\"https://github.com/hsnaydd/buttono/workflows/CI/badge.svg\" alt=\"Build Status\" style=\"max-width:100%;\"\u003e\u003c/a\u003e\n\u003cp\u003e\n\n------\n\n## Advantages\n\n- Most of the time you will only need one color to create a button.\n- Even though Buttono is following the BEM methodology, you can still use it with all other conventions.\n- The buttons you create with Buttono will look exactly the same in all modern browsers.\n- No need to worry about `focus` styles for accessibility.\n- Thanks to Buttono’s flexible structure you can configure it for any situation.\n\n## Demo\n\n- [https://hsnaydd.github.io/buttono](https://hsnaydd.github.io/buttono)\n- [Codepen Demos](https://codepen.io/collection/AZaJxO)\n\n## Getting Started\n\n```sh\nnpm install buttono --save\n```\n\nor\n\n```sh\nyarn add buttono\n```\n\n## Usage\n\n```scss\n.c-button {\n  // Note that! The exact path will differ depending on your folder structure.\n  @import \"node_modules/buttono/buttono\";\n\n  $buttono-font-family: Helvetica;\n\n  @include buttono-block();\n\n  \u0026--default {\n    @include buttono-style-modifier();\n  }\n\n  \u0026--primary {\n    @include buttono-style-modifier($background-color: lightblue);\n  }\n}\n```\n\n## Documentation\n\n- [Variables](#variables)\n- [Mixins](#mixins)\n  - [Block](#block)\n  - [Style Modifier](#style-modifier)\n\n### Variables\n\n```scss\n\n// Background color lightness on hover for buttons.\n// Type: number\n$buttono-function-factor: -20% !default;\n\n// Background lightness threshold. With this variable, the mixin decides\n// the text color of the button. if the background color lightness is\n// greater than the threshold, the mixin chooses the alternative color.\n// Type: number\n$buttono-background-color-lightness-threshold: 70% !default;\n\n// Font family for button elements.\n// Type: string\n$buttono-font-family: null !default;\n\n// Default background color for `buttono-style-modifier` mixin.\n// Type: color\n$buttono-background-color: #e0e0e0 !default;\n\n// Default Background color on hover.\n// `auto` value means that the mixin generates the background\n// color on hover itself\n// Type: color | auto\n$buttono-background-color-hover: auto !default;\n\n// Default border radius.\n// Type: number\n$buttono-border-radius: 3px !default;\n\n// Default font size.\n// Type: number\n$buttono-font-size: 16px !default;\n\n// Default line-height.\n// Type: number\n$buttono-line-height: (24 / 16) !default;\n\n// Font color for buttons.\n// Type: color\n$buttono-color: #fff !default;\n\n// Alternative font color for buttons.\n// Type: color\n$buttono-color-alt: #333 !default;\n\n// Padding inside buttons.\n// Type: list\n$buttono-padding: 10px 20px !default;\n\n// Border width for buttons.\n// Type: number\n$buttono-border-width: 0 !default;\n\n// Transition duration for buttons.\n// Type: number\n$buttono-transition-duration: 0.4s !default;\n\n// Transition property for buttons.\n// Type: list\n$buttono-transition-property: background-color, color, border-color !default;\n\n// You can specify whether to include \"disabled styles\" through this variable\n// Type: boolean\n$buttono-include-disabled-styles: true !default;\n\n// Opacity for a disabled button.\n// Type: number\n$buttono-opacity-disabled: 0.5 !default;\n\n// You can specify whether to include \"focus styles\" through this variable\n// Type: boolean\n$buttono-include-focus-styles: true !default;\n\n// Default outline width on focus state\n// Type: number\n$buttono-outline-width-focus: 2px !default;\n\n// Default outline style on focus state\n// Type: string\n$buttono-outline-style-focus: dotted !default;\n\n// Default outline color in focus state\n// `auto` value means that the mixin generates the outline color on focus itself\n// Type: color | auto\n$buttono-outline-color-focus: auto !default;\n\n// Default outline offset in focus state\n// Type: string\n$buttono-outline-offset-focus: 1px !default;\n```\n\n### Mixins\n\nWe use these mixins to build the final CSS output of buttono component. You can overwrite the mixins CSS with the parameters described below.\n\n\u003e _if you want to remove any property from the mixin output, pass the argument with `null` value._\n\n#### Block\n\n```scss\n@mixin buttono-block(\n\n  // Transition duration for buttons.\n  // Type: number\n  $transition-duration: $buttono-transition-duration,\n\n  // Transition Property for buttons\n  // Type: list\n  $transition-property: $buttono-transition-property,\n\n  // Border width for buttons\n  // Type: number\n  $border-width: $buttono-border-width,\n\n  // Cursor for buttons\n  // Type: string\n  $cursor: pointer,\n\n  // Font family for buttons\n  // Type: string\n  $font-family: $buttono-font-family,\n\n  // Font size for buttons\n  // Type: number\n  $font-size: $buttono-font-size,\n\n  // Line height for buttons\n  // Type: number\n  $line-height: $buttono-line-height,\n\n  // Padding inside buttons.\n  // Type: number\n  $padding: $buttono-padding,\n\n  // Text align for buttons\n  // Type: string\n  $text-align: center,\n\n  // Vertical align for buttons\n  // Type: string\n  $vertical-align: middle,\n\n  // Display property for buttons\n  // Type: string\n  $display: inline-block,\n\n  // You can specify whether to include \"disabled styles\" through this variable\n  // Type: boolean\n  $include-disabled-styles: $buttono-include-disabled-styles\n) {\n  // ... mixin content ...\n}\n```\n\n#### Style Modifier\n\n```scss\n@mixin buttono-style-modifier(\n  // Background color for button.\n  // Type: color\n  $background-color: $buttono-background-color,\n\n  // Background color on hover for button.\n  // `auto` value means that the mixin generates the background\n  // color on hover itself\n  // Type: color | auto\n  $background-color-hover: $buttono-background-color-hover,\n\n  // Font color for button.\n  // `auto` value means that the mixin decides which color to apply to the button\n  // if the background color lightness is\n  // lower than the threshold, the mixin chooses the normal color,\n  // if not chooses the alternative color.\n  // Type: color | auto\n  $color: auto,\n\n  // Font color for button on hover.\n  // `auto` value means that the mixin decides which color to apply to the button\n  // if the background color hover lightness is\n  // lower than the threshold, the mixin chooses the normal color,\n  // if not chooses the alternative color.\n  // Type: color | auto\n  $color-hover: auto,\n\n  // Border width for buttons.\n  // Type: number\n  $border-width: $buttono-border-width,\n\n  // Border color for buttons.\n  // if you want to remove this propery from mixin output, pass this argument with null value\n  // if the argument value is `undefined` the mixin will set the background color to border color.\n  // Type: color | undefined\n  $border-color: undefined,\n\n  // Border color for buttons on hover.\n  // `undefined` value means that the mixin will set the background color to border color.\n  // `auto` value means that the mixin will generate the background color for hover state\n  // Type: color | undefined | auto\n  $border-color-hover: undefined,\n\n  // Border radius for buttons.\n  // Type: number\n  $border-radius: $buttono-border-radius,\n\n  // Background color lightness threshold\n  // if you want to overwrite the global background color lightness threshold,\n  // pass this argument with the value that you want.\n  // Type: number\n  $background-color-lightness-threshold: $buttono-background-color-lightness-threshold,\n\n  // Opacity for a disabled button.\n  // Type: number\n  $opacity-disabled: $buttono-opacity-disabled\n\n  // You can overwrite the global include-disabled-styles variable with this argument.\n  // Type: boolean\n  $include-disabled-styles: $buttono-include-disabled-styles,\n\n  // Background color for button on disabled status.\n  // `undefined` value means that the background color in disabled state will be the same with the background color in normal state\n  // Type: color | undefined\n  $background-color-disabled: undefined,\n\n  // Border color for button on disabled status.\n  // `undefined` value means that the border color in disabled state will be the same with the background color in normal state\n  // Type: color | undefined\n  $border-color-disabled: undefined,\n\n  // Font color for button on disabled status.\n  // `undefined` value means that the font color in disabled state will be the same with the font color in normal state\n  // Type: color | undefined\n  $color-disabled: undefined,\n\n  // You can specify whether to include \"focus styles\" through this variable\n  // Type: boolean\n  $include-focus-styles: $buttono-include-focus-styles,\n\n  // Outline width on focus state\n  // Type: number\n  $outline-width-focus: $buttono-outline-width-focus,\n\n  // Outline style on focus state\n  // Type: string\n  $outline-style-focus: $buttono-outline-style-focus,\n\n  // Outline color in focus state\n  // `auto` value means that the mixin generates the outline color on focus itself\n  // Type: color | auto\n  $outline-color-focus: $buttono-outline-color-focus,\n\n  // Outline offset in focus state\n  // Type: string\n  $outline-offset-focus: $buttono-outline-offset-focus\n) {\n  // ... mixin content ...\n}\n```\n\n## Browser support\n\nIt does not use any tool for browser support. Using autoprefixer for browser support is up to you. I strongly recommend you consider using [normalize.css](https://necolas.github.io/normalize.css/) to avoid inconsistency.\n\n## Change log\n\nYou can follow the change log from the [Releases page](https://github.com/hsnaydd/buttono/releases).\n\n## Thanks\n\nHuge thanks to [Ali Kemal Akçay](https://dribbble.com/akemal) for his awesome UI design and also thanks to [Erdem Kirmitci](https://dribbble.com/erdemkirmitci) for the beautiful logo.\n\n## License\n\nCopyright (c) 2018-2020  Hasan Aydoğdu. See the [LICENSE](/LICENSE) file for license rights and limitations (MIT).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhsnaydd%2Fbuttono","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhsnaydd%2Fbuttono","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhsnaydd%2Fbuttono/lists"}