Skip to content

Instantly share code, notes, and snippets.

Avatar

Mateo maciejmyslinski

View GitHub Profile
View counting-css-classes.js
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 Mar 19, 2019
Sensible css global defaults for the next project
View global.js
import { createGlobalStyle } from 'styled-components'
import 'normalize.css'
export const Global = createGlobalStyle`
body,
html {
box-sizing: border-box;
overflow-x: hidden;
}
View css-only-hamburger-menu-4.scss
.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 Nov 3, 2016
Connecting checkbox state with menu's position
View css-only-hamburger-menu-3.scss
.main-header {
&__checkbox:checked ~ .main-header__nav {
transform: translateX(0vw);
}
}
View css-only-hamburger-menu-2.scss
#toggle-menu {
position: absolute;
clip: rect(0, 0, 0, 0);
}
View css-only-hamburger-menu-1.scss
.main-header {
&__nav {
position: fixed;
transform: translateX(100vw);
z-index: 1;
}
}
View css-only-hamburger-menu.html
<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">
You can’t perform that action at this time.