Editorial Workflows

Extract Inline CSS

public workflow

Install Workflow

This is a workflow for Editorial, a Markdown and plain text editor for iOS. To download it, you need to view this page on a device that has the app installed.

Description: If you test CSS by using inline styles before adding it to your style sheets, then you might find this workflow handy. Here’s how it works:

First, add inline styles via the “style” attribute. If the tag has other attributes, then style be the first one or the workflow will not function. Next, select the text from which you want to extract your inline CSS and run this workflow.

Visibly, you’ll see your inline CSS stripped from your tags and the style attributes changed into class attributes. The extracted CSS has been copied to your clipboard and is ready to paste into your style sheet.

Shared by: Phil Selman

Comments: Comment Feed (RSS)

There are no comments yet.

+ Add Comment

Workflow Preview
Extend Selection ?
Direction
  • Backward
  • Forward
  • Both
Unit
  • Start/End of Document
  • Start/End of Line
  • Number of Characters...
1
Set Variable ?
Variable Name
originaltext
Value
Input
Find / Replace ?
Find
\t
  • Case-insensitive (A = a)
  • Case-sensitive (A ≠ a)
  • Regular Expression
Replace with
Find / Replace ?
Find
<([^/ ]+)[^"]+"([^"]+)"[^<]*
  • Case-insensitive (A = a)
  • Case-sensitive (A ≠ a)
  • Regular Expression
Replace with
$1.CLASS { $2}
Find / Replace ?
Find
:\s*
  • Case-insensitive (A = a)
  • Case-sensitive (A ≠ a)
  • Regular Expression
Replace with
:
Find / Replace ?
Find
;\s*
  • Case-insensitive (A = a)
  • Case-sensitive (A ≠ a)
  • Regular Expression
Replace with
;
Find / Replace ?
Find
^\s*[}].*$
  • Case-insensitive (A = a)
  • Case-sensitive (A ≠ a)
  • Regular Expression
Replace with
}
Find / Replace ?
Find
<[^>]*>
  • Case-insensitive (A = a)
  • Case-sensitive (A ≠ a)
  • Regular Expression
Replace with
Find / Replace ?
Find
\}\s*
  • Case-insensitive (A = a)
  • Case-sensitive (A ≠ a)
  • Regular Expression
Replace with
\}
Find / Replace ?
Find
\}(.)
  • Case-insensitive (A = a)
  • Case-sensitive (A ≠ a)
  • Regular Expression
Replace with
\} $1
Set Clipboard ?
Generate Text ?
Text
originaltext
Find / Replace ?
Find
style="[^"]*"
  • Case-insensitive (A = a)
  • Case-sensitive (A ≠ a)
  • Regular Expression
Replace with
class=""
Replace Selected Text ?
Replacement Text
Input