Skip to content

Instantly share code, notes, and snippets.

View simurai's full-sized avatar

simurai simurai

View GitHub Profile
@simurai
simurai / Overlay Grid
Created February 26, 2011 16:54
A flexible grid overlay to test your site's alignment.
/* Grid */
html:before, html:after {
content: "";
position: absolute;
top: 0;
right: 0;
pointer-events: none;
/* change to px if you get a scrollbar */
@simurai
simurai / CSS-Wishlist.md
Last active December 23, 2019 11:46
CSS Wishlist

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.

Mouse

@simurai
simurai / getting-started.md
Created March 12, 2013 11:35
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 dontfeartheinternet.com. 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 codepen.io or cssdeck.com let you play around and see the result instantly updated.

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

@simurai
simurai / SassMeister-input.scss
Created April 28, 2014 03:11
Generated by SassMeister.com.
// ----
// Sass (v3.3.5)
// Compass (v)
// ----
@import "compass";
/* Theme - Night ------------------------------------------- */
$night-color: hsl(216, 8%, 16%);
@simurai
simurai / tlkio-night.css
Last active August 29, 2015 14:10
tlk.io night theme
/* tlk.io 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
simurai / styles.less
Last active August 29, 2015 14:14
Don't shrink active Atom tab
// Atom default UI theme
.tab-bar .tab.active {
flex: 0 0 auto;
max-width: none;
}
.tab-bar .tab.active .title {
overflow: visible;
}
@simurai
simurai / toolbar.json
Created September 13, 2015 22:27
My flex-tool-bar config file
[
{
"tooltip": "Github",
"icon": "octoface",
"url": "http://github.com",
"type": "url"
},
{ "type": "spacer" },
@simurai
simurai / css-properties.css
Created November 26, 2015 05:42
All CSS properties
/*
* CSS Properties
* http://ref.openweb.io/CSS/
**/
.properties {
align-content: value;
align-items: value;
align-self: value;
@simurai
simurai / Duotone Dark.tmTheme
Created January 11, 2016 03:05
DuoTone dark theme for TextMate
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<!-- Generated by: TmTheme-Editor -->
<!-- ============================================ -->
<!-- app: http://tmtheme-editor.herokuapp.com -->
<!-- code: https://github.com/aziz/tmTheme-Editor -->
<plist version="1.0">
<dict>
<key>name</key>
<string>Duotone Dark</string>