Silc is a Simple, Intuitive, Library of Components 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:
After downloading silc, dependencies need to be installed with yarn or node.
npm install or yarn install
Silc includes Fractal 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. For more information, read the fractal guide.
To start the fractal development server:
npm run fractal or yarn fractal
Referencing images from within your component handlebars templates:
<img src="{{path '/img/image.png'}}" alt="">If 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:
npm run watch or yarn watch
If you do not wish to use Fractal in development at all, you can use the webpack development server:
npm run serve or yarn serve
To build your code for production, run the following:
npm run build:production or yarn build:production
This 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 as an example.
Each silc module contains a number of default SASS variables that can be easily overridden by adding the variable to the silc/_overrides.scss file. For example, to add your own breakpoints, you would create the following variable in the overrides file:
$silc-core--breakpoints: (
('sm', '(min-width:400px)'),
('md', '(min-width:600px)'),
('lg', '(min-width:1000px)'),
('xl', '(min-width:1400px)')
);Some 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
import { SilcOffcanvas } from 'silc-offcanvas';
class MyOffcanvas extends SilcOffcanvas {
constructor(el) {
super(el);
}
protected toggle(event) {
super.toggle(event); // Call parent toggle function
console.log('Toggle!'); // Your own functionality
}
}You can then write your own init function to apply your new class to the appropriate elements.
[].forEach.call(document.querySelectorAll('.silc-offcanvas__trigger'), el => {
new MyOffcanvas(el);
});