This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| class MyComponent extends HTMLElement { | |
| static register(tagName) { | |
| if ("customElements" in window) { | |
| customElements.define(tagName || "my-component", MyComponent); | |
| } | |
| } | |
| constructor() { | |
| super(); | |
| } |
polarbirke
/ font-stacks.css
Created
May 14, 2024 13:16
— forked from don1138/font-stacks.css
CSS Modern Font Stacks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Modern Font Stacks */ | |
| /* System */ | |
| font-family: system, -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif; | |
| /* System (Bootstrap 5.2.0) */ | |
| font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; | |
| /* Times New Roman-based serif */ | |
| font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <figure x-data="alpine.filter()"> | |
| <div class="padding-double"> | |
| <h2 class="u-text-center u-text-tight"> | |
| <span class="u-text-monospace u-block u-text-bigger">:pseudo-conference 2020</span> | |
| Schedule | |
| </h2> | |
| <form class="margin-top" @submit="preventDefault();"> | |
| {% set filters = [ | |
| { category: 'Day', options: ['Monday', 'Tuesday'] }, | |
| { category: 'Track', options: ['a11y', 'CSS', 'Jamstack', 'Privacy'] }, |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $page-max-width: 1170px; | |
| $unit: 30px; | |
| $screen-xs: 480px !default; | |
| $screen-sm: 768px !default; | |
| $screen-md: 992px !default; | |
| $screen-lg: 1200px !default; | |
| $navigation-breakpoint: 1140px !default; // ergibt sich aus Umbruchbeginn der Hauptnavigationspunkte |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body .foo { | |
| & + & { | |
| color: blue; | |
| } | |
| } |
polarbirke
/ focus.scss
Last active
August 31, 2020 16:21
Sass Mixin for focus stiles with :focus-visble via the WICG polyfill
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @mixin focus( | |
| $focus-color: null, | |
| $focus-not-visible-color: null, | |
| $focus-bg-color: null, | |
| $focus-not-visible-bg-color: null, | |
| $text-decoration: null, | |
| $focus-not-visible-text-decoration: null, | |
| $focus-outline: null, | |
| $focus-outline-offset: null | |
| ) { |
polarbirke
/ eleventy-plugin-imgdimensions.js
Created
May 8, 2020 12:40
11ty (eleventy) plugin to automagically inject image height and width attributes
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * eleventy-plugin-imgdimensions | |
| * | |
| * Totally stolen from https://github.com/liamfiddler/eleventy-plugin-lazyimages | |
| * but with a lot less features; this tiny version only injects width and height | |
| * attributes to img tags! | |
| * | |
| * - NO srcset support! | |
| * - NO lazyloading! | |
| * - NO placeholders! |
polarbirke
/ create-itcss-folders-and-files.sh
Last active
October 15, 2019 15:11
Legt die wf-ITCSS-Ordnerstruktur mit Dateien und einer skeleton screen.scss an.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #!/bin/bash | |
| mkdir 00_settings | |
| cat > 00_settings/_colors.scss << EOF | |
| /* Color Scaffolding | |
| -------------------------------------- */ | |
| /// Brand colors | |
| /// e.g. $young-blue: #009add; | |
| /// Util colors |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # Browsers that we support: | |
| # - Browsers that achieve at least 0.25% market share in Germany | |
| # - the last 2 versions of all known browsers | |
| >0.25% in DE or last 2 version |
polarbirke
/ Projekt-Maintenance
Last active
February 22, 2019 14:23
— forked from mpdude/gulpfile.js
Gulp für Assetic-Veteranen
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Maintenance-Helfer in einem bestehenden Projekt: | |
| // • Wechsel: gulp-minify-css (deprecated) -> gulp-clean-css | |
| // • Wechsel: gulp-uglifyjs (deprecated) -> gulp-uglify ersetzt | |
| // • Wechsel: gulp-css-rebase-urls -> gulp-css-url-rebase | |
| // • Wechsel: autoprefixer-core -> autoprefixer | |
| // • Neu: gulp-sourcemaps | |
| // • evtl. neu: uglify-save-license | |
| npm install gulp-clean-css gulp-uglify gulp-sourcemaps autoprefixer gulp-css-url-rebase uglify-save-license --save | |
| npm uninstall autoprefixer-core gulp-minify-css gulp-uglifyjs gulp-css-rebase-urls --save |