hshoff

{
	// Sets the colors used within the text area
	"color_scheme": "Packages/Color Scheme - Default/Monokai.tmTheme",

	// Note that the font_face and font_size are overriden in the platform
	// specific settings file, for example, "Base File (Linux).sublime-settings".
	// Because of this, setting them here will have no effect: you must set them
	// in your User File Preferences.
	"font_face": "Monaco",
	"font_size": 12,

hshoff

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>author</key>
	<string>Chris Kempson (http://chriskempson.com)</string>
	<key>name</key>
	<string>Base16 Eighties Dark</string>
	<key>semanticClass</key>
	<string>base16.eighties.dark</string>

hshoff

{
	"auto_match_enabled": true,
	"bold_folder_labels": true,
	"caret_style": "wide",
	"color_scheme": "Packages/Theme - Spacegray/base16-eighties2.dark.tmTheme",
	"draw_minimap_border": true,
	"draw_indent_guides": true,
	"fade_fold_buttons": false,
	"font_size": 13.0,
	"highlight_active_indent_guide": true,

hshoff

function print(obj) {
  console.log(JSON.stringify(obj, null, 2));
};

print({one:1,two:[{name:'charles',label:'barkley'},{name:'han',label:'solo'}]};

// {
//   "one": 1,
//   "two": [
//    {

hshoff

Based on Saturn by @psql

Full Saturn is an updated color theme of Spacegray by @kkga.

If you already have Theme - Spacegray installed skipped to step 5.

Janky manual install due to laziness

hshoff

3 pillars that make an app native:

1. touch handling (edited)
2. native components
3. style & layout diving in to ReactKit in xcode you can pass in css props and the native element will translate setting the views happens in the main thread but that's the only thing happening in the main thread not transpiling js to obj-c running a real js engine

hshoff

<?xml version="1.0" encoding="UTF-8"?>
<scheme name="Blackbored" version="1" parent_scheme="Default">
  <option name="LINE_SPACING" value="1.25" />
  <option name="EDITOR_FONT_SIZE" value="12" />
  <option name="EDITOR_FONT_NAME" value="Monaco" />
  <colors>
    <option name="ANNOTATIONS_COLOR" value="3e83e7" />
    <option name="CARET_COLOR" value="" />
    <option name="CARET_ROW_COLOR" value="40436" />
    <option name="CONSOLE_BACKGROUND_KEY" value="0" />

hshoff

<!-- stars.html.erb -->

<div class="stars empty">
  <div class="stars filled"></div>
</div>

<!--
  This way you can namespace your selectors.
  The markup isn't as pretty, but you can 
  sleep soundly knowing other developers 

hshoff

// stars.scss
// compiles to stars.css

$starWidth: 44px;
$starOffset: 0 -43px;
$numStars: 5;
$steps: 2;
$total: $numStars * $steps;

@mixin filled($n: 0) {

hshoff

<div class="empty">
  <div class="filled"></div>
</div>