Skip to content

Instantly share code, notes, and snippets.

simurai simurai

Block or report user

Report or block simurai

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
simurai / Overlay Grid
Created Feb 26, 2011
A flexible grid overlay to test your site's alignment.
View Overlay Grid
/* Grid */
html:before, html:after {
content: "";
position: absolute;
top: 0;
right: 0;
pointer-events: none;
/* change to px if you get a scrollbar */

CSS Wishlist

Pseudo elements

  • Allow them to be animated (already works in Firefox, soon also in WebKit).
  • Allow more than 2 pseudo elements. Maybe we don't need it if Web Components will come.

Pseudo selectors

  • Once an element has display: none, it shouldn’t affect first/last-child and other pseudo selectors. Or maybe it makes sense to add something like display: removed. It would behave like when that element is removed from the DOM aka make pseudo selectors ignore them. Use case: When you temporarly wanna remove items in a list, see demo, but keep the design intact.


simurai /
Created Mar 12, 2013
Once in a while I get an email asking how the get started designing for the Web. So here a very quick draft from the top of my head.

How to get started with Web Design?

A site that I like to point people to is It has great videos to learn the basics.

There are lots of people that blog interesting stuff, but it's kinda hard to name just a few. Sooner or later you'll find them by Googling or on Twitter.

I'm not really into reading books and rather learn by just experimenting. Maybe tools like or let you play around and see the result instantly updated.

There are also some online learning services like or that teaches more in an interactive way.

simurai / SassMeister-input.scss
Created Apr 28, 2014
Generated by
View SassMeister-input.scss
// ----
// Sass (v3.3.5)
// Compass (v)
// ----
@import "compass";
/* Theme - Night ------------------------------------------- */
$night-color: hsl(216, 8%, 16%);
simurai / tlkio-night.css
Last active Aug 29, 2015 night theme
View tlkio-night.css
/* night theme */
.button.button {
color: #999999;
border-color: rgba(0,0,0,0.4);
background-color: #3d4148;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255,255,255,0.05)), color-stop(100%, rgba(255,255,255,0)));
background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.05), rgba(255,255,255,0));
background-image: -moz-linear-gradient(top, rgba(255,255,255,0.05), rgba(255,255,255,0));
simurai / styles.less
Last active Aug 29, 2015
Don't shrink active Atom tab
View styles.less
// Atom default UI theme
.tab-bar {
flex: 0 0 auto;
max-width: none;
.tab-bar .title {
overflow: visible;
simurai / toolbar.json
Created Sep 13, 2015
My flex-tool-bar config file
View toolbar.json
"tooltip": "Github",
"icon": "octoface",
"url": "",
"type": "url"
{ "type": "spacer" },
View css-properties.css
* CSS Properties
.properties {
align-content: value;
align-items: value;
align-self: value;
simurai / Duotone Dark.tmTheme
Created Jan 11, 2016
DuoTone dark theme for TextMate
View Duotone Dark.tmTheme
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "">
<!-- Generated by: TmTheme-Editor -->
<!-- ============================================ -->
<!-- app: -->
<!-- code: -->
<plist version="1.0">
<string>Duotone Dark</string>
You can’t perform that action at this time.