landing page

SassBuilder-master/CreateBuilderConfig.py

@@ -0,0 +1,36 @@
+import sublime, sublime_plugin
+
+import os
+
+skeleton = '''{
+    "project_path": "/path/to/scss",
+	"output_path": "/path/to/css",
+	"options": {
+		"cache":         true,
+		"debug":         true,
+		"line-comments": true,
+		"line-numbers":  true,
+		"style":         "nested"
+	}
+}'''
+
+class SassBuilderCreateCommand(sublime_plugin.WindowCommand):
+
+	def run(self, paths=[]):
+		if len(paths) != 0:
+			for path in paths:
+				if os.path.isdir(path):
+					filename = os.path.join(path, '.sassbuilder-config.json')
+
+					with open(filename, 'w+') as f:
+						f.write(skeleton)
+
+					view = self.window.open_file(filename)
+					view.set_syntax_file('Packages/Javascript/JSON.tmLanguage')
+		else:
+			view = self.window.new_file()
+			view.settings().set('default_dir', self.window.folders()[0])
+			view.set_syntax_file('Packages/Javascript/JSON.tmLanguage')
+			view.set_name('.sassbuilder-config')
+
+			view.run_command('insert_snippet', {'contents': skeleton})

SassBuilder-master/Default (Linux).sublime-keymap

@@ -0,0 +1,5 @@
+[
+	{
+		"keys": ["ctrl+b", "ctrl+s"], "command": "sass_builder_create"
+	}
+]

SassBuilder-master/Default (OSX).sublime-keymap

@@ -0,0 +1,5 @@
+[
+	{
+		"keys": ["super+b", "super+s"], "command": "sass_builder_create"
+	}
+]

SassBuilder-master/Default (Windows).sublime-keymap

@@ -0,0 +1,5 @@
+[
+	{
+		"keys": ["ctrl+b", "ctrl+s"], "command": "sass_builder_create"
+	}
+]

SassBuilder-master/Main.sublime-menu

@@ -0,0 +1,12 @@
+[
+	{
+		"id": "tools",
+		"caption": "Tools",
+		"children": [
+			{
+				"caption": "Sass Builder Config",
+				"command": "sass_builder_create"
+			}
+		]
+	}
+]

SassBuilder-master/README.md

@@ -0,0 +1,80 @@
+Sass Builder
+============
+
+Sass Builder is a SASS compiler that reads a config file (.sassbuilder-config) stored
+in a sass/scss source folder. It is a JSON file that sets .css output folder and SASS
+flags [cache, style, debug, line numbers, line comments].
+
+The plugin works on post save of a .sass/.scss file in Sublime Text.
+
+UPDATED!
+========
+This has been resting on the side burner for quite some time and it has finally
+received the attention it needed! This has finally been updated to support Sublime
+Text 3 and it also works with Python 3.
+
+There was an issue with the `grep` command being called if the system didn't have it
+available. This has been corrected to search for `grep` first and run a pure pythonic
+method if it's not found in the system's `PATH`.
+
+I have a small method for this [which.py][w] that mimics the Linux command `which`.
+
+The `.sassbuilder-config` has been changed to `.sassbuilder-config.json` to remove
+the error Sublime Text 3 generates. `project_path` has be added to this to allow for
+scanning in the entire project path when partials are saved.
+
+
+* Automatically runs on save.
+* Create .sassbuilder-config files with ease
+  * Tools->Sass Builder Config
+  * Ctrl+B + Ctrl+S keystroke
+  * Right-click a folder or folders in the side bar.
+
+The .sassbuilder-config file
+============================
+```json
+{
+    "project_path": "/project/path",
+    "output_path": "/project/path/css",
+    "options": {
+        "cache":         true,
+        "debug":         false,
+        "line-comments": true,
+        "line-numbers":  true,
+        "style":         "nested"
+    }
+}
+```
+
+[w]: https://gist.github.com/bnlucas/a23105c69132ab9e5fe9
+
+Install with Sublime Package Control
+============================
+1. Add this repo using "Package Control: Add Repository" https://github.com/bnlucas/SassBuilder
+2. You can then add this package using Package Control as usual. Find "Package Control: Add Package" and search for "Sass Builder"
+
+
+Known Issues on Mac
+============================
+For some users, you may receive this error:
+```
+b'/bin/sh: sass: command not found\n'
+```
+This is because:
+> 'There is a breakage or removal of environment variable functionality in launchd.conf for users of OS X 10.10 (Yosemite) and above.'
+
+-Source https://support.enthought.com/hc/en-us/articles/204469160-How-do-I-set-PYTHONPATH-and-other-environment-variables-for-Canopy-
+
+You can either follow the instructions to add the path to your executable to your PYTHONPATH as detailed in the link above or follow these steps:
+
+1. Install the "PackageResourceViewer" package to sublime using Package Control, then open this plugin within sublime.
+2. Edit SassBuilder.py line 113 changing
+```
+sass = 'sass --update \'{0}\':\'{1}\' --stop-on-error --trace {2} ' \
+               '--style {3}'
+```
+to
+```
+sass = '/usr/local/bin/sass --update \'{0}\':\'{1}\' --stop-on-error --trace {2} ' \
+               '--style {3}'
+```

SassBuilder-master/SassBuilder.py

