Skip to content

Instantly share code, notes, and snippets.

View maciejmyslinski's full-sized avatar

M maciejmyslinski

View GitHub Profile
Array.from(document.styleSheets).reduce((acc, cssStyleSheet) => {
const classNamesCount = Array.from(cssStyleSheet.cssRules).reduce(
(count, cssRule) => {
if (cssRule.selectorText && cssRule.selectorText.startsWith('.')) {
return count + 1;
}
return count;
},
0
);
@maciejmyslinski
maciejmyslinski / global.js
Last active March 19, 2019 21:10
Sensible css global defaults for the next project
import { createGlobalStyle } from 'styled-components'
import 'normalize.css'
export const Global = createGlobalStyle`
body,
html {
box-sizing: border-box;
overflow-x: hidden;
}
.main-header {
&_nav {
transition: all .25s;
transition-timing-function: cubic-bezier(0.4, 0.0, 0.6, 1);
overflow:auto;
overflow-y:scroll;
}
}
@maciejmyslinski
maciejmyslinski / css-only-hamburger-menu-3.scss
Created November 3, 2016 20:42
Connecting checkbox state with menu's position
.main-header {
&__checkbox:checked ~ .main-header__nav {
transform: translateX(0vw);
}
}
#toggle-menu {
position: absolute;
clip: rect(0, 0, 0, 0);
}
.main-header {
&__nav {
position: fixed;
transform: translateX(100vw);
z-index: 1;
}
}
<header class="main-header">
<input id="toggle-menu" class="main-header__checkbox" type="checkbox">
<label for="toggle-menu" class="main-header__menu-toggler">menu
</label>
<nav class="main-header__nav">
<div class="main-header__nav-wrapper">
<ul class="main-header__menu">