{"id":19273976,"url":"https://github.com/rintoj/functional-css","last_synced_at":"2025-10-15T13:07:54.694Z","repository":{"id":57243055,"uuid":"91259573","full_name":"rintoj/functional-css","owner":"rintoj","description":"Lets you seamlessly integrate functional css.","archived":false,"fork":false,"pushed_at":"2017-05-22T08:22:16.000Z","size":3805,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-05T21:07:40.107Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/rintoj.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-14T17:20:59.000Z","updated_at":"2017-05-22T08:02:05.000Z","dependencies_parsed_at":"2022-09-15T00:50:48.073Z","dependency_job_id":null,"html_url":"https://github.com/rintoj/functional-css","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rintoj%2Ffunctional-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rintoj%2Ffunctional-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rintoj%2Ffunctional-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rintoj%2Ffunctional-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rintoj","download_url":"https://codeload.github.com/rintoj/functional-css/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240378873,"owners_count":19792039,"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":[],"created_at":"2024-11-09T20:44:41.808Z","updated_at":"2025-10-15T13:07:49.652Z","avatar_url":"https://github.com/rintoj.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Functional CSS\n\nThis module will let you seamlessly integrate functional css and comes with a dark and light theme.\n\n## Install\n\n```bash\nnpm install functional-css\n```\n\n## Usage\n\n### Webpack with JS ES6 / TypeScript\n```ts\nimport 'functional-css'\n```\n\n### Webpack with ES5\n```js\nrequire('functional-css')\n```\n\n### With CSS/SCSS\n```scss\n@import '~functional-css'\n```\n\n### Without Bundle\n\n```html\n \u003clink href=\"./node_modules/functional-css/dist/index.min.css\" rel=\"stylesheet\" media=\"all\" \u003e\n```\n\n## Integrate with React\n\n```ts\nrequire('functional-css/dist/index.min.css')\n...\nexport class App extends React.Component {\n\n  constructor(props) {\n    super(props)\n    this.state = { theme: 'dark' }\n  }\n\n  switchTheme() {\n    this.setState(state =\u003e ({theme: state.theme === 'dark' ? 'light' : 'dark'}))\n  }\n\n  render() {\n    return \u003cdiv className={`${this.state.theme}`}\u003e\n      \u003ci className=\"ion-ios-color-palette\"\n        onClick={this.switchTheme.bind(this)} /\u003e\n    \u003c/div\u003e\n  }\n}\n```\n\n## Integrate with Angular\n\nAdd css to `.angular-cli.json` under `apps \u003e styles`\n\n```json\n{\n  ....\n  \"apps\": [{\n    ...\n    \"styles\": [\n      ...\n      \"../node_modules/functional-css/dist/index.min.css\",\n    ],\n  }],\n}\n```\n\nTo use color theme add the theme's name to host element\n\n```ts\nimport { Component, HostBinding } from '@angular/core';\n\n@Component({\n  selector: 'app-root',\n  template: `\n    ...\n    \u003ci class=\"ion-ios-color-palette pointer\" (click)=\"switchTheme()\"\u003e\u003c/i\u003e\n  `\n})\nexport class AppComponent {\n  @HostBinding('class') theme = 'dark';\n\n  switchTheme() {\n    this.theme = this.theme === 'dark' ? 'light' : 'dark';\n  }\n}\n```\n\n## Import what's required\n```ts\n// core functional-css classes\nimport 'functional-css/dist/core.min.css'\n\n// light and dark themes\nimport 'functional-css/dist/theme.min.css'\n\n// light theme\nimport 'functional-css/dist/light-theme.min.css'\n\n// dark theme\nimport 'functional-css/dist/dark-theme.min.css'\n```\n\n## Create Your Own Color Theme\n\nThis module comes with the two color themes `dark` and `light`. Define the color name as a class on the `body` tag, then use colors as defined under [Colors Classes](#colors-classes)\n\nYou can define colors themes on your own as below. Colors are defined in pairs. The second color is the contrast color to the first.\n\n```scss\n@import '~functional-css/src/mixins'\n.name-of-the-theme {\n  @include addColor(primary, #2C3336, #d7e3ea);\n  @include addColor(primary-s1, #162029, #abb4bd);\n  @include addColor(primary-s2, #3C4549, #d3dce0);\n  @include addColor(primary-s3, #58656d, #d3dce0);\n  @include addColor(secondary, #fafafa, #4b585f);\n  @include addColor(secondary-s1, #ecf0f3, #4b585f);\n  @include addColor(secondary-s2, #58656d, #ecf0f3);\n  @include addColor(accent, #ffae27, #424242);\n  @include addColor(white, #fff, #000);\n  @include addColor(black, #000, #fff);\n  @include addColor(error, #D02A2B, #fff);\n  @include addColor(success, #29D185, #fff);\n  @include addColor(warning, #ffae27, #424242);\n  @include addColor(divider, #263138);\n}\n```\n## Styles\n\n- [Colors Classes](https://github.com/rintoj/functional-css/blob/master/STYLE_GUIDE.md#colors-classes)\n- [Available Colors](https://github.com/rintoj/functional-css/blob/master/STYLE_GUIDE.md#available-colors)\n- [Transparent Colors](https://github.com/rintoj/functional-css/blob/master/STYLE_GUIDE.md#transparent-colors)\n- [Border Radius](https://github.com/rintoj/functional-css/blob/master/STYLE_GUIDE.md#border-radius)\n- [Border Style](https://github.com/rintoj/functional-css/blob/master/STYLE_GUIDE.md#border-style)\n- [Outline Style](https://github.com/rintoj/functional-css/blob/master/STYLE_GUIDE.md#outline-style)\n- [Border Width](https://github.com/rintoj/functional-css/blob/master/STYLE_GUIDE.md#border-width)\n- [Outline](https://github.com/rintoj/functional-css/blob/master/STYLE_GUIDE.md#outline)\n- [Flexbox](https://github.com/rintoj/functional-css/blob/master/STYLE_GUIDE.md#flexbox)\n- [Font Weight](https://github.com/rintoj/functional-css/blob/master/STYLE_GUIDE.md#font-weight)\n- [Opacity](https://github.com/rintoj/functional-css/blob/master/STYLE_GUIDE.md#opacity)\n- [Image](https://github.com/rintoj/functional-css/blob/master/STYLE_GUIDE.md#image)\n- [Shadow](https://github.com/rintoj/functional-css/blob/master/STYLE_GUIDE.md#shadow)\n- [Text](https://github.com/rintoj/functional-css/blob/master/STYLE_GUIDE.md#text)\n- [Margin](https://github.com/rintoj/functional-css/blob/master/STYLE_GUIDE.md#margin)\n- [Margin Bottom](https://github.com/rintoj/functional-css/blob/master/STYLE_GUIDE.md#margin-bottom)\n- [Margin Left](https://github.com/rintoj/functional-css/blob/master/STYLE_GUIDE.md#margin-left)\n- [Margin Right](https://github.com/rintoj/functional-css/blob/master/STYLE_GUIDE.md#margin-right)\n- [Margin Top](https://github.com/rintoj/functional-css/blob/master/STYLE_GUIDE.md#margin-top)\n- [Margin Horizontal](https://github.com/rintoj/functional-css/blob/master/STYLE_GUIDE.md#margin-horizontal)\n- [Margin Vertical](https://github.com/rintoj/functional-css/blob/master/STYLE_GUIDE.md#margin-vertical)\n- [Padding](https://github.com/rintoj/functional-css/blob/master/STYLE_GUIDE.md#padding)\n- [Padding Bottom](https://github.com/rintoj/functional-css/blob/master/STYLE_GUIDE.md#padding-bottom)\n- [Padding Left](https://github.com/rintoj/functional-css/blob/master/STYLE_GUIDE.md#padding-left)\n- [Padding Right](https://github.com/rintoj/functional-css/blob/master/STYLE_GUIDE.md#padding-right)\n- [Padding Top](https://github.com/rintoj/functional-css/blob/master/STYLE_GUIDE.md#padding-top)\n- [Padding Horizontal](https://github.com/rintoj/functional-css/blob/master/STYLE_GUIDE.md#padding-horizontal)\n- [Padding Vertical](https://github.com/rintoj/functional-css/blob/master/STYLE_GUIDE.md#padding-vertical)\n- [Font Size](https://github.com/rintoj/functional-css/blob/master/STYLE_GUIDE.md#font-size)\n- [Left](https://github.com/rintoj/functional-css/blob/master/STYLE_GUIDE.md#left)\n- [Top](https://github.com/rintoj/functional-css/blob/master/STYLE_GUIDE.md#top)\n- [Right](https://github.com/rintoj/functional-css/blob/master/STYLE_GUIDE.md#right)\n- [Bottom](https://github.com/rintoj/functional-css/blob/master/STYLE_GUIDE.md#bottom)\n- [Stroke Width](https://github.com/rintoj/functional-css/blob/master/STYLE_GUIDE.md#stroke-width)\n- [Line Height](https://github.com/rintoj/functional-css/blob/master/STYLE_GUIDE.md#line-height)\n- [Height](https://github.com/rintoj/functional-css/blob/master/STYLE_GUIDE.md#height)\n- [Max Height](https://github.com/rintoj/functional-css/blob/master/STYLE_GUIDE.md#max-height)\n- [Min Height](https://github.com/rintoj/functional-css/blob/master/STYLE_GUIDE.md#min-height)\n- [Width](https://github.com/rintoj/functional-css/blob/master/STYLE_GUIDE.md#width)\n- [Max Width](https://github.com/rintoj/functional-css/blob/master/STYLE_GUIDE.md#max-width)\n- [Min Width](https://github.com/rintoj/functional-css/blob/master/STYLE_GUIDE.md#min-width)\n- [Utils](https://github.com/rintoj/functional-css/blob/master/STYLE_GUIDE.md#utils)\n- [Overflow](https://github.com/rintoj/functional-css/blob/master/STYLE_GUIDE.md#overflow)\n- [Vertical Align](https://github.com/rintoj/functional-css/blob/master/STYLE_GUIDE.md#vertical-align)\n- [Transition](https://github.com/rintoj/functional-css/blob/master/STYLE_GUIDE.md#transition)\n\n## Contributing\nContributions are very welcome! Just send a pull request. Feel free to contact me or checkout my [GitHub](https://github.com/rintoj) page.\n\n## Author\n\n**Rinto Jose** (rintoj)\n\n### Hope this module is helpful to you. Checkout my other [projects](https://github.com/rintoj) and [articles](https://medium.com/@rintoj). Enjoy coding!\n\nFollow me:\n  [GitHub](https://github.com/rintoj)\n| [Facebook](https://www.facebook.com/rinto.jose)\n| [Twitter](https://twitter.com/rintoj)\n| [Google+](https://plus.google.com/+RintoJoseMankudy)\n| [Youtube](https://youtube.com/+RintoJoseMankudy)\n\n## Versions\n[Check CHANGELOG](https://github.com/rintoj/functional-css/blob/master/CHANGELOG.md)\n\n## License\n```\nThe MIT License (MIT)\n\nCopyright (c) 2017 Rinto Jose (rintoj)\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frintoj%2Ffunctional-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frintoj%2Ffunctional-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frintoj%2Ffunctional-css/lists"}