Skip to content

Instantly share code, notes, and snippets.

View jensgro's full-sized avatar

Jens Grochtdreis jensgro

79 followers · 55 following
View GitHub Profile
@jensgro
jensgro / sass-cheatsheet.md
Created July 24, 2025 11:57 — forked from fredsiika/sass-cheatsheet.md
A high-level Sass (SCSS) cheatsheet for the most important functionality features of Sass.
@jensgro
jensgro / tailwind_cheatsheet.css
Created April 1, 2025 13:03 — forked from LeCoupa/tailwind_cheatsheet.css
Tailwind CSS CheatSheet --> UPDATED VERSION --> https://github.com/LeCoupa/awesome-cheatsheets
/* *******************************************************************************************
* TAILWIND.CSS
* DOCUMENTATION: https://tailwindcss.com/
* ******************************************************************************************* */
/*
* Available breakpoints
* --------------------
* sm: min-width: 640px;
* md: min-width: 768px;
@jensgro
jensgro / css-selectors.md
Created October 6, 2023 21:45 — forked from magicznyleszek/css-selectors.md
CSS Selectors Cheatsheet

CSS Selectors Cheatsheet

Hi! If you see an error or something is missing (like :focus-within for few years :P) please let me know ❤️

Element selectors

Element -- selects all h2 elements on the page

h2 {
@jensgro
jensgro / clickmeifyoucan.html
Created May 15, 2023 12:46 — forked from hakimel/clickmeifyoucan.html
<html>
<head>
<title>Click me if you can</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
@jensgro
jensgro / style.css
Created May 10, 2023 15:29 — forked from AlexWebLab/style.css
Retina displays CSS background image
.logo_background {
background-image: url('../img/[email protected]');
background-position: center center;
background-repeat: no-repeat;
background-size: 80px 40px; /* size of the logo image @ 1x */
}
@media /* only for retina displays */
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2),
@jensgro
jensgro / .eleventy.js
Created March 21, 2023 21:17 — forked from sombriks/.eleventy.js
custom eleventy filter to count posts by year #eleventy #ssg
//...
eleventyConfig
.addFilter('yearTags', posts => {
const yearsList = posts.map(p => p.data.date.getFullYear())
const yearsCount = {}
yearsList.forEach(y => {
if (!yearsCount[y]) yearsCount[y] = 1
else yearsCount[y]++
});
return Object.keys(yearsCount)
@jensgro
jensgro / _propmap.scss
Created February 22, 2023 13:05 — forked from DaveKin/_propmap.scss
Utility SASS mixin to convert a map of property names and values to CSS
/**
* Converts a SASS map of css property names and values into CSS output.
* Properties named `description` will have their value inserted as comments.
*
* Nested maps will be processed recursively.
*
* @param {map} $map the map of properties to output
*/
@mixin map-to-props($map){
@if type-of($map) == map {
@jensgro
jensgro / slide.js
Created February 21, 2023 14:13 — forked from wiegertschouten/slide.js
slideUp, slideDown, slideToggle
// In order for these functions to work, the target element needs a transition CSS property to be set.
function slideUp(element, callback) {
element.style.overflow = 'hidden';
element.style.height = element.clientHeight + 'px';
setTimeout(() => {
element.style.height = 0;
}, 0);
@jensgro
jensgro / grid-reloaded.scss
Created February 21, 2023 14:09 — forked from wiegertschouten/grid-reloaded.scss
A simple SASS utility to create layouts based on CSS Grid
// These are the mixins
@mixin grid-layout($column-count, $column-gap: 3rem, $row-gap: null) {
$row-gap: if($row-gap == null, $column-gap, $row-gap);
display: grid;
grid-template-columns: repeat($column-count, 1fr);
grid-gap: $row-gap $column-gap;
gap: $row-gap $column-gap;
}
@jensgro
jensgro / grid.scss
Created February 21, 2023 14:08 — forked from wiegertschouten/grid.scss
A very simple grid system built with SASS and CSS grid
$columns: 12;
$gap: 30px;
$breakpoints: (
xs: 480px,
sm: 768px,
md: 960px,
lg: 1170px,
xl: 1280px
);