Skip to content

Instantly share code, notes, and snippets.

View mrmrs's full-sized avatar

Adam Morse mrmrs

View GitHub Profile
@mrmrs
mrmrs / html5-element-list.txt
Created November 25, 2013 22:43
List of all html 5 elements, in alphabetical order.
View html5-element-list.txt
a
abbr
address
area
article
aside
audio
b
bdi
bdo
@mrmrs
mrmrs / scalable-css-draft.md
Last active February 19, 2023 16:02
WIP thoughts on my last few years thinking about how to scale css for large and small teams working on large and small web applications.
View scalable-css-draft.md

How not to scale css

Several years ago I got curious about how css worked at scale. When I first started out, there weren’t nearly as many learning resources as there are now. CSS zen garden was amazing, at the time it showed how much you could change a design without altering the html.

In the beginning, that’s what people sold me as a feature. By writing css, you could make a change one place and have it propagate everywhere. In principle this sounds pretty good. I’m lazy so I like doing things one time. But eleven years later, my experience on both large and small teams is that this is the most terrifying thing about css.

https://twitter.com/thomasfuchs/status/493790680397803521

In the past few years a lot of very smart people have been thinking more about CSS and this has lead to some fascinating discussions around how to build ‘scalable’ ui and how that relates to CSS. When I first started to think about scalability I naturally started to read every blog post and watch every tech talk I could get

View mobile-first-css-2.css
.post-title {
font-size: 24px;
}
@media only screen and (min-width: 64em) {
.post-title {
font-size: 48px;
}
}
View mobile-first-css.css
.post-title {
font-size: 48px;
}
@media only screen and (max-width: 20em) {
.post-title {
font-size: 24px;
}
}
@mrmrs
mrmrs / .vimrc
Last active May 12, 2021 09:43
My .vimrc file
View .vimrc
set nocompatible
filetype off
set rtp+=~/.vim/bundle/Vundle.vim
set runtimepath+=~/.vim/bundle/ultisnips
call vundle#begin()
Plugin 'gmarik/Vundle.vim'
Plugin 'tpope/vim-fugitive'
Plugin 'sjl/gundo.vim'
View scalable-css-example-11.css
<div class=“red”>Some text</div>
View scalable-css-example-9.css
.ie6 #footer-content .flex-control-nav li a,
.ie7 #footer-content .flex-control-nav li a,
.ie8 #footer-content .flex-control-nav li a {
float: left;
}
#nav.challenger-a li.menu-products {
float: left;
}
View scalable-css-example-8.css
.header-nav-container .header-nav-list {
float: left;
}
.CA .header-nav-list.second {
float: left;
}
#nav.challenger-a .submenu-3col li,
#nav.challenger-a .submenu-3col li {
View scalable-css-example-7.css
.left-min-scr2,
.left-min-scr3,
.left-max-scr3,
.left-only-scr3 {
float: left;
}