M maciejmyslinski

maciejmyslinski / counting-css-classes.js

Created May 18, 2020 14:09

	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 / 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;
	}

maciejmyslinski / css-only-hamburger-menu-4.scss

Created November 3, 2016 20:54

	.main-header {
	&_nav {
	transition: all .25s;
	transition-timing-function: cubic-bezier(0.4, 0.0, 0.6, 1);
	overflow:auto;
	overflow-y:scroll;
	}
	}

maciejmyslinski / css-only-hamburger-menu-3.scss

Created November 3, 2016 20:42

Connecting checkbox state with menu's position

maciejmyslinski / css-only-hamburger-menu-2.scss

Created November 3, 2016 20:38

Hinding the checkbox

maciejmyslinski / css-only-hamburger-menu-1.scss

Created November 3, 2016 20:35

Hiding the menu itself

maciejmyslinski / css-only-hamburger-menu.html

Created November 3, 2016 20:19

	<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">

	.main-header {

	&__checkbox:checked ~ .main-header__nav {
	transform: translateX(0vw);
	}

	}