@@ -0,0 +1,164 @@
+import sublime, sublime_plugin
+
+import codecs
+import json
+import os
+import re
+
+from functools import partial
+from threading import Thread
+from subprocess import PIPE, Popen
+
+
+SASS_EXTENSIONS = ('.scss', '.sass')
+
+
+def which(executable):
+    for path in os.environ['PATH'].split(os.pathsep):
+        path = path.strip('"')
+
+        fpath = os.path.join(path, executable)
+
+        if os.path.isfile(fpath) and os.access(fpath, os.X_OK):
+            return fpath
+
+    if os.name == 'nt' and not executable.endswith('.exe'):
+        return which('{}.exe'.format(executable))
+
+    return None
+
+
+def path_info(path):
+    root = os.path.dirname(path)
+    name = os.path.splitext(os.path.basename(path))[0]
+    extn = os.path.splitext(path)[1]
+
+    return {'root': root, 'name': name, 'extn': extn, 'path': path}
+
+
+def find_files(pattern, path):
+    pattern = re.compile(pattern)
+    found = []
+    path = os.path.realpath(path)
+
+    for root, dirnames, files in os.walk(path):
+        for fname in files:
+            if fname.endswith(SASS_EXTENSIONS):
+                with codecs.open(os.path.join(root, fname), 'r', "utf-8") as f:
+                    if any(pattern.search(line) for line in f):
+                        found.append(os.path.join(root, fname))
+                        break
+
+    return found
+
+
+def grep_files(pattern, path):
+    path = os.path.realpath(path)
+    grep = '''grep -E "{}" * -lr'''.format(pattern)
+
+    proc = Popen(grep, shell=True, cwd=path, stdout=PIPE, stderr=PIPE)
+
+    out, err = proc.communicate()
+
+    if err:
+        print(err)
+        sublime.error_message('SassBuilder: Hit \'ctrl+`\' to see errors.')
+
+    if not out:
+        return None
+
+    out = out.decode('utf8')
+    found = []
+    for f in out.split():
+        if f.endswith(SASS_EXTENSIONS):
+            found.append(os.path.join(path, f))
+
+    return found
+
+
+def get_partial_files(info, project_path):
+    pattern = '''@import.*{}'''.format(info['name'][1:])
+
+    if which('grep'):
+        return grep_files(pattern, project_path)
+
+    return find_files(pattern, project_path)
+
+
+def get_files(info, project_path):
+    if info['name'].startswith('_'):
+        return get_partial_files(info, project_path)
+    return [info['path']]
+
+
+def load_settings(project_path):
+    try:
+        with open(os.sep.join([project_path, '.sassbuilder-config.json']), 'r') as f:
+            data = f.read()
+        return json.loads(data)
+    except:
+        return None
+
+
+def compile_sass(files, settings):
+    compiled_files = []
+    for f in files:
+        info = path_info(f)
+
+        srcp = os.path.join(info['root'], settings['output_path'])
+        name = '.'.join([info['name'], 'css'])
+
+        path = os.path.join(srcp, name)
+
+        sass = 'sass --update \'{0}\':\'{1}\' --stop-on-error --trace {2} ' \
+               '--style {3}'
+
+        rules = []
+
+        if not settings['options']['cache']:
+            rules.append('--no-cache')
+
+        if settings['options']['debug']:
+            rules.append('--debug-info')
+
+        if settings['options']['line-comments']:
+            rules.append('--line-comments')
+
+        if settings['options']['line-numbers']:
+            rules.append('--line-numbers')
+
+        rules = ' '.join(rules)
+
+        sass = sass.format(info['path'], path, rules,
+                           settings['options']['style'])
+
+        sass = Popen(sass, shell=True, cwd=info['root'], stdout=PIPE, stderr=PIPE)
+
+        out, err = sass.communicate()
+        if out:
+            compiled_files.append(name)
+
+        if err:
+            print(err)
+            sublime.error_message('SassBuilder: Hit \'ctrl+`\' to see errors.')
+            return
+
+    print('{0} has been compiled.'.format(', '.join(compiled_files)))
+
+
+class SassBuilderCommand(sublime_plugin.EventListener):
+
+    def on_post_save(self, view):
+        info = path_info(view.file_name())
+        settings = load_settings(info['root'])
+
+        if not settings:
+            return None
+
+        if info['extn'] in SASS_EXTENSIONS:
+            print('SassBuilder started.')
+            files = get_files(info, settings['project_path'])
+
+            #t = Thread(target=compile_sass, args=(files, settings))
+            #t.start()
+            compile_sass(files, settings)

SassBuilder-master/Side Bar.sublime-menu

@@ -0,0 +1,7 @@
+[
+	{ "caption": "-" },
+	{
+		"caption": "Sass Builder Config",
+		"command": "sass_builder_create", "args": { "paths": [] }
+	}
+]

landing-page/.sassbuilder-config

@@ -0,0 +1,11 @@
+{
+    "project_path": "/landing-page",
+    "output_path": "/landing-page/css",
+    "options": {
+        "cache":         true,
+        "debug":         false,
+        "line-comments": true,
+        "line-numbers":  true,
+        "style":         "nested"
+    }
+}

landing-page/_h1.scss

@@ -0,0 +1,17 @@
+$h1-purple:#46156b;
+
+.container-1 {
+	display:flex;
+	flex-wrap:wrap;
+	justify-content:center;
+	padding-top:50px;
+}
+
+h1 {
+	font-family: 'Questrial', sans-serif;
+	color: $h1-purple;
+	letter-spacing: 1px;
+	font-size: 44px;
+	justify-content:center;
+	align-self:flex-end;
+}

landing-page/_images.scss

@@ -0,0 +1,28 @@
+$x-small: 768px;
+$small: 769px;
+$small-max: 992px;
+$medium: 993px;
+$medium-max: 1225px;
+$large: 1226px;
+
+.container-2 {
+	display:flex;
+	justify-content:center;
+		img {
+			width:40%;
+			height:40%;
+		} 
+}
+
+
+
+.lipstick {
+	width: 12%;
+	margin-top:-200px;
+		@media screen and (max-width: $x-small) {
+    		display: none;
+  			}
+  		@media screen and (min-width: $small) and (max-width: $small-max) {
+    		display: none;
+  			}
+}