├── .gitignore ├── LICENSE.txt ├── README.md ├── front-end ├── data.json ├── gulpfile.js ├── images │ ├── apple-touch-icon-114x114.png │ ├── apple-touch-icon-120x120.png │ ├── apple-touch-icon-144x144.png │ ├── apple-touch-icon-152x152.png │ ├── apple-touch-icon-57x57.png │ ├── apple-touch-icon-72x72.png │ ├── apple-touch-icon-76x76.png │ ├── apple-touch-icon.png │ ├── favicon.ico │ └── icons │ │ └── svg-symbols.svg ├── package.json ├── scripts │ ├── _helpers.js │ ├── app.js │ ├── lib │ │ ├── _jquery.js │ │ └── _modernizr.js │ └── modules │ │ └── _type-set.js ├── scss │ ├── framework │ │ ├── _build.scss │ │ ├── core │ │ │ ├── _display.scss │ │ │ ├── _legacy-reset.scss │ │ │ └── _reset.scss │ │ ├── file-templates │ │ │ └── _mode-template.scss │ │ ├── helpers │ │ │ └── _capitalize.scss │ │ └── mixins │ │ │ ├── _bounce-scroll.scss │ │ │ ├── _ellipsis.scss │ │ │ ├── _feature-fail.scss │ │ │ ├── _font-size.scss │ │ │ ├── _hover.scss │ │ │ ├── _media-query.scss │ │ │ ├── _mode.scss │ │ │ ├── _no-js.scss │ │ │ ├── _placeholder.scss │ │ │ ├── _print.scss │ │ │ ├── _pseudo-decor.scss │ │ │ ├── _selection.scss │ │ │ └── _word-wrap.scss │ └── project │ │ ├── _shame.scss │ │ ├── _z-index.scss │ │ ├── animations │ │ └── dummy.txt │ │ ├── components │ │ ├── _breathe.scss │ │ ├── _chunk.scss │ │ ├── _display.scss │ │ ├── _flow.scss │ │ ├── _icon.scss │ │ ├── _size.scss │ │ ├── _text.scss │ │ └── _wrapper.scss │ │ ├── global.scss │ │ ├── helpers │ │ └── _flex-wrapper.scss │ │ ├── imports │ │ ├── _animations.scss │ │ ├── _components.scss │ │ ├── _helpers.scss │ │ ├── _layouts.scss │ │ ├── _mixins.scss │ │ └── _third-party.scss │ │ ├── layouts │ │ ├── _grid.scss │ │ ├── _site-foot.scss │ │ └── _site-head.scss │ │ ├── legacy.scss │ │ ├── mixins │ │ └── dummy.txt │ │ ├── third-party │ │ └── dummy.txt │ │ └── vars │ │ ├── _color.scss │ │ ├── _generic.scss │ │ ├── _metrics.scss │ │ └── _typography.scss ├── svg │ └── dummy.svg └── templates │ ├── index.html │ ├── layout-partials │ ├── css.html │ ├── doctype.html │ ├── foot.html │ ├── head.html │ ├── icons.html │ └── scripts.html │ ├── layout │ └── base.html │ └── partials │ ├── site-foot.html │ └── site-head.html └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | *.scssc 2 | .DS_Store 3 | .sass-cache 4 | node_modules 5 | .public 6 | *.log 7 | *.lock -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 hankchizljaw.io and other contributors 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | >❗️❗️❗️ This repository is no longer maintained. Thanks to everyone for your help. It means a lot! ❗️❗️❗️ 2 | 3 | --- 4 | 5 | ## About 6 | 7 | Stalfos is an open-source, skeletal front-end development starter kit. It provides you with a solid starting-point for working with HTML, Sass and JavaScript. It also provides tools for working with images, fonts and SVG. 8 | 9 | Along with being a useful starter kit, Stalfos is completely modifiable and extendable, which allows you to use it to create a powerful front-end development workflow. 10 | 11 | One reason for this is that the beating heart of Stalfos is [Gulp](http://gulpjs.com/), which provides a modular task based processing system that can be extended as you see fit. Stalfos provides a Gulp setup that will process your front-end assets to a decent production ready standard from the word gulp go! 12 | 13 | Out of the box, Stalfos gives you: 14 | 15 | - An SCSS based collection of helpers, components and layouts in a modular orientated project structure 16 | - A JavaScript project structure with some little helpers included 17 | - A [Nunjucks](https://mozilla.github.io/nunjucks/) based HTML template building system 18 | - Automated SVG processing 19 | 20 | ## Getting Started 21 | 22 | It's recommended that you use Stalfos as a starting point and not as a traditional framework. 23 | 24 | The most straightforward way to get it running is to: 25 | 26 | 1. Open your terminal at `{your project directory}` 27 | 2. Run the following command: 28 | git clone https://github.com/hankchizljaw/stalfos.git stalfos_tmp && mv stalfos_tmp/front-end front-end && rm -rf stalfos_tmp && cd front-end 29 | 3. This will clone the latest copy of Stalfos into a `front-end` directory for you. It will then move you to that directory 30 | 4. Run `npm install` to install the required dependencies 31 | 5. After `npm` has finished installing the dependancies that Stalfos needs, run `gulp serve`. More info about the gulp commands can be found [here](#gulp-commands) 32 | 6. Visit `http://localhost:8003` in your browser 33 | 7. You should see your *almost* blank start page! 34 | 35 | Now you've got yourself the basic kit running, let's delve into it a bit deeper. 36 | 37 | **Note**: You can also use [Yarn](https://yarnpkg.com/en/) to work with Stalfos. 38 | 39 | Now you've got yourself the basic kit running, let's delve into it a bit deeper with the [Stalfos Docs](https://stalfos.io). 40 | 41 | 42 | 43 | Made with ❤ by [hankchizljaw](https://hankchizljaw.io) and [friends](https://github.com/hankchizljaw/stalfos/graphs/contributors) 44 | -------------------------------------------------------------------------------- /front-end/data.json: -------------------------------------------------------------------------------- 1 | { 2 | "project_settings": { 3 | "name": "Stalfos", 4 | "support_legacy_ie": false, 5 | "asset_version": "1.1.0" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /front-end/gulpfile.js: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | MODULES 3 | \*------------------------------------*/ 4 | 5 | var autoprefixer = require('gulp-autoprefixer'), 6 | cleanCSS = require('gulp-clean-css'), 7 | concat = require('gulp-concat'), 8 | connect = require('gulp-connect'), 9 | data = require('gulp-data'), 10 | del = require('del'), 11 | fs = require('fs'), 12 | gulp = require('gulp'), 13 | merge = require('merge-stream'), 14 | nunjucksRender = require('gulp-nunjucks-render'), 15 | plumber = require('gulp-plumber'), 16 | prettify = require('gulp-prettify'), 17 | runSequence = require('run-sequence').use(gulp), 18 | sass = require('gulp-sass'), 19 | sourcemaps = require('gulp-sourcemaps'), 20 | svgmin = require('gulp-svgmin'), 21 | svgSymbols = require('gulp-svg-symbols'), 22 | uglify = require('gulp-uglify'), 23 | watch = require('gulp-watch'), 24 | wrap = require('gulp-wrap'); 25 | 26 | /*------------------------------------*\ 27 | GLOBAL CONSTS 28 | \*------------------------------------*/ 29 | 30 | var SVG_PATH = 'svg', 31 | TEMPLATE_PATH = 'templates', 32 | SCRIPT_PATH = 'scripts', 33 | SCSS_ROOT_PATH = 'scss', 34 | SCSS_PATH = SCSS_ROOT_PATH + '/project', 35 | IMAGE_PATH = 'images', 36 | SVG_SYMBOL_PATH = IMAGE_PATH + '/icons', 37 | FONT_PATH = 'fonts', 38 | WEB_PATH = '.public', 39 | WEB_CSS_PATH = WEB_PATH + '/css', 40 | WEB_SCRIPT_PATH = WEB_PATH + '/scripts', 41 | WEB_IMAGE_PATH = WEB_PATH + '/images', 42 | WEB_FONT_PATH = WEB_PATH + '/fonts', 43 | WEBSITE_PATH = '../htdocs', 44 | WEBSITE_CSS_PATH = WEBSITE_PATH + '/css', 45 | WEBSITE_SCRIPT_PATH = WEBSITE_PATH + '/scripts', 46 | WEBSITE_IMAGE_PATH = WEBSITE_PATH + '/images', 47 | WEBSITE_FONT_PATH = WEBSITE_PATH + '/fonts', 48 | DATA_FILE = 'data.json'; 49 | 50 | /*------------------------------------*\ 51 | TASKS 52 | \*------------------------------------*/ 53 | 54 | // Clean the web path out 55 | gulp.task('clean-web', function() { 56 | 57 | return del([WEB_PATH], {force: true}); 58 | }); 59 | 60 | // Find all SVG and smash into a symbols file 61 | gulp.task('process-svg', function() { 62 | 63 | return gulp.src(SVG_PATH + '/*.svg') 64 | .pipe(svgmin()) 65 | .pipe(svgSymbols({ 66 | templates: ['default-svg'] 67 | })) 68 | .pipe(gulp.dest(SVG_SYMBOL_PATH)); 69 | }); 70 | 71 | // Process all the nunjucks templates 72 | gulp.task('process-templates', function() { 73 | 74 | var contents = fs.readFileSync(DATA_FILE); 75 | 76 | return gulp.src(TEMPLATE_PATH + '/*.html') 77 | .pipe(data(function(file) { 78 | return JSON.parse(contents); 79 | })) 80 | .pipe(nunjucksRender({ 81 | path: TEMPLATE_PATH 82 | })) 83 | .pipe(prettify({indent_size: 4})) 84 | .pipe(gulp.dest(WEB_PATH)); 85 | }); 86 | 87 | // Process sass 88 | gulp.task('process-sass', function () { 89 | 90 | return gulp.src(SCSS_PATH + '/**/*.scss') 91 | .pipe(plumber()) 92 | .pipe(sourcemaps.init()) 93 | .pipe(sass().on('error', sass.logError)) 94 | .pipe(autoprefixer({ 95 | browsers: ['last 2 versions'], 96 | cascade: false 97 | })) 98 | .pipe(cleanCSS()) 99 | .pipe(sourcemaps.write('.')) 100 | .pipe(gulp.dest(WEB_PATH + '/css')); 101 | }); 102 | 103 | // Process JavaScript libs 104 | gulp.task('process-script-libs', function() { 105 | 106 | var sources = [ 107 | SCRIPT_PATH + '/lib/*.js' 108 | ]; 109 | 110 | return gulp.src(sources) 111 | .pipe(plumber()) 112 | .pipe(concat('lib.js')) 113 | .pipe(uglify()) 114 | .pipe(gulp.dest(WEB_PATH + '/scripts')); 115 | }); 116 | 117 | // Process JavaScript 118 | gulp.task('process-scripts', function() { 119 | 120 | var sources = [ 121 | SCRIPT_PATH + '/_helpers.js', 122 | SCRIPT_PATH + '/modules/*.js', 123 | SCRIPT_PATH + '/app.js' 124 | ]; 125 | 126 | // Process libs first 127 | gulp.start('process-script-libs'); 128 | 129 | return gulp.src(sources) 130 | .pipe(plumber()) 131 | .pipe(sourcemaps.init()) 132 | .pipe(concat('app.js')) 133 | .pipe(uglify()) 134 | .pipe(sourcemaps.write('.')) 135 | .pipe(gulp.dest(WEB_PATH + '/scripts')); 136 | }); 137 | 138 | // Process images 139 | gulp.task('process-images', function() { 140 | 141 | return gulp.src([IMAGE_PATH + '/**/*']) 142 | .pipe(gulp.dest(WEB_PATH + '/images')); 143 | }); 144 | 145 | // Process fonts 146 | gulp.task('process-fonts', function() { 147 | 148 | return gulp.src([FONT_PATH + '/**/*']) 149 | .pipe(gulp.dest(WEB_PATH + '/fonts')); 150 | }); 151 | 152 | // Webserver 153 | gulp.task('webserver', function() { 154 | 155 | connect.server({ 156 | root: WEB_PATH, 157 | port: 8003, 158 | livereload: true 159 | }); 160 | 161 | }); 162 | 163 | // Live reload 164 | gulp.task('livereload', function () { 165 | 166 | return gulp.src( WEB_PATH + '/**/*' ) 167 | .pipe(connect.reload()); 168 | }); 169 | 170 | // Copy assets from the WEB_PATH to the set website asset paths 171 | gulp.task('website-assets', function() { 172 | 173 | // Image files 174 | var websiteImages = gulp.src([IMAGE_PATH + '/**/*']) 175 | .pipe(gulp.dest(WEBSITE_IMAGE_PATH)); 176 | 177 | // CSS files 178 | var websiteCSS = gulp.src([WEB_PATH + '/css/**/*']) 179 | .pipe(gulp.dest(WEBSITE_CSS_PATH)); 180 | 181 | // Script files 182 | var websiteScripts = gulp.src([WEB_PATH + '/scripts/**/*']) 183 | .pipe(gulp.dest(WEBSITE_SCRIPT_PATH)); 184 | 185 | // Font files 186 | var websiteFonts = gulp.src([WEB_PATH + '/fonts/**/*']) 187 | .pipe(gulp.dest(WEBSITE_FONT_PATH)); 188 | 189 | // Merge the mini tasks 190 | return merge(websiteImages, websiteCSS, websiteScripts, websiteFonts); 191 | 192 | }); 193 | 194 | 195 | // Global serve task. This task basically does everything and should be 196 | // called to run your webserver 197 | gulp.task('serve', function() { 198 | 199 | // Run build then set watch targets in the callback 200 | runSequence('clean-web', 'process-svg', 'process-templates', 'process-sass', 'process-scripts', 'process-images', 'process-fonts', function() { 201 | 202 | // Watch for changes with SVG 203 | watch([SVG_PATH + '/*.svg'], function() { gulp.start('process-svg'); }); 204 | 205 | // Watch for changes with templates 206 | watch([TEMPLATE_PATH + '/**/*.html'], function() { gulp.start('process-templates'); }); 207 | 208 | // Watch for changes with sass 209 | watch([SCSS_ROOT_PATH + '/**/*.scss'], function() { gulp.start('process-sass'); }); 210 | 211 | // Watch for changes with scripts 212 | watch([IMAGE_PATH + '/**/*'], function() { gulp.start('process-images'); }); 213 | 214 | // Watch for changes with scripts 215 | watch([FONT_PATH + '/**/*'], function() { gulp.start('process-fonts'); }); 216 | 217 | // Watch for changes with images 218 | watch([SCRIPT_PATH + '/**/*.js'], function() { gulp.start('process-scripts'); }); 219 | 220 | // Watch any file changes in the web path and reload 221 | watch([WEB_PATH + '/**'], function() { gulp.start('livereload'); }); 222 | 223 | // Watch changes to data file 224 | watch([DATA_FILE], function() { gulp.start('process-templates'); gulp.start('livereload'); }); 225 | 226 | // Run the webserver 227 | gulp.start('webserver'); 228 | }); 229 | 230 | }); 231 | 232 | // Global watch task. This task should be run once you have finished with static templates and you are moving on to implementation. 233 | // Set the various 'WEBSITE' paths at the top and run this task. All the watching and processing will happen much like 'gulp serve'. 234 | gulp.task('watch', function() { 235 | 236 | // Run build then set watch targets in the callback 237 | runSequence('clean-web', 'process-svg', 'process-sass', 'process-scripts', 'process-images', 'process-fonts', 'website-assets', function() { 238 | 239 | // Watch for changes with SVG 240 | watch([SVG_PATH + '/*.svg'], function() { runSequence('process-svg', function() { gulp.start('website-assets'); }); }); 241 | 242 | // Watch for changes with sass 243 | watch([SCSS_ROOT_PATH + '/**/*.scss'], function() { runSequence('process-sass', function() { gulp.start('website-assets'); }); }); 244 | 245 | // Watch for changes with images 246 | watch([IMAGE_PATH + '/**/*'], function() { runSequence('process-images', function() { gulp.start('website-assets'); }); }); 247 | 248 | // Watch for changes with fonts 249 | watch([FONT_PATH + '/**/*'], function() { runSequence('process-fonts', function() { gulp.start('website-assets'); }); }); 250 | 251 | // Watch for changes with scripts 252 | watch([SCRIPT_PATH + '/**/*.js'], function() { runSequence('process-scripts', function() { gulp.start('website-assets'); }); }); 253 | 254 | }); 255 | 256 | }); 257 | 258 | gulp.task('default', function() { 259 | gulp.start('serve'); 260 | }); 261 | -------------------------------------------------------------------------------- /front-end/images/apple-touch-icon-114x114.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andy-set-studio/stalfos/ad9e3e087c101367d2e2b2adc0708173cf88f840/front-end/images/apple-touch-icon-114x114.png -------------------------------------------------------------------------------- /front-end/images/apple-touch-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andy-set-studio/stalfos/ad9e3e087c101367d2e2b2adc0708173cf88f840/front-end/images/apple-touch-icon-120x120.png -------------------------------------------------------------------------------- /front-end/images/apple-touch-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andy-set-studio/stalfos/ad9e3e087c101367d2e2b2adc0708173cf88f840/front-end/images/apple-touch-icon-144x144.png -------------------------------------------------------------------------------- /front-end/images/apple-touch-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andy-set-studio/stalfos/ad9e3e087c101367d2e2b2adc0708173cf88f840/front-end/images/apple-touch-icon-152x152.png -------------------------------------------------------------------------------- /front-end/images/apple-touch-icon-57x57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andy-set-studio/stalfos/ad9e3e087c101367d2e2b2adc0708173cf88f840/front-end/images/apple-touch-icon-57x57.png -------------------------------------------------------------------------------- /front-end/images/apple-touch-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andy-set-studio/stalfos/ad9e3e087c101367d2e2b2adc0708173cf88f840/front-end/images/apple-touch-icon-72x72.png -------------------------------------------------------------------------------- /front-end/images/apple-touch-icon-76x76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andy-set-studio/stalfos/ad9e3e087c101367d2e2b2adc0708173cf88f840/front-end/images/apple-touch-icon-76x76.png -------------------------------------------------------------------------------- /front-end/images/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andy-set-studio/stalfos/ad9e3e087c101367d2e2b2adc0708173cf88f840/front-end/images/apple-touch-icon.png -------------------------------------------------------------------------------- /front-end/images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andy-set-studio/stalfos/ad9e3e087c101367d2e2b2adc0708173cf88f840/front-end/images/favicon.ico -------------------------------------------------------------------------------- /front-end/images/icons/svg-symbols.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /front-end/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "stalfos", 3 | "version": "1.1.0", 4 | "description": "A little project for building front-end templates with html, scss, js and svg", 5 | "scripts": {}, 6 | "repository": {}, 7 | "author": "hankchizljaw", 8 | "license": "ISC", 9 | "devDependencies": { 10 | "gulp-autoprefixer": "~3.1.0", 11 | "gulp-clean-css": "^2.0.13", 12 | "gulp-concat": "^2.5.2", 13 | "gulp-connect": "^2.2.0", 14 | "gulp-data": "~1.2.0", 15 | "del": "~2.2.2", 16 | "gulp": "~3.9.1", 17 | "gulp-nunjucks-render": "~2.2.1", 18 | "gulp-plumber": "^1.0.2", 19 | "gulp-prettify": "~0.4.0", 20 | "gulp-sass": "^2.2.0", 21 | "gulp-sourcemaps": "^1.5.2", 22 | "gulp-svgmin": "^1.1.2", 23 | "gulp-svg-symbols": "1.0.0", 24 | "gulp-uglify": "^1.2.0", 25 | "gulp-watch": "^4.1.1", 26 | "gulp-wrap": "~0.11.0", 27 | "merge-stream": "~1.0.0", 28 | "run-sequence": "^1.1.5" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /front-end/scripts/_helpers.js: -------------------------------------------------------------------------------- 1 | (function($) { 2 | 3 | /*------------------------------------*\ 4 | ANY 5 | 6 | This will return true if there are any items 7 | in a jQuery collection. 8 | 9 | EXAMPLE 10 | 11 | var items = $(".item"); 12 | 13 | if(items.any()) { 14 | console.log("YAY!"); 15 | } 16 | \*------------------------------------*/ 17 | 18 | $.fn.any = function() { 19 | return $(this).length > 0; 20 | } 21 | 22 | 23 | /*------------------------------------*\ 24 | PARSE SETTINGS 25 | 26 | This will try and parse inline json settings as an object literal to pass into a plugin 27 | 28 | EXAMPLE 29 | 30 |
31 | 32 | var item = $(".item"), 33 | settings = item.parseSettings(); 34 | 35 | console.log(settings.setting1); 36 | 37 | returns true; 38 | 39 | \*------------------------------------*/ 40 | $.fn.parseSettings = function () { 41 | 42 | var elem = $(this), 43 | response = {}; 44 | 45 | if (elem.attr("data-settings")) { 46 | 47 | try { 48 | response = $.parseJSON(elem.attr("data-settings")); 49 | } 50 | catch (ex) { 51 | console.error("Check input data. Message: " + ex.message); 52 | return {}; 53 | } 54 | } 55 | 56 | return response; 57 | }; 58 | 59 | 60 | /*------------------------------------*\ 61 | AJAX REQUEST 62 | 63 | A nice Ajax wrapper method 64 | 65 | EXAMPLE 66 | 67 | $.ajaxRequest({ 68 | url: "/test", 69 | callback(function(data, isSuccess) { 70 | 71 | if(isSuccess) { 72 | alert('All the data is WINNING'); 73 | } 74 | }); 75 | }); 76 | \*------------------------------------*/ 77 | $.extend({ 78 | ajaxRequest: function(options) { 79 | 80 | var settings = { 81 | dataType: "application/json", 82 | url: "/", 83 | data: {}, 84 | method: "GET", 85 | callback: null 86 | }; 87 | 88 | var init = function() { 89 | 90 | settings = $.extend(true, {}, settings, options); 91 | 92 | $.ajax({ 93 | contentType: settings.dataType, 94 | url: settings.url, 95 | data: settings.data, 96 | type: settings.method, 97 | success: function(responseData) { 98 | tryCallback(responseData); 99 | }, 100 | error: function(responseData) { 101 | tryCallback(responseData); 102 | } 103 | }); 104 | }, 105 | 106 | tryCallback = function(responseData) { 107 | 108 | if(typeof(settings.callback) == "function") { 109 | settings.callback(responseData, (responseData != null ? (responseData.status == 200 ? false : true) : true)); 110 | } 111 | } 112 | 113 | init(); 114 | 115 | } 116 | }); 117 | 118 | /*------------------------------------*\ 119 | AJAX HTML 120 | 121 | A wrapper to ajaxRequest for simple HTML getting 122 | 123 | EXAMPLE 124 | 125 | $.ajaxHtml('http://google.com', function(data) { 126 | // do stuff 127 | }); 128 | 129 | \*------------------------------------*/ 130 | $.extend({ 131 | ajaxHtml: function(url, callback) { 132 | $.ajaxRequest({ 133 | dataType: "text/html", 134 | url: url, 135 | callback: callback 136 | }); 137 | } 138 | }); 139 | 140 | 141 | /*------------------------------------*\ 142 | QUERY STRING 143 | 144 | A helper to work with query strings 145 | 146 | toJson: take the current query string and return it as json 147 | fromJson: takes a json object and converts into a query string 148 | 149 | \*------------------------------------*/ 150 | $.extend({ 151 | queryString: { 152 | 153 | toJson: function(ignoreKeys) { 154 | var response = {}, 155 | data = window.location.href.toString().toLowerCase(), 156 | splitData = []; 157 | 158 | // Return empty object if undefined 159 | if(typeof(data) == 'undefined') { 160 | return {}; 161 | } 162 | 163 | // Return empty object if empty 164 | if(data.length == 0) { 165 | return {}; 166 | } 167 | 168 | // Set empty array if ignore keys not set 169 | if(typeof(ignoreKeys) == 'undefined') { 170 | ignoreKeys = []; 171 | } 172 | 173 | // Split query string into array 174 | splitData = data.split('?')[1].split('&'); 175 | 176 | // Loop and create key value pairs 177 | for (var i = 0, l = splitData.length; i < l; i++) { 178 | var param = splitData[i].split('='); 179 | response[param[0]] = param[1]; 180 | } 181 | 182 | // Check ignore keys length 183 | if(ignoreKeys.length > 0) { 184 | 185 | // Loop each one and delete if exists 186 | $.each(ignoreKeys, function(i, val) { 187 | 188 | if(response.hasOwnProperty(val)) { 189 | delete response[val]; 190 | } 191 | }); 192 | 193 | } 194 | 195 | return response; 196 | }, 197 | 198 | fromJson: function(data) { 199 | return '?' + $.param(data).replace('?', '&'); 200 | } 201 | } 202 | }); 203 | 204 | 205 | /*------------------------------------*\ 206 | ESC 207 | 208 | A useful little wrapper for the escape key press event 209 | 210 | EXAMPLE 211 | 212 | $.esc({ 213 | callback: function(evt) { 214 | 215 | // Close your modal or whatever. Accessibility FTW 216 | } 217 | }); 218 | 219 | \*------------------------------------*/ 220 | $.extend({ 221 | esc: function(options) { 222 | 223 | var settings = { 224 | callback: null 225 | } 226 | 227 | settings = $.extend(true, {}, settings, options); 228 | 229 | if(typeof(settings.callback) == 'function') { 230 | 231 | $(document).keyup(function(evt) { 232 | 233 | // escape key maps to keycode `27` 234 | if (evt.keyCode == 27) { 235 | 236 | // run callback and pass the event over 237 | settings.callback(evt); 238 | } 239 | }); 240 | } 241 | 242 | } 243 | }); 244 | 245 | /*------------------------------------*\ 246 | GET BREAKPOINT 247 | 248 | Returns the current CSS breakpoint as defined in global.scss 249 | \*------------------------------------*/ 250 | $.extend({ 251 | getBreakpoint: function() { 252 | return window.getComputedStyle(document.querySelector('body'), ':before').getPropertyValue('content').replace(/\"/g, ''); 253 | } 254 | }); 255 | 256 | /*------------------------------------*\ 257 | CHANGE EVENT 258 | 259 | A helper to return the correct 'change' event for an element 260 | 261 | EXAMPLE 262 | 263 | var event = $('.item').changeEvent(); 264 | 265 | \*------------------------------------*/ 266 | $.fn.changeEvent = function() { 267 | 268 | var elem = $(this), 269 | response = 'change'; 270 | 271 | // Work out what the change event will be, based on input type 272 | switch(elem.prop('tagName').toString().toLowerCase()) { 273 | case 'input': 274 | 275 | if(elem.attr('type') != 'checkbox' && elem.attr('type') != 'radio') { 276 | response = 'input'; 277 | } 278 | 279 | break; 280 | } 281 | 282 | return response; 283 | }; 284 | }($)); 285 | 286 | // TAKEN FROM David Walsh blog - http://davidwalsh.name/javascript-debounce-function 287 | // Returns a function, that, as long as it continues to be invoked, will not 288 | // be triggered. The function will be called after it stops being called for 289 | // N milliseconds. If `immediate` is passed, trigger the function on the 290 | // leading edge, instead of the trailing. 291 | function debounce(func, wait, immediate) { 292 | var timeout; 293 | return function() { 294 | var context = this, args = arguments; 295 | var later = function() { 296 | timeout = null; 297 | if (!immediate) func.apply(context, args); 298 | }; 299 | var callNow = immediate && !timeout; 300 | clearTimeout(timeout); 301 | timeout = setTimeout(later, wait); 302 | if (callNow) func.apply(context, args); 303 | }; 304 | }; 305 | -------------------------------------------------------------------------------- /front-end/scripts/app.js: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | CENTRAL APP MASTER 3 | 4 | This file includes the module placeholders system that allows modular 5 | binding of custom methods / plugins etc. 6 | 7 | EXAMPLE 8 | 9 |
10 | 11 | The above would meet two conditions in the below switch statement. 12 | 13 | \*------------------------------------*/ 14 | var app = (function($) { 15 | 16 | // Global settings 17 | var settings = { 18 | 19 | // Typeset module settings 20 | typeset: { 21 | enabled: true, 22 | selectors: 'h1, h2, h3, h4, h5, h6, p, li, dt, dd, blockquote' 23 | } 24 | }; 25 | 26 | // This method will run when the DOM is ready. 27 | var init = function() { 28 | 29 | // Find any module placeholders 30 | var modulePlaceholders = $('[data-module]'); 31 | 32 | if(modulePlaceholders.any()) { 33 | 34 | // Loop each placeholder 35 | modulePlaceholders.each(function() { 36 | 37 | var elem = $(this), 38 | modules = elem.attr('data-module'); 39 | 40 | // If any modules found 41 | if(modules) { 42 | 43 | // Split on the comma 44 | modules = modules.split(','); 45 | 46 | // Loop each module key 47 | $.each(modules, function(i, module) { 48 | 49 | // Run switch to bind each module to each key 50 | switch(module) { 51 | 52 | // This is an example. Delete when you add your own cases. 53 | case 'example1': 54 | 55 | // Run code here 56 | break; 57 | 58 | } 59 | 60 | }); 61 | } 62 | }); 63 | } 64 | 65 | // If typeset is enabled 66 | if(settings.typeset.enabled) { 67 | 68 | // Loop each item and bind it to the module 69 | $(settings.typeset.selectors).each(function() { 70 | $(this).typeSet(); 71 | }); 72 | } 73 | }; 74 | 75 | return { 76 | init: init 77 | } 78 | 79 | }(window.$)); 80 | 81 | // RUN!! 82 | app.init(); 83 | -------------------------------------------------------------------------------- /front-end/scripts/lib/_modernizr.js: -------------------------------------------------------------------------------- 1 | /* 2 | Modernizr custom build: http://modernizr.com/download/?-cssremunit-flexbox-setclasses 3 | */ 4 | !function(e,n,t){function r(e,n){return typeof e===n}function o(){var e,n,t,o,s,i,a;for(var l in C)if(C.hasOwnProperty(l)){if(e=[],n=C[l],n.name&&(e.push(n.name.toLowerCase()),n.options&&n.options.aliases&&n.options.aliases.length))for(t=0;tc;c++)if(h=e[c],v=P.style[h],a(h,"-")&&(h=l(h)),P.style[h]!==t){if(s||r(o,"undefined"))return f(),"pfx"==n?h:!0;try{P.style[h]=o}catch(g){}if(P.style[h]!=v)return f(),"pfx"==n?h:!0}return f(),!1}function v(e,n,t,o,s){var i=e.charAt(0).toUpperCase()+e.slice(1),a=(e+" "+b.join(i+" ")+i).split(" ");return r(n,"string")||r(n,"undefined")?h(a,n,o,s):(a=(e+" "+z.join(i+" ")+i).split(" "),u(a,n,t))}function y(e,n,r){return v(e,t,t,n,r)}var g=[],C=[],w={_version:"3.2.0",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(e,n){var t=this;setTimeout(function(){n(t[e])},0)},addTest:function(e,n,t){C.push({name:e,fn:n,options:t})},addAsyncTest:function(e){C.push({name:null,fn:e})}},Modernizr=function(){};Modernizr.prototype=w,Modernizr=new Modernizr;var x=n.documentElement,S="svg"===x.nodeName.toLowerCase();Modernizr.addTest("cssremunit",function(){var e=i("a").style;try{e.fontSize="3rem"}catch(n){}return/rem/.test(e.fontSize)});var _="Moz O ms Webkit",b=w._config.usePrefixes?_.split(" "):[];w._cssomPrefixes=b;var z=w._config.usePrefixes?_.toLowerCase().split(" "):[];w._domPrefixes=z;var E={elem:i("modernizr")};Modernizr._q.push(function(){delete E.elem});var P={style:E.elem.style};Modernizr._q.unshift(function(){delete P.style}),w.testAllProps=v,w.testAllProps=y,Modernizr.addTest("flexbox",y("flexBasis","1px",!0)),o(),s(g),delete w.addTest,delete w.addAsyncTest;for(var N=0;N]*(?:<|$))/), 16 | 17 | // Define what we want to process by giving a key value. Key being human readable and value being target index 18 | filters = { 19 | orphans: 0, 20 | widows: (textItems.length - 2) 21 | }, 22 | 23 | // Store the result 24 | result = ''; 25 | 26 | // Ignore this element if class set 27 | if(elem.hasClass(settings.ignoreClass) || elem.parents().hasClass(settings.ignoreClass)) { 28 | return; 29 | } 30 | 31 | // Ingnore if already processed 32 | if(elem.hasClass(settings.processedClass)) { 33 | return; 34 | } 35 | 36 | // Check there's enough words to play with 37 | if(textItems.length >= settings.minWords) { 38 | 39 | // Loop each filter 40 | for(var filterKey in filters) { 41 | 42 | // Double check we have an index 43 | if(!filters.hasOwnProperty(filterKey)) { 44 | continue; 45 | } 46 | 47 | // Find the target word for this filter 48 | var targetWord = textItems[filters[filterKey]]; 49 | 50 | // Stick a no break space to the end of the word and replace the instance in the array 51 | textItems[filters[filterKey]] = targetWord + ' '; 52 | } 53 | 54 | // Join the words together with a space 55 | result = textItems.join(' '); 56 | result = result.replace(/  /g, ' '); 57 | 58 | // Set the result 59 | elem.html(result); 60 | elem.addClass(settings.processedClass); 61 | } 62 | 63 | }; 64 | 65 | init(); 66 | return this; 67 | }; 68 | 69 | }($)); 70 | -------------------------------------------------------------------------------- /front-end/scss/framework/_build.scss: -------------------------------------------------------------------------------- 1 | /*☹ Force @charset "UTF-8"; generation*/ 2 | /*------------------------------------*\ 3 | VARS 4 | \*------------------------------------*/ 5 | @import "../project/vars/color"; 6 | @import "../project/vars/generic"; 7 | @import "../project/vars/metrics"; 8 | @import "../project/vars/typography"; 9 | 10 | /*------------------------------------*\ 11 | MIXINS 12 | \*------------------------------------*/ 13 | @import "mixins/bounce-scroll"; 14 | @import "mixins/ellipsis"; 15 | @import "mixins/feature-fail"; 16 | @import "mixins/font-size"; 17 | @import "mixins/hover"; 18 | @import "mixins/media-query"; 19 | @import "mixins/mode"; 20 | @import "mixins/no-js"; 21 | @import "mixins/placeholder"; 22 | @import "mixins/print"; 23 | @import "mixins/pseudo-decor"; 24 | @import "mixins/selection"; 25 | @import "mixins/word-wrap"; 26 | 27 | /*------------------------------------*\ 28 | HELPERS 29 | \*------------------------------------*/ 30 | @import "helpers/capitalize"; 31 | 32 | /*------------------------------------*\ 33 | CORE 34 | \*------------------------------------*/ 35 | @import "core/display"; -------------------------------------------------------------------------------- /front-end/scss/framework/core/_display.scss: -------------------------------------------------------------------------------- 1 | %is-hidden { 2 | display: none !important; 3 | } 4 | %is-hidden--palm { 5 | @include media-query("palm") { 6 | display: none !important; 7 | } 8 | } 9 | 10 | %is-hidden--portable { 11 | @include media-query("portable") { 12 | display: none !important; 13 | } 14 | } 15 | 16 | %is-hidden--portable-and-up { 17 | @include media-query("portable-and-up") { 18 | display: none !important; 19 | } 20 | } 21 | 22 | %is-hidden--lap { 23 | @include media-query("lap") { 24 | display: none !important; 25 | } 26 | } 27 | 28 | %is-hidden--lap-and-up { 29 | @include media-query("lap-and-up") { 30 | display: none !important; 31 | } 32 | } 33 | 34 | %is-hidden--desk { 35 | @include media-query("desk") { 36 | display: none !important; 37 | } 38 | } 39 | 40 | %is-hidden--desk-wide { 41 | @include media-query("desk-wide") { 42 | display: none !important; 43 | } 44 | } 45 | 46 | %is-visible { 47 | display: block !important; 48 | } 49 | 50 | %is-muted { 51 | opacity: 0.5 !important; 52 | } 53 | 54 | %is-hidden--text { 55 | display: block !important; 56 | height: 0px !important; 57 | width: 0px !important; 58 | overflow: hidden !important; 59 | clip: rect(1px, 1px, 1px, 1px) !important; 60 | visibility: hidden !important; 61 | } 62 | 63 | %no-print { 64 | @include print() { 65 | display: none !important; 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /front-end/scss/framework/core/_legacy-reset.scss: -------------------------------------------------------------------------------- 1 | // Legacy browsers need HTML5 elements to display as block 2 | .lt-ie9 { 3 | header, nav, article, section, aside, figure, figcaption, footer, main { 4 | display: block; 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /front-end/scss/framework/core/_reset.scss: -------------------------------------------------------------------------------- 1 | html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dd, header, nav, article, section, 2 | aside, figure, figcaption, footer, dl, dd, dt { 3 | margin: 0px; 4 | padding: 0px; 5 | } 6 | 7 | html { 8 | // Hide persistent scrollbar in IE (10/11) and Edge 9 | -ms-overflow-style: -ms-autohiding-scrollbar; 10 | } 11 | 12 | body { 13 | text-rendering: optimizeLegibility; 14 | } 15 | 16 | ul, ol { 17 | list-style: none; 18 | } 19 | 20 | img { 21 | border: 0; 22 | display: block; 23 | max-width: 100%; 24 | } 25 | 26 | // Firefox input fix 27 | input::-moz-focus-inner { 28 | border: 0; 29 | padding: 0; 30 | } 31 | 32 | // Normalise form field line-height in webkit browsers 33 | input::-webkit-input-placeholder, 34 | textarea::-webkit-input-placeholder, 35 | select::-webkit-input-placeholder { 36 | line-height: normal; 37 | } 38 | 39 | // Box sizing border box FTW! 40 | *, *:before, *:after { 41 | box-sizing: border-box; 42 | } 43 | -------------------------------------------------------------------------------- /front-end/scss/framework/file-templates/_mode-template.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | MODE TEMPLATE 3 | 4 | 5 | This template can be used to create a new 6 | mode. It builds the core framework and gives 7 | access to all imports such as components. 8 | \*------------------------------------*/ 9 | 10 | 11 | /*------------------------------------*\ 12 | IMPORT FRAMEWORK 13 | \*------------------------------------*/ 14 | @import "../framework/build"; 15 | 16 | /*------------------------------------*\ 17 | DECLARATIONS 18 | \*------------------------------------*/ 19 | $output-mode: "ADD_MODE_NAME_HERE (usually filename)"; 20 | 21 | /*------------------------------------*\ 22 | IMPORTS 23 | \*------------------------------------*/ 24 | @import "imports/mixins"; 25 | @import "imports/helpers"; 26 | @import "imports/animations"; 27 | @import "imports/components"; 28 | @import "imports/layouts"; 29 | @import "imports/third-party"; -------------------------------------------------------------------------------- /front-end/scss/framework/helpers/_capitalize.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | CAPITALIZE 3 | 4 | Capitalize is supported languages. Set to English initially. 5 | \*------------------------------------*/ 6 | %capitalize { 7 | html[lang*="en-"] &, 8 | html[lang="en"] & { 9 | text-transform: capitalize; 10 | } 11 | } -------------------------------------------------------------------------------- /front-end/scss/framework/mixins/_bounce-scroll.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | BOUNCE SCROLL 3 | 4 | A little helper to get 'bouncy' scroll areas on iOS 5 | \*------------------------------------*/ 6 | 7 | @mixin bounce-scroll($direction: "vertical") { 8 | 9 | -webkit-overflow-scrolling: touch; 10 | 11 | @if($direction == "vertical") { 12 | overflow-x: hidden; 13 | overflow-y: auto; 14 | } 15 | @else { 16 | overflow-x: auto; 17 | overflow-y: hidden; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /front-end/scss/framework/mixins/_ellipsis.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | ELLIPSIS 3 | 4 | Especially useful for when you want text to truncate 5 | gracefully in single line inline / inline-block elements 6 | \*------------------------------------*/ 7 | @mixin ellipsis() { 8 | position: relative; 9 | white-space: nowrap; 10 | overflow: hidden; 11 | text-overflow: ellipsis; 12 | } 13 | -------------------------------------------------------------------------------- /front-end/scss/framework/mixins/_feature-fail.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | FEATURE FAIL 3 | 4 | Use this mixin to write fallback css for bleeding edge features. 5 | Target modernizr classes for $feature. Automatically prefixes "no-" for you. 6 | 7 | E.G. 8 | 9 | .test-element { 10 | display: flex; 11 | 12 | @include feauture-fail("flexbox") { 13 | display: table; 14 | } 15 | } 16 | } 17 | \*------------------------------------*/ 18 | @mixin feature-fail($feature) { 19 | 20 | #{"html.no-" + $feature} & { 21 | @content; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /front-end/scss/framework/mixins/_font-size.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | FONT SIZE 3 | 4 | This mixin will generate a REM unit for your chosen font size. It will also add 5 | the usual pixel unit for a fallback for browsers that don't support REMS. 6 | 7 | This can also caluculate a line height for you based on your base line-height ratio. 8 | 9 | You can append an !important too. 10 | 11 | You can override the base line-height ratio if needed too. 12 | 13 | Usage example: 14 | 15 | With line-height: 16 | 17 | body { 18 | 19 | @include font-size(16px, true); 20 | } 21 | 22 | Without line-height: 23 | 24 | body { 25 | 26 | @include font-size(16px); 27 | } 28 | 29 | \*------------------------------------*/ 30 | 31 | @mixin font-size($size, $calculate-line-height: false, $important: false, $line-height-ratio: $base-line-height-ratio) { 32 | 33 | @if($important == true) { 34 | 35 | font-size: $size !important; 36 | font-size: ($size / $base-font-size)#{"rem"} !important; 37 | 38 | @if($calculate-line-height == true) { 39 | line-height: ($size * $line-height-ratio) !important; 40 | line-height: (($size / $base-font-size) * $line-height-ratio)#{"rem"} !important; 41 | } 42 | } 43 | @else { 44 | 45 | font-size: $size; 46 | font-size: ($size / $base-font-size)#{"rem"}; 47 | 48 | @if($calculate-line-height == true) { 49 | line-height: ($size * $line-height-ratio); 50 | line-height: (($size / $base-font-size) * $line-height-ratio)#{"rem"}; 51 | } 52 | } 53 | 54 | } 55 | -------------------------------------------------------------------------------- /front-end/scss/framework/mixins/_hover.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | HOVER 3 | 4 | A useful little mixin to help generate better hover / focus etc. states. 5 | This also has an 'include-active' flag which will help account for active states too. 6 | \*------------------------------------*/ 7 | @mixin hover($include-active: false) { 8 | 9 | @if($include-active) { 10 | 11 | &:active, 12 | &:hover, 13 | &:focus, 14 | &.is-active { 15 | @content; 16 | } 17 | } 18 | @else { 19 | 20 | &:focus, 21 | &:hover { 22 | @content; 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /front-end/scss/framework/mixins/_media-query.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | MEDIA QUERY 3 | 4 | This mixin will wrap your code in the appropriate media query of your choosing. 5 | 6 | For example. If you want to make the body background magenta on mobile only: 7 | 8 | body { 9 | @include media-query(palm) { 10 | background: magenta; 11 | } 12 | } 13 | \*------------------------------------*/ 14 | @mixin media-query($alias, $screen-only:true) { 15 | 16 | $calculated-breakpoint: ""; 17 | 18 | @if($alias == "palm") { 19 | $calculated-breakpoint: $breakpoint--palm; 20 | } 21 | 22 | @if($alias == "portable") { 23 | $calculated-breakpoint: $breakpoint--portable; 24 | } 25 | 26 | @if($alias == "portable-and-up") { 27 | $calculated-breakpoint: $breakpoint--portable-and-up; 28 | } 29 | 30 | @if($alias == "lap") { 31 | $calculated-breakpoint: $breakpoint--lap; 32 | } 33 | 34 | @if($alias == "lap-and-up") { 35 | $calculated-breakpoint: $breakpoint--lap-and-up; 36 | } 37 | 38 | @if($alias == "desk") { 39 | $calculated-breakpoint: $breakpoint--desk; 40 | } 41 | 42 | @if($alias == "desk-wide") { 43 | $calculated-breakpoint: $breakpoint--desk--wide; 44 | } 45 | 46 | @if($calculated-breakpoint != "") { 47 | 48 | @if($screen-only == true) { 49 | @media screen and #{$calculated-breakpoint} { 50 | @content; 51 | } 52 | } 53 | @else { 54 | @media all and #{$calculated-breakpoint} { 55 | @content; 56 | } 57 | } 58 | 59 | 60 | } 61 | 62 | } 63 | -------------------------------------------------------------------------------- /front-end/scss/framework/mixins/_mode.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | MODE 3 | 4 | This simple mixin allows you to fence css into particular sections. 5 | For example: you may have an admin area. The admin area uses the global 6 | styles but also has its own. You'd create a new file in your 'project' 7 | directory called 'admin.scss'. In there you would set '$mode: "admin"'. 8 | 9 | Within your components etc. you would then do the following: 10 | 11 | .a-css-class { 12 | 13 | // This stuff will only render in admin.css 14 | @include mode("admin") { 15 | background: red; 16 | } 17 | } 18 | \*------------------------------------*/ 19 | @mixin mode($mode) { 20 | @if($output-mode == $mode) { 21 | @content; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /front-end/scss/framework/mixins/_no-js.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | NO JS 3 | 4 | A simple mixin that will allow consistent no JS related styles 5 | \*------------------------------------*/ 6 | @mixin no-js($is-parent: false) { 7 | 8 | @if $is-parent == true { 9 | 10 | &.no-js { 11 | @content; 12 | } 13 | } 14 | @else { 15 | 16 | .no-js & { 17 | @content; 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /front-end/scss/framework/mixins/_placeholder.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | PLACEHOLDER 3 | 4 | This little mixin will help style those pesky placeholders 5 | \*------------------------------------*/ 6 | @mixin placeholder($color) { 7 | &::-webkit-input-placeholder { 8 | color: $color; 9 | opacity: 1; 10 | } 11 | 12 | &:-moz-placeholder { 13 | color: $color; 14 | opacity: 1; 15 | } 16 | 17 | &::-moz-placeholder { 18 | color: $color; 19 | opacity: 1; 20 | } 21 | 22 | &:-ms-input-placeholder { 23 | color: $color; 24 | opacity: 1; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /front-end/scss/framework/mixins/_print.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | PRINT 3 | 4 | A very simple "wrapper" that allows you to add print specific styles within your css. 5 | This is mainly in a mixin so that if anything changes in the future, we can just update this 6 | mixin rather than refactoring our whole project. 7 | 8 | Usage example: 9 | 10 | body { 11 | color: #f3f3f3; 12 | 13 | @include print { 14 | color: #000000; 15 | } 16 | } 17 | \*------------------------------------*/ 18 | @mixin print { 19 | 20 | @media print { 21 | @content; 22 | } 23 | 24 | } 25 | -------------------------------------------------------------------------------- /front-end/scss/framework/mixins/_pseudo-decor.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | PSEUDO DECOR 3 | 4 | Dump the default css for decor based &:before, &:after stuff. 5 | \*------------------------------------*/ 6 | @mixin pseudo-decor() { 7 | 8 | content: ""; 9 | speak: none; 10 | } 11 | 12 | 13 | // Return the correct spelling to support codebases that might 14 | // be using the old, incorrect spelling 15 | @mixin sudo-decor() { 16 | 17 | @warn "'sudo-decor' is deprecated. Use 'pseudo-decor' instead."; 18 | @include pseudo-decor(); 19 | } 20 | -------------------------------------------------------------------------------- /front-end/scss/framework/mixins/_selection.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | SELECTION 3 | 4 | A useful little mixin for styling text selection. 5 | \*------------------------------------*/ 6 | @mixin selection($background, $color) { 7 | 8 | ::-moz-selection { 9 | background: $background; 10 | color: $color; 11 | } 12 | 13 | ::selection { 14 | background: $background; 15 | color: $color; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /front-end/scss/framework/mixins/_word-wrap.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | WORD WRAP 3 | 4 | Useful little mixin for breaking words. 5 | Really useful for email links. 6 | \*------------------------------------*/ 7 | @mixin word-wrap() { 8 | word-break: break-word; 9 | -webkit-hyphens: auto; 10 | -moz-hyphens: auto; 11 | hyphens: auto; 12 | } 13 | -------------------------------------------------------------------------------- /front-end/scss/project/_shame.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | SHAME 3 | 4 | This file is for awful little hacks that sometime just can't be avoided. 5 | 6 | Please make sure you comment the hacks and refactor down the line. Please stop giggling. You might get to refactor one day. 7 | \*------------------------------------*/ 8 | -------------------------------------------------------------------------------- /front-end/scss/project/_z-index.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andy-set-studio/stalfos/ad9e3e087c101367d2e2b2adc0708173cf88f840/front-end/scss/project/_z-index.scss -------------------------------------------------------------------------------- /front-end/scss/project/animations/dummy.txt: -------------------------------------------------------------------------------- 1 | Delete me when you have .scss files to add. This file only exists to get this directory into source control. -------------------------------------------------------------------------------- /front-end/scss/project/components/_breathe.scss: -------------------------------------------------------------------------------- 1 | .breathe { 2 | 3 | @include mode("global") { 4 | 5 | &:not([class*="--mini"]):not([class*="--midi"]):not([class*="--top"]):not([class*="--bottom"]) { 6 | margin: $gutter 0; 7 | } 8 | 9 | &--top { 10 | margin-top: $gutter; 11 | } 12 | 13 | &--bottom { 14 | margin-bottom: $gutter; 15 | } 16 | 17 | &--mini { 18 | &:not([class*="--top"]):not([class*="--bottom"]) { 19 | margin: $gutter--mini 0; 20 | } 21 | } 22 | 23 | &--mini-top { 24 | margin-top: $gutter--mini; 25 | } 26 | 27 | &--mini-bottom { 28 | margin-bottom: $gutter--mini; 29 | } 30 | 31 | &--midi { 32 | &:not([class*="--top"]):not([class*="--bottom"]) { 33 | margin: $gutter--midi 0; 34 | } 35 | } 36 | 37 | &--midi-top { 38 | margin-top: $gutter--midi; 39 | } 40 | 41 | &--midi-bottom { 42 | margin-bottom: $gutter--midi; 43 | } 44 | 45 | 46 | &--double { 47 | &:not([class*="--top"]):not([class*="--bottom"]) { 48 | margin: $gutter--double 0; 49 | } 50 | } 51 | 52 | &--double-top { 53 | margin-top: $gutter--double; 54 | } 55 | 56 | &--double-bottom { 57 | margin-bottom: $gutter--double; 58 | } 59 | 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /front-end/scss/project/components/_chunk.scss: -------------------------------------------------------------------------------- 1 | .chunk { 2 | 3 | @include mode("global") { 4 | 5 | display: block; 6 | 7 | &:not([class*="--mini"]):not([class*="--midi"]):not([class*="--double"]):not([class*="--treble"]) { 8 | padding: $gutter 0; 9 | } 10 | 11 | &--mini { 12 | padding: $gutter--mini 0; 13 | } 14 | 15 | &--midi { 16 | padding: $gutter--midi 0; 17 | } 18 | 19 | &--double { 20 | padding: $gutter--double 0; 21 | } 22 | 23 | &--treble { 24 | padding: $gutter--treble 0; 25 | } 26 | 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /front-end/scss/project/components/_display.scss: -------------------------------------------------------------------------------- 1 | @include mode("global") { 2 | 3 | .is-hidden { 4 | @extend %is-hidden; 5 | } 6 | .is-hidden--palm { 7 | @extend %is-hidden--palm; 8 | } 9 | 10 | .is-hidden--portable { 11 | @extend %is-hidden--portable; 12 | } 13 | 14 | .is-hidden--portable-and-up { 15 | @extend %is-hidden--portable-and-up; 16 | } 17 | 18 | .is-hidden--lap { 19 | @extend %is-hidden--lap; 20 | } 21 | 22 | .is-hidden--lap-and-up { 23 | @extend %is-hidden--lap-and-up; 24 | } 25 | 26 | .is-hidden--desk { 27 | @extend %is-hidden--desk; 28 | } 29 | 30 | .is-hidden--desk-wide { 31 | @extend %is-hidden--desk-wide; 32 | } 33 | 34 | .is-visible { 35 | @extend %is-visible; 36 | } 37 | 38 | .is-muted { 39 | @extend %is-muted; 40 | } 41 | 42 | .is-hidden--text { 43 | @extend %is-hidden--text; 44 | } 45 | 46 | .no-print { 47 | @extend %no-print; 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /front-end/scss/project/components/_flow.scss: -------------------------------------------------------------------------------- 1 | // Define directions with their margin direction 2 | $flow__directions: ( 3 | ("horizontal", "left"), 4 | ("vertical", "top") 5 | ); 6 | 7 | // Set as either padding or margin 8 | $flow__property: "margin"; 9 | 10 | .flow { 11 | 12 | @include mode("global") { 13 | 14 | // Loop each option 15 | @each $direction in $flow__directions { 16 | 17 | // Build a class up 18 | &-#{ nth($direction, 1) } { 19 | 20 | // By default use $rhythm as it is 21 | &:not([class*="--mini"]):not([class*="--double"]):not([class*="--treble"]) { 22 | 23 | > * + * { 24 | #{ $flow__property }-#{ nth($direction, 2) }: $rhythm; 25 | } 26 | } 27 | 28 | // Halve it 29 | &--mini { 30 | 31 | > * + * { 32 | #{ $flow__property }-#{ nth($direction, 2) }: $rhythm--mini; 33 | } 34 | } 35 | 36 | // Halve it 37 | &--midi { 38 | 39 | > * + * { 40 | #{ $flow__property }-#{ nth($direction, 2) }: $rhythm--midi; 41 | } 42 | } 43 | 44 | // Double it 45 | &--double { 46 | 47 | > * + * { 48 | #{ $flow__property }-#{ nth($direction, 2) }: $rhythm--double; 49 | } 50 | } 51 | 52 | // Treble it 53 | &--treble { 54 | 55 | > * + * { 56 | #{ $flow__property }-#{ nth($direction, 2) }: $rhythm--treble; 57 | } 58 | } 59 | } 60 | } 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /front-end/scss/project/components/_icon.scss: -------------------------------------------------------------------------------- 1 | .icon { 2 | 3 | @include mode("global") { 4 | 5 | display: inline-block; 6 | vertical-align: middle; 7 | position: relative; 8 | width: 32px; 9 | height: 32px; 10 | speak: none; 11 | } 12 | 13 | } 14 | -------------------------------------------------------------------------------- /front-end/scss/project/components/_size.scss: -------------------------------------------------------------------------------- 1 | @include mode("global") { 2 | 3 | @mixin size-render($size) { 4 | 5 | /** 6 | * Whole 7 | */ 8 | #{$size}one-whole { 9 | width: 100%; 10 | } 11 | 12 | /** 13 | * Halves 14 | */ 15 | #{$size}one-half { 16 | width: 50%; 17 | } 18 | 19 | /** 20 | * Thirds 21 | */ 22 | #{$size}one-third { 23 | width: percentage(1/3); 24 | } 25 | 26 | #{$size}two-thirds { 27 | width: percentage(2/3); 28 | } 29 | 30 | /** 31 | * Quarters 32 | */ 33 | #{$size}one-quarter { 34 | width: percentage(1/4); 35 | } 36 | 37 | #{$size}two-quarters { 38 | width: 50%; 39 | } 40 | 41 | #{$size}three-quarters { 42 | width: percentage(3/4); 43 | } 44 | 45 | 46 | /** 47 | * Sixths 48 | */ 49 | #{$size}one-sixth { 50 | width: percentage(1/6); 51 | } 52 | 53 | #{$size}two-sixths { 54 | width: percentage(2/6); 55 | } 56 | 57 | #{$size}three-sixths { 58 | width: 50%; 59 | } 60 | 61 | #{$size}four-sixths { 62 | width: percentage(4/6); 63 | } 64 | 65 | #{$size}five-sixths { 66 | width: percentage(5/6); 67 | } 68 | 69 | /** 70 | * Tenths 71 | */ 72 | #{$size}one-tenth { 73 | width: 10%; 74 | } 75 | 76 | #{$size}two-tenths { 77 | width: 20%; 78 | } 79 | 80 | #{$size}three-tenths { 81 | width: 30%; 82 | } 83 | 84 | #{$size}four-tenths { 85 | width: 40%; 86 | } 87 | 88 | #{$size}six-tenths { 89 | width: 60%; 90 | } 91 | 92 | #{$size}seven-tenths { 93 | width: 70%; 94 | } 95 | 96 | #{$size}eight-tenths { 97 | width: 80%; 98 | } 99 | 100 | #{$size}nine-tenths { 101 | width: 90%; 102 | } 103 | 104 | /** 105 | * Twelfths 106 | */ 107 | #{$size}one-twelfths { 108 | width: percentage(1/12); 109 | } 110 | 111 | #{$size}two-twelfths { 112 | width: percentage(2/12); 113 | } 114 | 115 | #{$size}three-twelfths { 116 | width: percentage(3/12); 117 | } 118 | 119 | #{$size}four-twelfths { 120 | width: percentage(4/12); 121 | } 122 | 123 | #{$size}five-twelfths { 124 | width: percentage(5/12); 125 | } 126 | 127 | #{$size}six-twelfths { 128 | width: percentage(6/12); 129 | } 130 | 131 | #{$size}seven-twelfths { 132 | width: percentage(7/12); 133 | } 134 | 135 | #{$size}eight-twelfths { 136 | width: percentage(8/12); 137 | } 138 | 139 | #{$size}nine-twelfths { 140 | width: percentage(9/12); 141 | } 142 | 143 | #{$size}ten-twelfths { 144 | width: percentage(10/12); 145 | } 146 | 147 | #{$size}eleven-twelfths { 148 | width: percentage(11/12); 149 | } 150 | } 151 | 152 | @each $size in $size--available-breakpoints { 153 | 154 | // Include media query if size isn't blank 155 | @if(str-length($size) > 0) { 156 | 157 | @include media-query($size) { 158 | @include size-render(#{"." + $size + "__"}); 159 | } 160 | } 161 | 162 | // Render static sizes if blank 163 | @else { 164 | @include size-render(#{"."}); 165 | } 166 | } 167 | } 168 | -------------------------------------------------------------------------------- /front-end/scss/project/components/_text.scss: -------------------------------------------------------------------------------- 1 | .text { 2 | 3 | @include mode("global") { 4 | 5 | &:not([class*="--right"]):not([class*="--center"]) { 6 | text-align: left; 7 | } 8 | 9 | &--align-right { 10 | text-align: right; 11 | } 12 | 13 | &--align-center { 14 | text-align: center; 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /front-end/scss/project/components/_wrapper.scss: -------------------------------------------------------------------------------- 1 | .wrapper { 2 | 3 | @include mode("global") { 4 | 5 | min-width: $site-min-width; 6 | max-width: $site-max-width; 7 | margin: 0 auto; 8 | position: relative; 9 | 10 | // Only add padding if not flush 11 | &:not([class*="wrapper--flush"]) { 12 | padding: 0 $gutter; 13 | } 14 | 15 | // Extra padding at lap and up to make it narrow 16 | &--narrow { 17 | 18 | @include media-query("lap-and-up") { 19 | 20 | // Still check this element hasn't got the flush modifier 21 | &:not([class*="wrapper--flush"]) { 22 | padding: 0 $gutter--treble; 23 | } 24 | } 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /front-end/scss/project/global.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | IMPORT FRAMEWORK 3 | \*------------------------------------*/ 4 | @import "../framework/build"; 5 | @import "../framework/core/reset"; 6 | 7 | 8 | /*------------------------------------*\ 9 | ADD SOME GLOBAL STYLES 10 | \*------------------------------------*/ 11 | html { 12 | width: 100%; 13 | height: 100%; 14 | font-size: $base-font-size; 15 | } 16 | 17 | body { 18 | font-family: $base-font-family; 19 | min-width: $site-min-width; 20 | min-height: 100%; 21 | -webkit-text-size-adjust: 100%; 22 | 23 | @include font-size($base-font-size, true); 24 | } 25 | 26 | a[href^="mailto"] { 27 | @include word-wrap(); 28 | } 29 | 30 | .clear { 31 | 32 | &:after, 33 | &:before { 34 | content: ""; 35 | clear: both; 36 | display: block; 37 | } 38 | } 39 | 40 | /*------------------------------------*\ 41 | PRINT MEDIA QUERIES 42 | 43 | Print media query keys as a sudo of body. 44 | This will allow JS to accurately determine 45 | what breakpoint we're at rather than doing 46 | nasty sniffs 👍 47 | \*------------------------------------*/ 48 | body { 49 | 50 | &:before { 51 | display: none; 52 | speak: none; 53 | content: "palm"; 54 | 55 | @include media-query("portable-and-up") { 56 | content: "portable-and-up"; 57 | } 58 | 59 | @include media-query("lap-and-up") { 60 | content: "lap-and-up"; 61 | } 62 | 63 | @include media-query("desk") { 64 | content: "desk"; 65 | } 66 | 67 | @include media-query("desk-wide") { 68 | content: "desk-wide"; 69 | } 70 | } 71 | } 72 | 73 | /*------------------------------------*\ 74 | DECLARATIONS 75 | \*------------------------------------*/ 76 | $output-mode: "global"; 77 | 78 | /*------------------------------------*\ 79 | IMPORTS 80 | \*------------------------------------*/ 81 | @import "imports/mixins"; 82 | @import "imports/helpers"; 83 | @import "imports/animations"; 84 | @import "imports/components"; 85 | @import "imports/layouts"; 86 | @import "imports/third-party"; 87 | 88 | // Z-index rules 89 | @import "z-index"; 90 | 91 | // Import the shame 92 | @import "shame"; 93 | -------------------------------------------------------------------------------- /front-end/scss/project/helpers/_flex-wrapper.scss: -------------------------------------------------------------------------------- 1 | %flex-wrapper { 2 | display: flex; 3 | } 4 | 5 | %flex-wrapper--column { 6 | @extend %flex-wrapper; 7 | 8 | flex-direction: column; 9 | } 10 | 11 | %flex-wrapper--row { 12 | @extend %flex-wrapper; 13 | 14 | flex-direction: row; 15 | } 16 | -------------------------------------------------------------------------------- /front-end/scss/project/imports/_animations.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andy-set-studio/stalfos/ad9e3e087c101367d2e2b2adc0708173cf88f840/front-end/scss/project/imports/_animations.scss -------------------------------------------------------------------------------- /front-end/scss/project/imports/_components.scss: -------------------------------------------------------------------------------- 1 | @import "../components/breathe"; 2 | @import "../components/chunk"; 3 | @import "../components/display"; 4 | @import "../components/flow"; 5 | @import "../components/icon"; 6 | @import "../components/size"; 7 | @import "../components/text"; 8 | @import "../components/wrapper"; 9 | -------------------------------------------------------------------------------- /front-end/scss/project/imports/_helpers.scss: -------------------------------------------------------------------------------- 1 | @import "../helpers/flex-wrapper"; 2 | -------------------------------------------------------------------------------- /front-end/scss/project/imports/_layouts.scss: -------------------------------------------------------------------------------- 1 | @import "../layouts/grid"; 2 | @import "../layouts/site-foot"; 3 | @import "../layouts/site-head"; -------------------------------------------------------------------------------- /front-end/scss/project/imports/_mixins.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andy-set-studio/stalfos/ad9e3e087c101367d2e2b2adc0708173cf88f840/front-end/scss/project/imports/_mixins.scss -------------------------------------------------------------------------------- /front-end/scss/project/imports/_third-party.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andy-set-studio/stalfos/ad9e3e087c101367d2e2b2adc0708173cf88f840/front-end/scss/project/imports/_third-party.scss -------------------------------------------------------------------------------- /front-end/scss/project/layouts/_grid.scss: -------------------------------------------------------------------------------- 1 | .grid { 2 | 3 | @include mode("global") { 4 | 5 | /*------------------------------------*\ 6 | GRID WRAPPER 7 | \*------------------------------------*/ 8 | 9 | display: flex; 10 | flex-direction: row; 11 | justify-content: flex-start; 12 | flex-wrap: wrap; 13 | margin: #{-$gutter} 0 0 #{-$gutter}; 14 | padding: 0; 15 | 16 | .no-flexbox & { 17 | letter-spacing: -0.32em; 18 | list-style: none; 19 | } 20 | 21 | // Direct children will be grid items by default 22 | > * { 23 | padding: $gutter 0 0 $gutter; 24 | 25 | .no-flexbox & { 26 | display: inline-block; 27 | vertical-align: top; 28 | letter-spacing: normal; 29 | word-spacing: normal; 30 | } 31 | 32 | // Full width at mobile by default unless a size is set 33 | @include media-query("palm") { 34 | 35 | &:not([class*="palm"]) { 36 | width: 100%; 37 | } 38 | } 39 | } 40 | 41 | /*------------------------------------*\ 42 | GRID MODIFIERS 43 | \*------------------------------------*/ 44 | 45 | &--rev { 46 | flex-direction: row-reverse; 47 | justify-content: flex-end; 48 | 49 | .no-flexbox & { 50 | direction: rtl; 51 | text-align: left; 52 | 53 | > * { 54 | direction: ltr; 55 | text-align: left; 56 | } 57 | } 58 | } 59 | 60 | // Remove margins and gutters 61 | &--full { 62 | margin: 0; 63 | 64 | > * { 65 | padding: 0; 66 | } 67 | } 68 | 69 | // Halve the gutter width 70 | &--narrow { 71 | margin: #{-($gutter / 2)} 0 0 #{-($gutter / 2)}; 72 | 73 | > * { 74 | padding: #{$gutter / 2} 0 0 #{$gutter / 2}; 75 | } 76 | } 77 | 78 | // Double the gutter width 79 | &--wide { 80 | margin: #{-($gutter * 2)} 0 0 #{-($gutter * 2)}; 81 | 82 | > * { 83 | padding: #{$gutter * 2} 0 0 #{$gutter * 2}; 84 | } 85 | } 86 | 87 | // Right align items 88 | &--right { 89 | justify-content: flex-end; 90 | 91 | .no-flexbox & { 92 | text-align: right; 93 | 94 | > * { 95 | text-align: left; 96 | } 97 | } 98 | } 99 | 100 | // Center align items 101 | &--center { 102 | justify-content: center; 103 | 104 | .no-flexbox & { 105 | text-align: center; 106 | 107 | > * { 108 | text-align: left; 109 | } 110 | } 111 | } 112 | 113 | // Vertically center align items 114 | &--middle { 115 | align-items: center; 116 | 117 | .no-flexbox & { 118 | > * { 119 | vertical-align: middle; 120 | } 121 | } 122 | } 123 | 124 | // Vertically align items at the bottom 125 | &--bottom { 126 | align-items: flex-end; 127 | 128 | .no-flexbox & { 129 | > * { 130 | vertical-align: bottom; 131 | } 132 | } 133 | } 134 | 135 | // Vertically align items at the top 136 | &--top { 137 | align-items: flex-start; 138 | 139 | .no-flexbox & { 140 | > * { 141 | vertical-align: top; 142 | } 143 | } 144 | } 145 | 146 | // Level heights. Will level the inner child element of your grid item 147 | &--level-heights { 148 | 149 | @include media-query("lap-and-up") { 150 | 151 | > * { 152 | display: flex; 153 | flex-direction: column; 154 | 155 | > * { 156 | flex: auto; 157 | } 158 | } 159 | } 160 | } 161 | 162 | // Make grid items split between each other 163 | &--split { 164 | justify-content: space-between; 165 | } 166 | } 167 | } 168 | -------------------------------------------------------------------------------- /front-end/scss/project/layouts/_site-foot.scss: -------------------------------------------------------------------------------- 1 | .site-foot { 2 | 3 | @include mode("global") { 4 | 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /front-end/scss/project/layouts/_site-head.scss: -------------------------------------------------------------------------------- 1 | .site-head { 2 | 3 | @include mode("global") { 4 | 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /front-end/scss/project/legacy.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | LEGACY 3 | 4 | Styles for our old browser friends 5 | \*------------------------------------*/ 6 | 7 | 8 | /*------------------------------------*\ 9 | IMPORT FRAMEWORK 10 | \*------------------------------------*/ 11 | @import "../framework/build"; 12 | @import "../framework/core/legacy-reset"; 13 | 14 | /*------------------------------------*\ 15 | DECLARATIONS 16 | \*------------------------------------*/ 17 | $output-mode: "legacy"; 18 | 19 | /*------------------------------------*\ 20 | IMPORTS 21 | \*------------------------------------*/ 22 | @import "imports/mixins"; 23 | @import "imports/helpers"; 24 | @import "imports/components"; 25 | @import "imports/layouts"; 26 | @import "imports/third-party"; 27 | -------------------------------------------------------------------------------- /front-end/scss/project/mixins/dummy.txt: -------------------------------------------------------------------------------- 1 | Delete me when you have .scss files to add. This file only exists to get this directory into source control. -------------------------------------------------------------------------------- /front-end/scss/project/third-party/dummy.txt: -------------------------------------------------------------------------------- 1 | Delete me when you have .scss files to add. This file only exists to get this directory into source control. -------------------------------------------------------------------------------- /front-end/scss/project/vars/_color.scss: -------------------------------------------------------------------------------- 1 | $black: #000000; 2 | $white: #ffffff; -------------------------------------------------------------------------------- /front-end/scss/project/vars/_generic.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andy-set-studio/stalfos/ad9e3e087c101367d2e2b2adc0708173cf88f840/front-end/scss/project/vars/_generic.scss -------------------------------------------------------------------------------- /front-end/scss/project/vars/_metrics.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | GENERIC 3 | \*------------------------------------*/ 4 | $gutter: 20px; 5 | $gutter--mini: ($gutter / 2); 6 | $gutter--midi: ($gutter + ($gutter / 2)); 7 | $gutter--double: ($gutter * 2); 8 | $gutter--treble: ($gutter * 3); 9 | $site-max-width: 1000px; 10 | $site-min-width: (320px - $gutter--double); 11 | $radius: 4px; 12 | $radius--mini: ($radius / 2); 13 | $radius--midi: ($radius + ($radius / 2)); 14 | $radius--double: ($radius * 2); 15 | $radius--treble: ($radius * 3); 16 | $rhythm: 14px; 17 | $rhythm--mini: ($rhythm / 2); 18 | $rhythm--midi: ($rhythm + ($rhythm / 2)); 19 | $rhythm--double: ($rhythm * 2); 20 | $rhythm--treble: ($rhythm * 3); 21 | 22 | /*------------------------------------*\ 23 | BREAKPOINTS 24 | \*------------------------------------*/ 25 | $breakpoint--palm: "(max-width: 683px)"; 26 | $breakpoint--portable: "(max-width: 999px)"; 27 | $breakpoint--portable-and-up: "(min-width: 400px)"; 28 | $breakpoint--lap: "(min-width: 684px) and (max-width: 999px)"; 29 | $breakpoint--lap-and-up: "(min-width: 684px)"; 30 | $breakpoint--desk: "(min-width: 1000px)"; 31 | $breakpoint--desk--wide: "(min-width: 1300px)"; 32 | 33 | /*------------------------------------*\ 34 | SIZE SETTINGS 35 | \*------------------------------------*/ 36 | 37 | // Determine which breakpoints are available for the size component 38 | // Leave a blank item to generate a breakpoint free set too 39 | // Breakpoints must match those set above ^^ 40 | $size--available-breakpoints: "", "portable", "lap-and-up", "desk"; -------------------------------------------------------------------------------- /front-end/scss/project/vars/_typography.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | FONT-FACE DECLARATIONS 3 | \*------------------------------------*/ 4 | 5 | /*------------------------------------*\ 6 | TYPOGRAPHY 7 | \*------------------------------------*/ 8 | $base-font-size: 16px; 9 | $base-line-height-ratio: 1.4; 10 | $tight-line-height-ratio: 1.2; 11 | $body-copy-line-height-ratio: 1.7; 12 | $base-font-family: Helvetica, Arial, sans-serif; 13 | -------------------------------------------------------------------------------- /front-end/svg/dummy.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /front-end/templates/index.html: -------------------------------------------------------------------------------- 1 | {% extends "layout/base.html" %} 2 | 3 | {% block content %} 4 | 5 |
6 |
7 |

{{ project_settings.name }} - Home

8 |

Your project is ready to go!

9 |

You can update this file in {your directory}/front-end/templates/index.html

10 |
11 |
12 | 13 | {% endblock %} 14 | -------------------------------------------------------------------------------- /front-end/templates/layout-partials/css.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | {% if project_settings.support_legacy_ie %} 4 | 5 | {% endif %} 6 | -------------------------------------------------------------------------------- /front-end/templates/layout-partials/doctype.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | {% if project_settings.support_legacy_ie %} 4 | 5 | 6 | {% else %} 7 | 8 | {% endif %} 9 | -------------------------------------------------------------------------------- /front-end/templates/layout-partials/foot.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andy-set-studio/stalfos/ad9e3e087c101367d2e2b2adc0708173cf88f840/front-end/templates/layout-partials/foot.html -------------------------------------------------------------------------------- /front-end/templates/layout-partials/head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {% block title %} {{ project_settings.name }} {% endblock %} 6 | 7 | 8 | 9 | {% include "layout-partials/css.html" %} 10 | {% include "layout-partials/icons.html" %} 11 | 12 | -------------------------------------------------------------------------------- /front-end/templates/layout-partials/icons.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /front-end/templates/layout-partials/scripts.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /front-end/templates/layout/base.html: -------------------------------------------------------------------------------- 1 | {% include "layout-partials/doctype.html" %} 2 | {% include "layout-partials/head.html" %} 3 | 4 | {% macro icon(id) %} 5 | 8 | {% endmacro %} 9 | 10 | 11 | 12 | {% include "partials/site-head.html" %} 13 | 14 | {% block content %} 15 | {% endblock %} 16 | 17 | {% include "partials/site-foot.html" %} 18 | 19 | {% include "layout-partials/scripts.html" %} 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /front-end/templates/partials/site-foot.html: -------------------------------------------------------------------------------- 1 |
2 |
-------------------------------------------------------------------------------- /front-end/templates/partials/site-head.html: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "stalfos", 3 | "version": "1.4.0", 4 | "description": ">❗️❗️❗️ This repository is no longer maintained. Thanks to everyone for your help. It means a lot! ❗️❗️❗️", 5 | "main": "front-end/gulpfile.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/andybelldesign/stalfos.git" 12 | }, 13 | "keywords": [], 14 | "author": "", 15 | "license": "MIT", 16 | "bugs": { 17 | "url": "https://github.com/andybelldesign/stalfos/issues" 18 | }, 19 | "homepage": "https://github.com/andybelldesign/stalfos#readme" 20 | } 21 | --------------------------------------------------------------------------------