{"id":15065707,"url":"https://github.com/nickrigby/silc","last_synced_at":"2025-08-24T09:11:04.512Z","repository":{"id":57359541,"uuid":"87499440","full_name":"nickrigby/silc","owner":"nickrigby","description":"Simple Intuitive Library of Components for Web Developers","archived":false,"fork":false,"pushed_at":"2018-09-10T03:15:52.000Z","size":358,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-04-14T06:13:30.989Z","etag":null,"topics":["html-components","javascript","sass-variables","typescript","webpack2"],"latest_commit_sha":null,"homepage":"https://silc.io","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/nickrigby.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-04-07T03:14:36.000Z","updated_at":"2020-06-07T13:33:20.000Z","dependencies_parsed_at":"2022-09-06T22:22:27.753Z","dependency_job_id":null,"html_url":"https://github.com/nickrigby/silc","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nickrigby%2Fsilc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nickrigby%2Fsilc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nickrigby%2Fsilc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nickrigby%2Fsilc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nickrigby","download_url":"https://codeload.github.com/nickrigby/silc/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243806189,"owners_count":20350800,"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":["html-components","javascript","sass-variables","typescript","webpack2"],"created_at":"2024-09-25T00:46:00.480Z","updated_at":"2025-03-16T00:18:10.958Z","avatar_url":"https://github.com/nickrigby.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# silc\n\nSilc is a **S**imple, **I**ntuitive, **L**ibrary of **C**omponents for web developers. Unlike other \"frameworks\", silc is intentionally bare bones, focusing on functionality over uneccessary styles that you end up overriding later. Silc features purposeful and semantic HTML, minimal \"vanilla\" JavaScript, and SASS variables for easy customization. Silc includes the following modules:\n\n - [silc core](https://github.com/nickrigby/silc-core)\n - [silc grid](https://github.com/nickrigby/silc-grid)\n - [silc accordion](https://github.com/nickrigby/silc-accordion)\n - [silc nav](https://github.com/nickrigby/silc-nav)\n - [silc offcanvas](https://github.com/nickrigby/silc-offcanvas)\n - [silc utilities](https://github.com/nickrigby/silc-utilities)\n\n## Installation\nAfter downloading silc, dependencies need to be installed with [yarn](https://yarnpkg.com/lang/en/docs/install/) or [node](https://docs.npmjs.com/getting-started/installing-node).\n\n`npm install` or `yarn install`\n\n## Development\nSilc includes [Fractal](http://fractal.build) for component based development. Your own components can be added to the `src/components` folder. Static assets such as JavaScript, CSS and images will be served out of the `build` folder, but can also be configured to your specific needs by editing the [fractal.js file](fractal.js). For more information, read the [fractal guide](http://fractal.build/guide).\n\nTo start the fractal development server:\n\n`npm run fractal` or `yarn fractal`\n\nReferencing images from within your component handlebars templates:\n\n```html\n\u003cimg src=\"{{path '/img/image.png'}}\" alt=\"\"\u003e\n```\n\n### Watch mode\nIf you do not wish to use Fractal, or simply want to watch for changes without launching a development server, you can run the watch command:\n\n`npm run watch` or `yarn watch`\n\n### Webpack server\nIf you do not wish to use Fractal in development at all, you can use the webpack development server:\n\n`npm run serve` or `yarn serve`\n\n## Building for production\nTo build your code for production, run the following:\n\n`npm run build:production` or `yarn build:production`\n\nThis will generate `build` and `fractal` folders at the root of your project. The `build` folder contains all of your compiled assets (CSS, JavaScript etc.), while the `fractal` folder contains a static generated version of your Fractal component library, which can be used for previews and an online reference to your component library. See the [Clearleft Fractal Library](http://fractal.clearleft.com) as an example.\n\n## Overriding styles\nEach silc module contains a number of default SASS variables that can be easily overridden by adding the variable to the [silc/_overrides.scss file](src/scss/silc/_overrides.scss). For example, to add your own breakpoints, you would create the following variable in the overrides file:\n\n```scss\n$silc-core--breakpoints: (\n    ('sm', '(min-width:400px)'),\n    ('md', '(min-width:600px)'),\n    ('lg', '(min-width:1000px)'),\n    ('xl', '(min-width:1400px)')\n);\n```\n\n## Extending classes\nSome silc modules contain JavaScript classes that can be easily extended for your own needs. To extend a class, you need to import the class and then remove the call to the original module init function e.g. `silcOffcanvasInit`\n\n```javascript\nimport { SilcOffcanvas } from 'silc-offcanvas';\nclass MyOffcanvas extends SilcOffcanvas {\n\n    constructor(el) {\n        super(el);\n    }\n\n    protected toggle(event) {\n        super.toggle(event); // Call parent toggle function\n        console.log('Toggle!'); // Your own functionality\n    }\n\n}\n```\n\nYou can then write your own init function to apply your new class to the appropriate elements.\n```javascript\n[].forEach.call(document.querySelectorAll('.silc-offcanvas__trigger'), el =\u003e {\n    new MyOffcanvas(el);\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnickrigby%2Fsilc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnickrigby%2Fsilc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnickrigby%2Fsilc/lists"}