Some time ago I decided to redesign my personal website and remove things like wordpress. Since I'm aobsessed with speed and optimization while enabling maximum flexibility with my code I decided to...
- use a static site generator
- write my own framework and not use things like bootstrap
If you're interested in Pattern Libraries or Design Systems like me, you could use this repository to build your own pattern lib. Just fork it and use it as a starting point and extend it to adopt your needs.
The only things you need to edit are the contents in the folder
Opening this folder, you might notice, there are folders using the ITCSS-Names (prefixed with numbers to reflect the hierarchy).
- 1-settings (does not exist)
- 2-tools (does not exist)
- 3-generic (does not exist)
- themes (not ITCSS but used to edit some styles for the documentation)
In any of these folders (except "themes"), there are the files needed for the documentation.
- used to generate the previews and code-snippets
- add some description to your code
All content in these folders are automatically grouped on one page.
The sidebar is dynamically filled with links which link to the equivalent parts on the page (using IDs). Names in the sidebare come from the equivalent directory-name so no Front Matter data is used here. Keep that in mind, when choosing names.
The CSS is prefixed so we can mix it with other frameworks and identify the classes later on. You can change the pprefix in
src/assets/scss/1-settings/variables. But keep in mind, that you need to change the class-names in the html too. Search for
sdi-and replace it with a name you like best.
I'm using gulp as a task runner so you need node.js and gulp.
- just install node.js
- and run
npm installin the project directory
Here's a list of available tasks
gulp serveruns eleventy and starts the watcher
gulp updatelints and recompiles CSS & JS. Calls the copy-function too
gulp buildruns eleventy and all build tasks without starting it
gulp copyto copy required files (normally not required to run manually)
gulp lintlints your scss using stylelint (it's very strict)
gulp build:cssrebuilds the CSS
We're using prism.js to highlight the code. The nesseccary files are included in this repository. If you want to change the styling head to https://prismjs.com/ and download the files you want. After that place them in
src/assets/3rdparty/prism and run