Home Download Buy Blog Forum Support

CSS previews

CSS previews

Postby silurius on Sat Oct 24, 2009 10:00 pm

Topstyle has spoiled me with its preview features. For instance, it will render in a small panel in the corner in real time as I add and modify elements. This is especially handy when I'm choosing colors; no need to look a color up in another app when it's right there.

I am not in a position to develop a plugin for this right now and thought I would suggest it here. If anyone knows of something that currently exists, much appreciated.
silurius
 
Posts: 6
Joined: Sat Oct 24, 2009 8:36 pm

Re: CSS previews

Postby n00ge on Sun Oct 25, 2009 12:47 am

Take a look at Xrefresh (http://xrefresh.binaryage.com/). Great app for editing HTML/CSS and seeing live previews.
http://twitter.com/n00ge
Sublime Text 3 dev builds | OS X 10.8.2 & Ubuntu 13.04
n00ge
 
Posts: 140
Joined: Mon Oct 05, 2009 1:23 am

Re: CSS previews

Postby silurius on Mon Oct 26, 2009 5:30 pm

Thanks, n00ge. I have been using TopStyle Pro for involved CSS work, and that is a fantastic app in nearly every way. TopStyle's preview feature handles more than just colors, but if Sublime had even a rudimentary color viewer or color picker, that would probably tip the balance for me.
silurius
 
Posts: 6
Joined: Sat Oct 24, 2009 8:36 pm

Re: CSS previews

Postby n00ge on Tue Oct 27, 2009 4:01 pm

I use AutoHotKey for color pickers. I'll try to post up some scripts later tonight.
http://twitter.com/n00ge
Sublime Text 3 dev builds | OS X 10.8.2 & Ubuntu 13.04
n00ge
 
Posts: 140
Joined: Mon Oct 05, 2009 1:23 am

Re: CSS previews

Postby adc on Thu Mar 17, 2011 5:21 pm

silurius wrote:Thanks, n00ge. I have been using TopStyle Pro for involved CSS work, and that is a fantastic app in nearly every way. TopStyle's preview feature handles more than just colors, but if Sublime had even a rudimentary color viewer or color picker, that would probably tip the balance for me.


Yeah - Love the Command+Shift+C "Insert Color..." from TextMate. It happens to be a ruby script if someone has the know-how to convert it to something that Sublime could roll:

I'll paste the code below:


Code: Select all
#!/usr/bin/env ruby

require ENV['TM_SUPPORT_PATH'] + "/lib/ui"
require ENV['TM_SUPPORT_PATH'] + "/lib/exit_codes"
colour = STDIN.read

# http://www.w3schools.com/css/css_colornames.asp
COLOURS = {
  'aliceblue'            => 'F0F8FF',
  'antiquewhite'         => 'FAEBD7',
  'aqua'                 => '00FFFF',
  'aquamarine'           => '7FFFD4',
  'azure'                => 'F0FFFF',
  'beige'                => 'F5F5DC',
  'bisque'               => 'FFE4C4',
  'black'                => '000000',
  'blanchedalmond'       => 'FFEBCD',
  'blue'                 => '0000FF',
  'blueviolet'           => '8A2BE2',
  'brown'                => 'A52A2A',
  'burlywood'            => 'DEB887',
  'cadetblue'            => '5F9EA0',
  'chartreuse'           => '7FFF00',
  'chocolate'            => 'D2691E',
  'coral'                => 'FF7F50',
  'cornflowerblue'       => '6495ED',
  'cornsilk'             => 'FFF8DC',
  'crimson'              => 'DC143C',
  'cyan'                 => '00FFFF',
  'darkblue'             => '00008B',
  'darkcyan'             => '008B8B',
  'darkgoldenrod'        => 'B8860B',
  'darkgray'             => 'A9A9A9',
  'darkgrey'             => 'A9A9A9',
  'darkgreen'            => '006400',
  'darkkhaki'            => 'BDB76B',
  'darkmagenta'          => '8B008B',
  'darkolivegreen'       => '556B2F',
  'darkorange'           => 'FF8C00',
  'darkorchid'           => '9932CC',
  'darkred'              => '8B0000',
  'darksalmon'           => 'E9967A',
  'darkseagreen'         => '8FBC8F',
  'darkslateblue'        => '483D8B',
  'darkslategray'        => '2F4F4F',
  'darkslategrey'        => '2F4F4F',
  'darkturquoise'        => '00CED1',
  'darkviolet'           => '9400D3',
  'deeppink'             => 'FF1493',
  'deepskyblue'          => '00BFFF',
  'dimgray'              => '696969',
  'dimgrey'              => '696969',
  'dodgerblue'           => '1E90FF',
  'firebrick'            => 'B22222',
  'floralwhite'          => 'FFFAF0',
  'forestgreen'          => '228B22',
  'fuchsia'              => 'FF00FF',
  'gainsboro'            => 'DCDCDC',
  'ghostwhite'           => 'F8F8FF',
  'gold'                 => 'FFD700',
  'goldenrod'            => 'DAA520',
  'gray'                 => '808080',
  'grey'                 => '808080',
  'green'                => '008000',
  'greenyellow'          => 'ADFF2F',
  'honeydew'             => 'F0FFF0',
  'hotpink'              => 'FF69B4',
  'indianred'            => 'CD5C5C',
  'indigo'               => '4B0082',
  'ivory'                => 'FFFFF0',
  'khaki'                => 'F0E68C',
  'lavender'             => 'E6E6FA',
  'lavenderblush'        => 'FFF0F5',
  'lawngreen'            => '7CFC00',
  'lemonchiffon'         => 'FFFACD',
  'lightblue'            => 'ADD8E6',
  'lightcoral'           => 'F08080',
  'lightcyan'            => 'E0FFFF',
  'lightgoldenrodyellow' => 'FAFAD2',
  'lightgray'            => 'D3D3D3',
  'lightgrey'            => 'D3D3D3',
  'lightgreen'           => '90EE90',
  'lightpink'            => 'FFB6C1',
  'lightsalmon'          => 'FFA07A',
  'lightseagreen'        => '20B2AA',
  'lightskyblue'         => '87CEFA',
  'lightslategray'       => '778899',
  'lightslategrey'       => '778899',
  'lightsteelblue'       => 'B0C4DE',
  'lightyellow'          => 'FFFFE0',
  'lime'                 => '00FF00',
  'limegreen'            => '32CD32',
  'linen'                => 'FAF0E6',
  'magenta'              => 'FF00FF',
  'maroon'               => '800000',
  'mediumaquamarine'     => '66CDAA',
  'mediumblue'           => '0000CD',
  'mediumorchid'         => 'BA55D3',
  'mediumpurple'         => '9370D8',
  'mediumseagreen'       => '3CB371',
  'mediumslateblue'      => '7B68EE',
  'mediumspringgreen'    => '00FA9A',
  'mediumturquoise'      => '48D1CC',
  'mediumvioletred'      => 'C71585',
  'midnightblue'         => '191970',
  'mintcream'            => 'F5FFFA',
  'mistyrose'            => 'FFE4E1',
  'moccasin'             => 'FFE4B5',
  'navajowhite'          => 'FFDEAD',
  'navy'                 => '000080',
  'oldlace'              => 'FDF5E6',
  'olive'                => '808000',
  'olivedrab'            => '6B8E23',
  'orange'               => 'FFA500',
  'orangered'            => 'FF4500',
  'orchid'               => 'DA70D6',
  'palegoldenrod'        => 'EEE8AA',
  'palegreen'            => '98FB98',
  'paleturquoise'        => 'AFEEEE',
  'palevioletred'        => 'D87093',
  'papayawhip'           => 'FFEFD5',
  'peachpuff'            => 'FFDAB9',
  'peru'                 => 'CD853F',
  'pink'                 => 'FFC0CB',
  'plum'                 => 'DDA0DD',
  'powderblue'           => 'B0E0E6',
  'purple'               => '800080',
  'red'                  => 'FF0000',
  'rosybrown'            => 'BC8F8F',
  'royalblue'            => '4169E1',
  'saddlebrown'          => '8B4513',
  'salmon'               => 'FA8072',
  'sandybrown'           => 'F4A460',
  'seagreen'             => '2E8B57',
  'seashell'             => 'FFF5EE',
  'sienna'               => 'A0522D',
  'silver'               => 'C0C0C0',
  'skyblue'              => '87CEEB',
  'slateblue'            => '6A5ACD',
  'slategray'            => '708090',
  'slategrey'            => '708090',
  'snow'                 => 'FFFAFA',
  'springgreen'          => '00FF7F',
  'steelblue'            => '4682B4',
  'tan'                  => 'D2B48C',
  'teal'                 => '008080',
  'thistle'              => 'D8BFD8',
  'tomato'               => 'FF6347',
  'turquoise'            => '40E0D0',
  'violet'               => 'EE82EE',
  'wheat'                => 'F5DEB3',
  'white'                => 'FFFFFF',
  'whitesmoke'           => 'F5F5F5',
  'yellow'               => 'FFFF00',
  'yellowgreen'          => '9ACD32',
}

if colour.length > 0 and colour[0] != ?#
  colour.downcase!
  # Convert named colours to their hex values
  colour = '#' + COLOURS[colour] if COLOURS.has_key? colour
end

if res = TextMate::UI.request_color(colour)
  print res
else
  TextMate.exit_discard
end
adc
 
Posts: 3
Joined: Thu Mar 17, 2011 5:19 pm

Re: CSS previews

Postby adc on Thu Mar 17, 2011 9:27 pm

So you can grab an app for this until there is something native to Sublime.

Here are some simple instructions for Mac users. (I am certain Windows has something similar):

http://andrewdc.posterous.com/sublime-a ... -textmate/
adc
 
Posts: 3
Joined: Thu Mar 17, 2011 5:19 pm


Return to Ideas and Feature Requests

Who is online

Users browsing this forum: No registered users and 11 guests