{"id":13393346,"url":"https://github.com/suitcss/suit","last_synced_at":"2025-04-10T23:26:04.581Z","repository":{"id":43476196,"uuid":"2609298","full_name":"suitcss/suit","owner":"suitcss","description":"Style tools for UI components","archived":false,"fork":false,"pushed_at":"2022-05-29T08:37:53.000Z","size":1815,"stargazers_count":3801,"open_issues_count":20,"forks_count":229,"subscribers_count":124,"default_branch":"master","last_synced_at":"2024-10-29T15:18:27.161Z","etag":null,"topics":["css","css-packages","postcss","preprocessor","suit-css"],"latest_commit_sha":null,"homepage":"http://suitcss.github.io/","language":"HTML","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/suitcss.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}},"created_at":"2011-10-19T21:38:00.000Z","updated_at":"2024-10-22T15:21:34.000Z","dependencies_parsed_at":"2022-07-10T03:16:55.277Z","dependency_job_id":null,"html_url":"https://github.com/suitcss/suit","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suitcss%2Fsuit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suitcss%2Fsuit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suitcss%2Fsuit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suitcss%2Fsuit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/suitcss","download_url":"https://codeload.github.com/suitcss/suit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248313810,"owners_count":21082919,"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","css-packages","postcss","preprocessor","suit-css"],"created_at":"2024-07-30T17:00:50.794Z","updated_at":"2025-04-10T23:26:04.562Z","avatar_url":"https://github.com/suitcss.png","language":"HTML","readme":"# SUIT CSS\n\n[![Gitter](https://img.shields.io/gitter/room/nwjs/nw.js.svg)](http://gitter.im/suitcss/suit)\n\nStyle tools for component-based UI development.\n\nSUIT CSS provides a reliable and testable styling solution for component-based\nweb application development. The project includes:\n\n* [CSS base styles](https://github.com/suitcss/suit/tree/master/packages/base) for web apps.\n* [CSS utilities](https://github.com/suitcss/suit/tree/master/packages/utils).\n* [CSS components](https://github.com/suitcss/suit/tree/master/packages/components).\n* A [future-facing CSS preprocessor](https://github.com/suitcss/suit/tree/master/packages/preprocessor)\n\nEach of these modules are made up of smaller modules, making it easy to customize\nyour setup and build pipeline.\n\n**[Documentation](doc/README.md)**.\n\n## Quick start\n\nInstall the SUIT package and preprocessor with npm:\n\n```\nnpm install suitcss --save\nnpm install suitcss-preprocessor --save-dev\n```\n\nCreate an `index.css` that will import the SUIT packages. Add values for the\ncustom media queries and any custom properties that you wish to override:\n\n```css\n@import \"suitcss\";\n\n@custom-media --sm-viewport (min-width: 320px) and (max-width: 640px);\n@custom-media --md-viewport (min-width: 640px) and (max-width: 960px);\n@custom-media --lg-viewport (min-width: 960px);\n\n:root {\n  --Grid-gutterSize: 25px;\n}\n```\n\nPackages can also be installed independently for a more modular build:\n\n```\nnpm install suitcss-utils-size suitcss-components-grid --save\n```\n\n```css\n@import \"suitcss-components-grid\";\n@import \"suitcss-utils-size\";\n```\n\nAdd an entry to the `scripts` object in `package.json` that will run the\npreprocessor:\n\n```json\n\"scripts\": {\n  \"build\": \"suitcss index.css build/build.css\"\n}\n```\n\nNow run `npm run build` on the command line to output the built packages to\n`build/build.css`. The preprocessor can also watch for file changes by passing\nthe `-w` flag e.g. `npm run build -- -w`.\n\nRefer to the [SUIT theme](https://github.com/suitcss/suit/tree/master/packages/theme) for a more thorough\nexample.\n\n## Community Packages\n\n### Components\n\n* https://github.com/antontrollback/select\n* https://github.com/giuseppeg/suitcss-toolkit\n* https://github.com/simonsmith/suitcss-components-form-field\n\n### Utilities\n\n* https://github.com/frekyll/suitcss-utils-spacing\n* https://github.com/simonsmith/suitcss-utils-image\n* https://github.com/simonsmith/suitcss-utils-list\n\n## Example\n\nSUIT CSS makes use of variables, custom media queries, and dependency resolution for CSS.\n\nHTML:\n\n```html\n\u003carticle class=\"Excerpt u-cf\"\u003e\n  \u003cimg class=\"Excerpt-thumbnail u-sizeFit\" src=\"{{src}}\" alt=\"\"\u003e\n  \u003cdiv class=\"u-sizeFill\"\u003e\n    \u003ch1 class=\"Excerpt-title\"\u003e\u003ca href=\"{{url}}\"\u003e{{title}}\u003c/a\u003e\u003c/h1\u003e\n    \u003cp class=\"Excerpt-text u-textBreak\"\u003e{{description}}\u003c/p\u003e\n    \u003cspan class=\"Excerpt-readMore\"\u003e\n      \u003c!-- BUTTON COMPONENT --\u003e\n    \u003c/span\u003e\n  \u003c/div\u003e\n\u003c/article\u003e\n```\n\nCSS:\n\n```css\n/** @define Excerpt */\n\n@import \"suitcss-utils-layout\";\n@import \"suitcss-utils-size\";\n@import \"suitcss-utils-text\";\n@import \"./Button\";\n\n/**\n * Content excerpts. Agnostic of image size, and with a clear call to action.\n */\n\n:root {\n  --Excerpt-padding: 20px;\n  --Excerpt-highlightColor: orange;\n}\n\n.Excerpt {\n  padding: var(--Excerpt-padding);\n}\n\n.Excerpt-thumbnail {\n  border: 2px solid var(--Excerpt-highlightColor);\n  border-radius: 3px;\n  margin-right: 10px;\n}\n\n.Excerpt-title {\n  border-bottom: 1px solid #ccc;\n  margin: 0 0 15px;\n  padding-bottom: 5px;\n}\n\n.Excerpt-readMore {\n  display: inline-block;\n  margin-top: 10px;\n}\n```\n\n## CSS packages\n\nEach CSS package can be installed with npm.\nIt's suggested that you depend on individual packages as and when you need\nthem, however, you can install all the CSS packages at once if you prefer:\n\n* [npm](https://www.npmjs.org/): `npm install suitcss`\n\nEach package is stand-alone, contains its own documentation and tests, and is\nwritten to follow a common set of [naming conventions](doc/naming-conventions.md).\n\n* [base](https://github.com/suitcss/suit/tree/master/packages/base/): a thin reset for web apps, built on top of normalize.css.\n* [utils](https://github.com/suitcss/suit/tree/master/packages/utils/): all the utility packages.\n* [components-arrange](https://github.com/suitcss/suit/tree/master/packages/components-arrange/): flexbox-like horizontal arrangements.\n* [components-button](https://github.com/suitcss/suit/tree/master/packages/components-button/): robust, structural button styles.\n* [components-flex-embed](https://github.com/suitcss/suit/tree/master/packages/components-flex-embed/): aspect-ratios for embeds.\n* [components-grid](https://github.com/suitcss/suit/tree/master/packages/components-grid/): a grid foundation.\n* [components-test](https://github.com/suitcss/suit/tree/master/packages/components-test/): structure for visual tests.\n* [theme](https://github.com/suitcss/suit/tree/master/packages/theme/): example theme.\n\nYou can also download pre-built bundles to try things out without setting up a\nbuild process:\n\n* [base bundle](https://github.com/suitcss/base/releases)\n* [utils bundle](https://github.com/suitcss/utils/releases)\n* [components bundle](https://github.com/suitcss/components/releases)\n* [everything bundle](https://github.com/suitcss/suit/releases) (only 4.4KB minified and gzipped)\n\n## Build and test tools\n\nThe [suitcss-preprocessor](https://github.com/suitcss/suit/tree/master/packages/preprocessor) runs CSS\nthrough a build pipeline. It performs per-file tests for conformance to the\nSUIT CSS naming conventions, offers minification and allows additional PostCSS\nplugins to be added. A CLI and Node API are available\n\nThe preprocessor makes use of:\n\n* [PostCSS](https://github.com/postcss/postcss): A tool for transforming styles with JS plugins\n  * [postcss-import](https://github.com/postcss/postcss-import)\n  * [postcss-custom-properties](https://github.com/postcss/postcss-custom-properties)\n  * [postcss-calc](https://github.com/postcss/postcss-calc)\n  * [postcss-custom-media](https://github.com/postcss/postcss-custom-media)\n  * [autoprefixer](https://github.com/postcss/autoprefixer)\n\nPackages are linted with [postcss-bem-linter](https://github.com/postcss/postcss-bem-linter) and minification is provided by [cssnano](http://cssnano.co/).\n\n## Complementary tools and libraries\n\nLibraries / frameworks for component-based development:\n\n* [React](https://facebook.github.io/react/)\n* [Ember.js Components](http://emberjs.com/guides/components/)\n* [AngularJS](https://github.com/angular/angular.js)\n\nTools and dependency managers:\n\n* [npm](https://www.npmjs.org/): package manager.\n* [html-inspector](https://github.com/philipwalton/html-inspector): test HTML templates for SUIT CSS conformance.\n\n## Development\n\nInstall [Node](http://nodejs.org) (comes with npm).\n\nTo generate a build:\n\n```\nnpm run build\n```\n\n## Browser support\n\n* Google Chrome (latest)\n* Opera (latest)\n* Firefox 4+ (28+ for `flex`)\n* Safari 5+ (6.1+ for `flex`)\n* Internet Explorer 9+ (10+ for `flex`)\n\nRefer to the [caniuse](http://caniuse.com/) page for [flexbox](http://caniuse.com/#feat=flexbox).\n","funding_links":[],"categories":["HTML","CSS"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsuitcss%2Fsuit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsuitcss%2Fsuit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsuitcss%2Fsuit/lists"}