{"id":19525712,"url":"https://github.com/maykinmedia/microscope-sass","last_synced_at":"2025-06-22T05:02:06.808Z","repository":{"id":35097016,"uuid":"206353643","full_name":"maykinmedia/microscope-sass","owner":"maykinmedia","description":"Sass microframework for building scoped user interfaces.","archived":false,"fork":false,"pushed_at":"2023-05-11T12:27:29.000Z","size":379,"stargazers_count":4,"open_issues_count":7,"forks_count":0,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-06-22T01:57:35.308Z","etag":null,"topics":["lightweight","microframework","mixins","sass","scss"],"latest_commit_sha":null,"homepage":null,"language":"HTML","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/maykinmedia.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"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":"2019-09-04T15:35:55.000Z","updated_at":"2022-05-10T15:05:55.000Z","dependencies_parsed_at":"2024-06-19T15:24:30.353Z","dependency_job_id":"43a486f6-c6b4-47ab-a103-378ec5fe035e","html_url":"https://github.com/maykinmedia/microscope-sass","commit_stats":{"total_commits":60,"total_committers":4,"mean_commits":15.0,"dds":"0.15000000000000002","last_synced_commit":"8c12920fe9eca7f9b1f0375b7ed5d55a50d3c12d"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"purl":"pkg:github/maykinmedia/microscope-sass","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maykinmedia%2Fmicroscope-sass","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maykinmedia%2Fmicroscope-sass/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maykinmedia%2Fmicroscope-sass/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maykinmedia%2Fmicroscope-sass/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maykinmedia","download_url":"https://codeload.github.com/maykinmedia/microscope-sass/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maykinmedia%2Fmicroscope-sass/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261238881,"owners_count":23128876,"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":["lightweight","microframework","mixins","sass","scss"],"created_at":"2024-11-11T01:06:44.959Z","updated_at":"2025-06-22T05:02:01.792Z","avatar_url":"https://github.com/maykinmedia.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# :microscope: Microscope\n\n\u003e Sass microframework for building scoped user interfaces.\n- [Changelog](https://github.com/maykinmedia/microscope-sass/blob/master/CHANGELOG.md).\n- [Documentation](https://maykinmedia.github.io/microscope-sass/) on github pages.\n\nMicroscope is a microframework with a light footprint (0kb by default) which only applies styling to explicitly selected\nelements* (by you) based on highly configurable defaults.\n\n**0kb footprint**\n\nMicroscope only exposes functions, mixins and variables (so no default styling*). CSS is only generated if needed.\n\n**Explicitly selected elements**\n\nBecause no default styling is present, Microscope works well in combination with existing styling or other libraries.\n\n**Highly configurable**\n\nMicroscope contains a large amount of [settings](https://github.com/maykinmedia/microscope-sass/blob/master/_settings-sample.scss)\n(with sane defaults) which configure the created CSS code. Many settings have variations and/or optional breakpoint\nspecific overrides which allow for more specific configurations. The settings can be specified in a settings file which\nacts as a digital representation of your [style guide](https://en.wikipedia.org/wiki/Style_guide).\n\n\\* With the exception of the `wysiwyg` and `table` mixins, which applies formatting to children automatically (only if\ncalled).\n\n## Install\n\nInstall with [npm](https://www.npmjs.com/)\n\n```sh\nnpm i microscope-sass --save\n```\n\n**Webpack**\n\nTo use Microscope with [webpack](https://webpack.js.org/), install and configure\n[sass-loader](https://webpack.js.org/loaders/sass-loader/).\n\nWebpack style import:\n\n```scss\n@import '~microscope-sass/lib/\u003clibrary\u003e';  // Import single library (recommended).\n@import '~microscope-sass';                // Import everything at once.\n```\n\n**Eyeglass**\n\n_For historic reasons, the Eyeglass import is referenced as \"microscope\" insead of \"microscope-sass\"._\n\nMicrosope supports [Eyeglass](https://www.npmjs.com/package/eyeglass) in which case it can be referenced as \"microscope\".\n\nEygeglass style import:\n\n```scss\n@import 'microscope/lib/\u003clibrary\u003e';  // Import single library (recommended).\n@import 'microscope';                // Import everything at once.\n```\n\n**includePaths**\n\nAdd \"node_modules/\" to the `includePaths` setting of you sass environment.\n\n```js\n...\nincludePaths: [\"node_modules/\"],\n...\n```\n\nincludePaths style import:\n\n```scss\n@import 'microscope-sass/lib/\u003clibrary\u003e';  // Import single library (recommended).\n@import 'microscope-sass';                // Import everything at once.\n```\n\nNote: Further documentations assumes a webpack installation and webpack style imports.\n\n## Usage\n\n**Configuration**\n\nAdjust [settings_sample.scss](https://github.com/maykinmedia/microscope-sass/blob/master/_settings-sample.scss) based on\nyour needs, note that all options are optional and unnecessary options can be omitted and removed.\n\nSave the settings file and make sure to include it as the first file in you main `.scss` entrypoint.\n\n```scss\n@import 'settings';\n```\n\n**Libraries**\n\nMicroscope exposes the following libraries, please refer to their [documentation](https://maykinmedia.github.io/microscope-sass/)\nfunctions, mixins and variables are exposed.\n\n- [animation](https://maykinmedia.github.io/microscope-sass/#animation)\n- [browser](https://maykinmedia.github.io/microscope-sass/#browser)\n- [color](https://maykinmedia.github.io/microscope-sass/#color)\n- [grid](https://maykinmedia.github.io/microscope-sass/#grid)\n- [responsive](https://maykinmedia.github.io/microscope-sass/#responsive)\n- [transform](https://maykinmedia.github.io/microscope-sass/#transform)\n- [typography](https://maykinmedia.github.io/microscope-sass/#typography)\n- [util](https://maykinmedia.github.io/microscope-sass/#util)\n\n**Importing a single library (preferred)**\n\nIn any of your (nested) .scss files, import the libraries you need. The libraries will use your\ncustom settings if set.\n\n```scss\n@import '~microscope-sass/lib/grid';\n```\n\n**Import everything at once**\n\nIt's also possible to import all libraries at once.\n\n```scss\n@import '~microscope-sass';\n```\n\n**Applying styles**\n\nMicroscope is designed to help styling isolated bits of HTML. The recommended use is to target class\nselectors so styles are remain scoped and don't leak out to other places.\n\n```scss\n@import '~microscope-sass/lib/color';\n@import '~microscope-sass/lib/typography';\n\n.header__title {\n    @include h1;\n    @include color-primmary;\n}\n```\n\nA special `wysiwyg` mixin is availabe (via the `typography` library to automatically apply elements\nbased on their tag name. It's recommended to only use this when the internal structure is unknown\n(for instance when styling the output of a wysiwyg editor).\n\n\n```scss\n@import '~microscope-sass/lib/typography';\n\n.wysiwyg {\n    @include wysiwyg;\n}\n```\n\n## Contributing\n\nPull requests and stars are always welcome. For bugs and feature requests, [please create an issue](https://github.com/maykinmedia/microscope-sass/issues).\n\n## Author\n\n**Maykin Media**\n\n* [maykinmedia.nl](https://www.maykinmedia.nl/)\n* [github/maykinmedia](https://github.com/maykinmedia)\n* [twitter/maykinmedia](http://twitter.com/maykinmedia)\n\n## License\n\nCopyright © 2019 [Maykin Media](https://www.maykinmedia.nl/)\nLicensed under the MIT license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaykinmedia%2Fmicroscope-sass","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaykinmedia%2Fmicroscope-sass","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaykinmedia%2Fmicroscope-sass/lists"}