Skip to content

Commit 5c99ab7

Browse files
asimen1asimen1
committed
Initial commit - version 1.0.2 - here we go!
0 parents  commit 5c99ab7

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

74 files changed

+47174
-0
lines changed

‎.babelrc‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["es2015", "react"]
3+
}

‎.eslintrc‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
{
2+
"env": {
3+
"browser": true,
4+
"commonjs": true,
5+
"es6": true
6+
},
7+
"extends": ["eslint:recommended", "plugin:react/recommended"],
8+
"installedESLint": true,
9+
"parserOptions": {
10+
"ecmaFeatures": {
11+
"experimentalObjectRestSpread": true,
12+
"jsx": true,
13+
"modules": true,
14+
"classes": true
15+
},
16+
"sourceType": "module"
17+
},
18+
"plugins": [
19+
"react"
20+
],
21+
"rules": {
22+
"indent": [
23+
"error",
24+
4,
25+
{ "SwitchCase": 1 }
26+
],
27+
"linebreak-style": [
28+
"error",
29+
"unix"
30+
],
31+
"quotes": [
32+
"error",
33+
"single"
34+
],
35+
"semi": [
36+
"error",
37+
"always"
38+
]
39+
},
40+
"globals": {
41+
"chrome": true,
42+
"Restyler": true,
43+
"QUnit": true,
44+
"$": true
45+
}
46+
}

‎.gitattributes‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# Automatically normalize line endings for all text-based files
2+
# http://git-scm.com/docs/gitattributes#_end_of_line_conversion
3+
* text=auto
4+
5+
# For the following file types, normalize line endings to LF on
6+
# checkin and prevent conversion to CRLF when they are checked out
7+
# (this is required in order to prevent newline related issues like,
8+
# for example, after the build script is run)
9+
.* text eol=lf
10+
*.css text eol=lf
11+
*.html text eol=lf
12+
*.js text eol=lf
13+
*.json text eol=lf
14+
*.md text eol=lf
15+
*.sh text eol=lf
16+
*.txt text eol=lf
17+
*.xml text eol=lf

‎.gitignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/dist
2+
node_modules
3+
npm-debug.log*
4+
todo-mine.txt
5+
.sass-cache

‎.jscsrc‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
{
2+
"disallowEmptyBlocks": false,
3+
"disallowKeywords": [
4+
"with"
5+
],
6+
"disallowMixedSpacesAndTabs": true,
7+
"disallowMultipleLineStrings": true,
8+
"disallowMultipleVarDecl": true,
9+
"disallowSpaceAfterPrefixUnaryOperators": [
10+
"!",
11+
"+",
12+
"++",
13+
"-",
14+
"--",
15+
"~"
16+
],
17+
"disallowSpaceBeforeBinaryOperators": [
18+
","
19+
],
20+
"disallowSpaceBeforePostfixUnaryOperators": true,
21+
"disallowSpacesInNamedFunctionExpression": {
22+
"beforeOpeningRoundBrace": true
23+
},
24+
"disallowSpacesInsideArrayBrackets": true,
25+
"disallowSpacesInsideParentheses": true,
26+
"disallowTrailingWhitespace": true,
27+
"requireCamelCaseOrUpperCaseIdentifiers": true,
28+
"requireCapitalizedConstructors": true,
29+
"requireCommaBeforeLineBreak": true,
30+
"requireCurlyBraces": {
31+
allExcept: ['case']
32+
},
33+
"requireDotNotation": true,
34+
"requireLineFeedAtFileEnd": false,
35+
"requireParenthesesAroundIIFE": true,
36+
"requireSpaceAfterBinaryOperators": true,
37+
"requireSpaceAfterKeywords": [
38+
"catch",
39+
"do",
40+
"else",
41+
"for",
42+
"if",
43+
"return",
44+
"switch",
45+
"try",
46+
"while"
47+
],
48+
"requireSpaceAfterLineComment": true,
49+
"requireSpaceBeforeBinaryOperators": true,
50+
"requireSpaceBeforeBlockStatements": true,
51+
"requireSpacesInAnonymousFunctionExpression": {
52+
"beforeOpeningCurlyBrace": true
53+
},
54+
"requireSpacesInConditionalExpression": true,
55+
"requireSpacesInFunctionDeclaration": {
56+
"beforeOpeningCurlyBrace": true
57+
},
58+
"requireSpacesInFunctionExpression": {
59+
"beforeOpeningCurlyBrace": true
60+
},
61+
"requireSpacesInNamedFunctionExpression": {
62+
"beforeOpeningCurlyBrace": true
63+
},
64+
"requireSpacesInsideObjectBrackets": "allButNested",
65+
"validateIndentation": 4,
66+
"validateLineBreaks": "LF",
67+
"validateParameterSeparator": ", ",
68+
"validateQuoteMarks": "'"
69+
}

