Jump directly to...
Classnames / Variables
All classnames belonging to this design-system are prefixed, so we can mix it with another framework and distinguish just by looking at the class names. This might become handy. The default-prefix is
sdi- and it is set in
1-settings/variables. Classnames of containers and wrappers can be set there too - but you should propably not change them here to be updateable. They are set with
!default so they are acting as a fallback.
The CSS is structured using BEM and ITCSS - as you might have guessed. All variables are set using
!default, to make copying the Code and customizing it easy. If your comfortable using scss it should be easy for you to overwrite the values with your own vlaues in an additonal file.
We are using classnames with numbers, to reflect percentage-values. e.g.
sdi-layout__item--50 => this item has a width of 50%.
Breakpoints or variations depending on device-width are using classnames like
sdi-center--s. This means, the content is only centered on mobile devices (breakpointname is "s"). The breakpoints are defined in
1-settings/breakpoints and are using the exact same letters.
It's a work in progress...
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