‎.jshintrc‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
{
2+
3+
// Enforcing options
4+
// http://www.jshint.com/docs/options/#enforcing-options
5+
6+
"bitwise": true,
7+
"eqeqeq": true,
8+
"forin": true,
9+
"latedef": false,
10+
"noarg": true,
11+
"nonbsp": true,
12+
"nonew": true,
13+
"undef": true,
14+
"unused": true,
15+
16+
// - - - - - - - - - - - - - - - - - - - - - - - - - - -
17+
18+
// Relaxing options
19+
// http://www.jshint.com/docs/options/#relaxing-options
20+
21+
"esnext": true,
22+
23+
// - - - - - - - - - - - - - - - - - - - - - - - - - - -
24+
25+
// Environments
26+
// http://www.jshint.com/docs/options/#environments
27+
28+
"browser": true,
29+
"jquery": true,
30+
"node": true,
31+
"globals": {
32+
"define": false,
33+
"require": false,
34+
"requirejs": false,
35+
"Restyler": false,
36+
"QUnit": false,
37+
"chrome": false,
38+
"QUnit": false,
39+
"$": false
40+
}
41+
}

‎LICENSE‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2017 Asaf Menahem
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
6+
7+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
8+
9+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

‎README.md‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
# Restyler
2+
## A devtool extension for easy restyling of any webpage
3+
4+
[Get the extension (Chrome Webstore)](https://chrome.google.com/webstore/detail/restyler/ofkkcnbmhaodoaehikkibjanliaeffel)
5+
6+
Restyler lets you change the appearance of any webpage with an easy to use interface.
7+
Ongoing changes in the page are automatically observed so new styling is always taken into account.
8+
Perfect for testing out design changes or rebranding on an existing page!
9+
10+
★ Modify any CSS attribute value such as font, color, margins, etc...
11+
12+
★ Apply styling rule to all elements in the page or to a specific set (using selectors).
13+
14+
★ Edit any text content in the page.
15+
16+
★ Share your styling rules as a config or a CSS file.
17+
18+
### Developing Locally
19+
# install webpack
20+
npm install webpack -g
21+
22+
# run the dev script
23+
npm run dev
24+
25+
The extension is built to the _dist_ folder.
26+
You can now load it via the chrome extensions page chrome://extensions/ -> "Load unpacked extension..."
27+
28+
(Make sure you have "Developer mode" turned on in chrome's extensions page)
29+
30+
### Todos
31+
* Support image sources modification.
32+
* Support changing a rule after it has been added.
33+
* Add the number of matched/modified elements for each rule (can show total matches in extension badge).
34+
* Allow user to save rules as presets (and not just export to file).
35+
* Gulp task to package extension (with version number injection).
36+
* Add tests, JUnit? Mocha? Testim.io?
37+
38+
License
39+
----
40+
MIT

‎docs/config.rb‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
require 'compass/import-once/activate'
2+
# Require any additional compass plugins here.
3+
4+
# Set this to the root of your project when deployed:
5+
http_path = "/"
6+
css_dir = "stylesheets"
7+
sass_dir = "sass"
8+
images_dir = "images"
9+
javascripts_dir = "javascripts"
10+
11+
# You can select your preferred output style here (can be overridden via the command line):
12+
# output_style = :expanded or :nested or :compact or :compressed
13+
14+
# To enable relative paths to assets via compass helper functions. Uncomment:
15+
# relative_assets = true
16+
17+
# To disable debugging comments that display the original location of your selectors. Uncomment:
18+
# line_comments = false
19+
20+
21+
# If you prefer the indented syntax, you might want to regenerate this
22+
# project again passing --syntax sass, or you can uncomment this:
23+
# preferred_syntax = :sass
24+
# and then run:
25+
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

‎docs/help.html‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<link href="stylesheets/style.css" rel="stylesheet" type="text/css" />
5+
<link href="https://fonts.googleapis.com/css?family=Kaushan+Script|Raleway" rel="stylesheet">
6+
</head>
7+
<body>
8+
<section id="top">
9+
<div id="header">
10+
<h1>Restyler</h1>
11+
</div>
12+
<div id="intro">
13+
<h3>Hello!</h3>
14+
<div>Restyler lets you totally restyle the appearance of every webpage with an easy to use interface.</div>
15+
<div>Ongoing changes in the page are automatically observed so new styling is always taken into account.</div>
16+
<div>Perfect for testing out design changes or rebranding on an existing page!</div>
17+
</div>
18+
</section>
19+
20+
<section id="content">
21+
<h3>How to use?</h3>
22+
<ol id="usage">
23+
<li>
24+
<div class="text">
25+
<div>Open the Developer Tools window (Ctrl+Shift+I or Ctrl+Opt+I in Mac) and goto the Restyler tab.</div>
26+
<div>You can try it out on this page!</div>
27+
<div class="image">
28+
<img src="images/img1.png"/>
29+
</div>
30+
</div>
31+
</li>
32+
<li>
33+
<div class="text">
34+
<div>Pick an attribute you would like to change, for example "color".</div>
35+
<div>Let's add a style rule that will replace any element with original value of "white" to "green".</div>
36+
<div>We can also change all color values to "green" if we leave the original value field empty.</div>
37+
</div>
38+
<div class="image">
39+
<img src="images/img2.png"/>
40+
</div>
41+
</li>
42+
<li>
43+
<div class="text">
44+
<div>Click "set" and watch the result!</div>
45+
</div>
46+
</li>
47+
<li>
48+
<div class="text">
49+
<div>You can add more styling rules, all CSS attributes are supported.</div>
50+
<div>You can also apply the style change to specific elements if you give a selector to match elements upon.</div>
51+
</div>
52+
</li>
53+
<li>
54+
<div class="text">
55+
<div>You can also share your changes to other Restyler users or export the style as a CSS file for front end designers.</div>
56+
</div>
57+
</li>
58+
<li>
59+
<div class="text">
60+
<div>Finally, check out the text editing feature!</div>
61+
<div>Turn it on and every text in the page is editable!</div>
62+
</div>
63+
<div class="image">
64+
<img src="images/img3.png"/>
65+
</div>
66+
</li>
67+
</ol>
68+
</section>
69+
<footer>
70+
<section id="comments">
71+
<h3>Comments:</h3>
72+
<ul>
73+
<li>
74+
<div>Text editing mode is not saved across sessions (reloading the page will revert the text back to original).</div>
75+
</li>
76+
<li>
77+
<div>Styling rules are applied by the their order, you can rearrange the order by dragging the left side handle.</div>
78+
</li>
79+
<li>
80+
<div>You can use any supported CSS values (for example for "color": rgb, hex, names, etc...).</div>
81+
</li>
82+
<li>
83+
<div>Make sure you write the valid units for CSS values.</div>
84+
<div>For example: "font-size" should have "px", "rem", etc...</div>
85+
</li>
86+
</ul>
87+
</section>
88+
<section id="links">
89+
<h3>Links:</h3>
90+
<ul>
91+
<li>
92+
<a href="https://chrome.google.com/webstore/detail/restyler/ofkkcnbmhaodoaehikkibjanliaeffel" target="_blank">Extension in Chrome Webstore</a>
93+
</li>
94+
<li>
95+
<a href="https://github.com/asimen1/restyler" target="_blank">Github</a>
96+
</li>
97+
</ul>
98+
</section>
99+
</footer>
100+
</body>
101+
</html>

0 commit comments

Comments
 (0)