From 920f05297a1d0c5030849933bb3ccb5a84964534 Mon Sep 17 00:00:00 2001 From: Hans Christian Reinl Date: Thu, 20 Nov 2014 12:34:00 +0100 Subject: [PATCH] Remove Sass and replace with Pleeease This commit removes Sass support from the project and adds Pleeease as a CSS post-processor. Preprocessors do have a couple of problems: * CSS is meant to be declarative. Preprocessors add a lot of functions to it that are not easy to understand and require higher level thinking. Logicless-ness makes CSS simple. * Specificity is often problematic (e.g. with deep nesting). * People that are not used to one or the other preprocessor are left behind. Everyone knows CSS. Reference: #123. --- .gitignore | 1 - CHANGELOG.md | 2 + Gruntfile.js | 4 +- README.md | 16 ++-- bower.json | 4 +- docs/TOC.md | 2 +- docs/css.md | 70 ++++++++++++++++++ docs/faq.md | 21 ++++-- docs/grunt.md | 4 +- docs/html.md | 12 --- docs/scss.md | 39 ---------- docs/usage.md | 22 +++--- grunt/config.js | 10 +-- grunt/options/modernizr.js | 2 +- grunt/options/pleeease.js | 47 ++++++++++++ grunt/options/sass.js | 41 ---------- grunt/options/watch.js | 8 +- package.json | 6 +- .../_helpers.scss => css/base/helpers.css} | 0 src/css/base/variables.css | 18 +++++ .../elements/typography.css} | 4 +- .../layout/_base.scss => css/layout/base.css} | 8 +- .../_footer.scss => css/layout/footer.css} | 0 .../_header.scss => css/layout/header.css} | 0 src/css/layout/main.css | 74 +++++++++++++++++++ src/css/main.css | 24 ++++++ .../modules/_box.scss => css/modules/box.css} | 4 +- src/scss/base/_variables.scss | 16 ---- src/scss/layout/_main.scss | 3 - src/scss/main.scss | 30 -------- src/scss/media/_print.scss | 69 ----------------- 31 files changed, 295 insertions(+), 266 deletions(-) create mode 100644 docs/css.md delete mode 100644 docs/scss.md create mode 100644 grunt/options/pleeease.js delete mode 100644 grunt/options/sass.js rename src/{scss/base/_helpers.scss => css/base/helpers.css} (100%) create mode 100644 src/css/base/variables.css rename src/{scss/elements/_typography.scss => css/elements/typography.css} (53%) rename src/{scss/layout/_base.scss => css/layout/base.css} (91%) rename src/{scss/layout/_footer.scss => css/layout/footer.css} (100%) rename src/{scss/layout/_header.scss => css/layout/header.css} (100%) create mode 100644 src/css/layout/main.css create mode 100644 src/css/main.css rename src/{scss/modules/_box.scss => css/modules/box.css} (93%) delete mode 100644 src/scss/base/_variables.scss delete mode 100644 src/scss/layout/_main.scss delete mode 100644 src/scss/main.scss delete mode 100644 src/scss/media/_print.scss diff --git a/.gitignore b/.gitignore index f356c1d..cd3d4f8 100644 --- a/.gitignore +++ b/.gitignore @@ -4,7 +4,6 @@ *.sass-cache *.sublime-* -src/css dist bower_components node_modules diff --git a/CHANGELOG.md b/CHANGELOG.md index 87d549c..bf4892c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,8 @@ # Changelog ### HEAD + +* Remove Sass and replace with Pleeease * Update karma tasks to better reflect actual propose * Copy files that are needed in dest via grunt copy * Use grunt-sass with libsass for speed diff --git a/Gruntfile.js b/Gruntfile.js index d1eb082..75550b8 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -57,7 +57,7 @@ module.exports = function (grunt) { grunt.registerTask('dev', [ 'jshint', - 'sass:dev', + 'pleeease:dev', 'copy', 'requirejs', 'pages:dev' @@ -72,7 +72,7 @@ module.exports = function (grunt) { grunt.registerTask('build', [ 'jshint', 'modernizr', - 'sass:build', + 'pleeease:build', 'imagemin', 'copy', 'requirejs', diff --git a/README.md b/README.md index d60e8ed..8b1e848 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ This project is based upon [HTML5 Boilerplate](https://github.com/h5bp/html5-boilerplate) and adds more -structure for SCSS and JavaScript files, includes build tasks and a whole lot +structure for CSS and JavaScript files, includes build tasks and a whole lot more. [![Build Status](https://secure.travis-ci.org/use-init/init.svg?branch=master)](http://travis-ci.org/use-init/init) @@ -62,17 +62,11 @@ your knowledge. ## CSS -We are currently working with [Sass](http://sass-lang.com/) (in its dialect -SCSS) and do not use CSS directly. Please do not edit the CSS-files in any case -but search the corresponding `.scss` file and edit it accordingly. If you are -not familiar with SCSS you can write pure CSS which is actually valid SCSS. - -However all `.scss`-files are compiled into one file called `main.css` in the -`css`-folder. There is a productive-version (means minified), too. - -You can find more information about the installation process of Sass and the -usage of SCSS in the [Sass Tutorial](http://sass-lang.com/tutorial.html). +We are use vanilla CSS but enhance the experience using +[Pleeease](http://pleeease.io/) as a post processor. +However all `.css`-files are compiled into one file called `main.css` in the +`dist`-folder. There is a productive-version (means minified), too. ## JS diff --git a/bower.json b/bower.json index ba06b63..5036465 100644 --- a/bower.json +++ b/bower.json @@ -3,9 +3,7 @@ "version": "1.3.0", "dependencies": { "jquery": "1.11.1", - "normalize-scss": "3.0.1", "modernizr": "2.8.3", - "requirejs": "2.1.15", - "sass-mixins": "0.11.0" + "requirejs": "2.1.15" } } diff --git a/docs/TOC.md b/docs/TOC.md index 9b17495..48c8d16 100644 --- a/docs/TOC.md +++ b/docs/TOC.md @@ -9,7 +9,7 @@ * [Toolchain](toolchain.md) — The tools we use: GruntJS, Bower, RequireJS. * [HTML5 Boilerplate](html5-boilerplate.md) — More about the famous front-end template. -* [SCSS](scss.md) — How to use SCSS in INIT. +* [CSS](css.md) — How to use CSS in INIT. * [JavaScript](js.md) — A guide to the default JavaScript with RequireJS. * [Build process](grunt.md) - A detailed guide to the GruntJS configs. * [Testing](tests.md) — How to test your code with INIT. diff --git a/docs/css.md b/docs/css.md new file mode 100644 index 0000000..38e0573 --- /dev/null +++ b/docs/css.md @@ -0,0 +1,70 @@ +[« back to Table of Contents](TOC.md) + + +# CSS + +INIT uses [Pleeease](http://pleeease.io/) as a CSS post processor which enables +you to write straightforward CSS. + +Here are the major selling points: + +* Pleeease adds prefixes, based on Autoprefixer +* It provides fallbacks for rem unit, CSS3 pseudo-elements notation +* It adds opacity filter for IE8 +* It converts CSS shorthand filters to SVG equivalent +* It packs same media-query in one @media rule +* It inlines @import styles +* It minifies the result +* It enables you to use custom properties (variables) +* It has some color functions for you + +In INIT we modularize our styles in several components. +Most of the files contain some raw styles or example code so you can just view +the files to understand what they are thought for. Surely you can adapt the +files and contents of the files to your own project-style. + +## Concatenation + +As we use several single CSS-files they need to be concatenated for usage in +your project. This is done by the CSS `@import` rule within the +[`src/css/main.css`](../src/css/main.css) file. As you can see you just type the +folder and name of the file to import it. Please be aware that you must use the +path from the root directory. + +Notice: Don't forget to import a file in `main.css` if you created a new one in +the CSS structure so it will be added to the output file you use in your +project. + +## CSS Output + +You kick-off the post processor with grunt. To continuously generating the CSS +file on every change you do, run: + + grunt watch + +This runs the `watch` task with grunt which compiles your CSS. The watch task +outputs a non-minified annotated CSS file which is great for development. + +To get a compressed, production ready CSS file simply run the following command: + + grunt build + +See the [documentation about grunt](grunt.md) for more information about this +task. + +## Preprocessors + +We believe the CSS platform offers you everything that is needed to craft great +on-line experiences. CSS preprocessors such as LESS or Sass add a lot of value +for programmers. But there are some pain points which we think make it hard to +use these preprocessors. + +* CSS is meant to be declarative. Preprocessors add a lot of functions to it + that are not easy to understand and require higher level thinking. Logicless- + ness makes CSS simple. +* Specificity is often problematic (e.g. with deep nesting). +* People that are not used to one or the other preprocessor are left behind. + Everyone knows CSS. + +Our post-processor enables you to use variables (known as custom properties), +color functions and takes care of vendor prefixing. diff --git a/docs/faq.md b/docs/faq.md index 6da483f..498c38c 100644 --- a/docs/faq.md +++ b/docs/faq.md @@ -4,18 +4,29 @@ ## General -If you need assistance with the INIT project please have a look at the [README](../README.md) and documenation ([TOC.md](TOC.md)) first. If you can't find a solution there, please [create an issue on GitHub](https://github.com/use-init/init/issues) and provide all details necessary to reproduce your problem. +If you need assistance with the INIT project please have a look at the +[README](../README.md) and documenation ([TOC.md](TOC.md)) first. If you can't +find a solution there, please +[create an issue on GitHub](https://github.com/use-init/init/issues) and provide +all details necessary to reproduce your problem. ## FAQ ### I am having issues with Grunt aborting the task -It is likely [JSHint](http://www.jshint.com/) encountered problems in your code. Ensure you stick to the [`.jshintrc`](../.jshintrc) configuration (or change it as you need it) and check again if the JSHint task outputs any warnings or errors. +It is likely [JSHint](http://www.jshint.com/) encountered problems in your code. +Ensure you stick to the [`.jshintrc`](../.jshintrc) configuration (or change it +as you need it) and check again if the JSHint task outputs any warnings or +errors. -You might also make sure that all dependencies are installed propertly. Please [see the Usage section](usage.md) for more information. +You might also make sure that all dependencies are installed propertly. Please +[see the Usage section](usage.md) for more information. -Also if you added new Sass files ensure you add them not only as files but also in [`main.scss`](../scss/main.scss) as import with the proper name. +Also if you added new CSS files ensure you add them not only as files but also +in [`main.css`](../src/css/main.css) as import with the proper name. ### I am getting a warning about `.jshintrc` config. -You might have forgotten to copy the hidden files in your working directory. Ensure you have `.jshintrc`, `.htaccess`, `editorconfig`, `.gitattributes`, `.gitignore` and `.travis.yml` in the root of your INIT project folder. +You might have forgotten to copy the hidden files in your working directory. +Ensure you have `.jshintrc`, `.htaccess`, `editorconfig`, `.gitattributes`, +`.gitignore` and `.travis.yml` in the root of your INIT project folder. diff --git a/docs/grunt.md b/docs/grunt.md index fc0dfe1..e6f91e2 100644 --- a/docs/grunt.md +++ b/docs/grunt.md @@ -11,7 +11,7 @@ tasks you need for development and deployment of a web project. * [grunt-contrib-clean](https://github.com/gruntjs/grunt-contrib-clean) cleans your build directory before doing a new build * [grunt-contrib-copy](https://github.com/gruntjs/grunt-contrib-copy) copies files from the development directories into the build directory * [grunt-contrib-watch](https://github.com/gruntjs/grunt-contrib-watch) watches files for changes -* [grunt-contrib-sass](https://github.com/gruntjs/grunt-contrib-sass) runs the Sass task and builds the CSS files +* [grunt-pleeease](https://github.com/danielhusar/grunt-pleeease) runs the Pleeease task and builds the CSS files * [grunt-contrib-requirejs](https://github.com/gruntjs/grunt-contrib-requirejs) runs requireJS and builds the JS files * [grunt-modernizr](https://github.com/Modernizr/grunt-modernizr) builds a custom Modernizr build based on your used tests * [grunt-contrib-connect](https://github.com/gruntjs/grunt-contrib-connect) runs a static web server with root on your working directory @@ -44,7 +44,7 @@ For development you can run Grunt initially once by calling: $ grunt -To listen continuously to changes you do in files (e.g. Sass) you can type: +To listen continuously to changes you do in files (e.g. CSS) you can type: $ grunt watch diff --git a/docs/html.md b/docs/html.md index cd2d7fd..e502ab7 100644 --- a/docs/html.md +++ b/docs/html.md @@ -18,18 +18,6 @@ To target specific older Internet Explorer versions (up to IE9) we provide you C // add IE8 (and lower) specific styles here } -The last statement can also be simplified using Sass language by including it in your original statement: - - .yourclass { - // your normal styles for all browsers - - .lt-ie9 & { - // add IE8 (and lower) specific styles here - } - } - -Interpreted by Sass this will generate the same output as the example above except this is better readable in the original Sass file. - ## `` Explanations In the `` section we included some default markup which you might want to extend. Here are some tipps about what is added and what you can do. diff --git a/docs/scss.md b/docs/scss.md deleted file mode 100644 index 7fd6c6e..0000000 --- a/docs/scss.md +++ /dev/null @@ -1,39 +0,0 @@ -[« back to Table of Contents](TOC.md) - -# SCSS - -Init is using Sass with its .scss file format. Sass is a CSS preprocessor providing non-standardized functions and methods. You can read about the language in the [official Sass documentation](http://sass-lang.com/). - -In INIT we modularize our styles in several components. We have therefore divided the styles into the following folders: - -- [elements](../scss/elements) contains `_typography.scss` by default where you put your typographic styles in. -- [helpers](../scss/helpers) contains `_helpers.scss` like `.clearfix` / `.hidden` classes. -- [media](../scss/media) contains specific media styles. There are only large blocks like `_print.scss` as we use the inline media-query feature of Sass. -- [modules](../scss/modules) contains module blocks of your project. This means for example box styles or other layout component styles. -- [page](../scss/page) contains the page basic styles. This includes basic styles in `_main.scss` as well as 'templated' styles e.g. `_header.scss` or `_footer.scss`. - -Most of the files contain some raw styles or example code so you can just view the files to understand what they are thought for. Surely you can adapt the files and contents of the files to your own project-style. - -## Sass-Mixins - -We added some useful Sass Mixins to INIT as a Bower module so you can use them right away. Please refer to the [offical documentation of Sass-Mixins](//github.com/drublic/Sass-Mixins/blob/master/README.md) for usage instructions and report bugs from there to the project. - -## Concatenation - -As we use several single Sass-files they need to be concatenated for usage in your project. This is done by the Sass `@import` function within the [`scss/main.scss`](../scss/main.scss) file. As you can see there you just type the folder and name of the file without the leading `_` and without the file ending to import a file. - -Notice: Don't forget to import a file in `main.scss` if you created a new one in the Sass structure so it will be added to the `main.css` file you use in your project. - -## CSS Style - -You kick-off the preprocessor with grunt. To continuously generating the CSS file on every change you do, run: - - grunt watch - -This runs the `watch` task in grunt which includes also the `sass --watch` task. The watch task outputs a not minified CSS annotaed file which is great for development. - -To get a compressed, production ready CSS file simply run the following command: - - grunt build - -See the [documentation about grunt](grunt.md) for more information about this task. diff --git a/docs/usage.md b/docs/usage.md index 28c4574..05dc3f6 100644 --- a/docs/usage.md +++ b/docs/usage.md @@ -2,30 +2,28 @@ # General Purpose -Init is a project based upon HTML5 Boilerplate. It adds more structure to your SCSS and JavaScript files and helps you start your project faster by reducing boilerplate code and tasks. -Init includes build tasks for your projects, proivdes a test infrastructure and implements tools to help you creating web pages and apps fast. +Init is a project based upon HTML5 Boilerplate. It adds more structure to your +CSS and JavaScript files and helps you start your project faster by reducing +boilerplate code and tasks. + +Init includes build tasks for your projects, proivdes a test infrastructure and +implements tools to help you creating web pages and apps fast. # Starting Point -When starting a new project with init you will need to make sure to install some dependencies if you haven't already. +When starting a new project with init you will need to make sure to install some +dependencies if you haven't already. ## Clone the project $ git clone git@github.com:use-init/init.git -This will create a local clone of init in a subfolder called 'init' in the directory you choose before in the command line. You can rename the folder name. +This will create a local clone of INIT in a subfolder called 'init' in the +directory you choose before in the command line. You can rename the folder name. ## Dependencies -### Majors: - * Node.js -* Ruby - -#### Secondaries: - -* npm (comes with node) -* Sass (Ruby gem: `$ gem install sass`) Apart from that we make use of GruntJS and you might want to install it globally via: diff --git a/grunt/config.js b/grunt/config.js index 92c2ef2..563b252 100644 --- a/grunt/config.js +++ b/grunt/config.js @@ -33,13 +33,13 @@ module.exports = { dest: 'dist/<%= pkg.version %>/main.min.js' }, - // Sass files - sass: { + // CSS files + css: { files: [ - 'src/scss/**/*.scss' + 'src/css/**/*.css' ], - src: 'src/scss/main.scss', - devDest: 'src/css/main.css', + src: 'src/css/main.css', + devDest: 'dist/css/main.css', dest: 'dist/<%= pkg.version %>/main.min.css' }, diff --git a/grunt/options/modernizr.js b/grunt/options/modernizr.js index dfc3d52..9e916e4 100644 --- a/grunt/options/modernizr.js +++ b/grunt/options/modernizr.js @@ -20,7 +20,7 @@ module.exports = { // Files from configuration files: { - src: config.js.files.concat(config.sass.files) + src: config.js.files.concat(config.css.files) } } }; diff --git a/grunt/options/pleeease.js b/grunt/options/pleeease.js new file mode 100644 index 0000000..312802b --- /dev/null +++ b/grunt/options/pleeease.js @@ -0,0 +1,47 @@ +/** + * CSS + */ +'use strict'; + +var config = require('../config'); + +/* + * Helper + */ +var helper = {}; + +helper.cssDev = {}; +helper.cssDev[config.css.devDest] = config.css.src; + +helper.cssProd = {}; +helper.cssProd[config.css.dest] = config.css.src; + +module.exports = { + + // For development + dev: { + options: { + minifier: false, + next: { + customProperties: true, + colors: true + }, + sourcemaps: true + }, + + files: helper.cssDev + }, + + // For production + build: { + options: { + next: { + customProperties: true, + colors: true + }, + sourcemaps: true + }, + + files: helper.cssProd + } +}; diff --git a/grunt/options/sass.js b/grunt/options/sass.js deleted file mode 100644 index 69ffdc6..0000000 --- a/grunt/options/sass.js +++ /dev/null @@ -1,41 +0,0 @@ -/** - * Sass - */ -'use strict'; - -var config = require('../config'); - -/* - * Helper - */ -var helper = {}; - -helper.sassDev = {}; -helper.sassDev[config.sass.devDest] = config.sass.src; - -helper.sassProd = {}; -helper.sassProd[config.sass.dest] = config.sass.src; - -module.exports = { - - // For development - dev: { - options: { - unixNewlines: true, - style: 'expanded', - sourcemap: true - }, - - files: helper.sassDev - }, - - // For production - build: { - options: { - style: 'compressed', - banner: config.banner - }, - - files: helper.sassProd - } -}; diff --git a/grunt/options/watch.js b/grunt/options/watch.js index 8342197..7ab6e0b 100644 --- a/grunt/options/watch.js +++ b/grunt/options/watch.js @@ -6,9 +6,9 @@ var config = require('../config'); module.exports = { - scss: { - files: config.sass.files, - tasks: 'sass:dev', + css: { + files: config.css.files, + tasks: 'pleeease:dev', atBegin: true }, @@ -21,6 +21,6 @@ module.exports = { options: { livereload: true }, - files: ['src/css/**/*'] + files: config.css.files } }; diff --git a/package.json b/package.json index dd26b46..9a8ec4f 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,9 @@ "engines": { "node": ">=0.10" }, - "dependencies": {}, + "dependencies": { + "normalize.css": "3.0.2" + }, "devDependencies": { "bower": "1.3.12", "glob": "4.0.6", @@ -33,8 +35,8 @@ "grunt-contrib-watch": "0.6.1", "grunt-karma": "0.9.0", "grunt-modernizr": "0.6.0", + "grunt-pleeease": "^1.1.0", "grunt-replace": "0.8.0", - "grunt-sass": "^0.16.1", "jit-grunt": "^0.9.0", "karma": "0.12.24", "karma-chrome-launcher": "0.1.5", diff --git a/src/scss/base/_helpers.scss b/src/css/base/helpers.css similarity index 100% rename from src/scss/base/_helpers.scss rename to src/css/base/helpers.css diff --git a/src/css/base/variables.css b/src/css/base/variables.css new file mode 100644 index 0000000..30f9ea5 --- /dev/null +++ b/src/css/base/variables.css @@ -0,0 +1,18 @@ +/** + * Variables to be used throughout the project + */ +:root { + + /* Fonts */ + --font-main: sans-serif; + --font-key: Georgia, 'Times New Roman' serif; + + /*
color */ + --hr-color: #ccc; + + /* Text selection background color */ + --selection-color: #b3d4fc; + + /* Text Color */ + --main-color: #222; +} diff --git a/src/scss/elements/_typography.scss b/src/css/elements/typography.css similarity index 53% rename from src/scss/elements/_typography.scss rename to src/css/elements/typography.css index 3f6923f..028b871 100644 --- a/src/scss/elements/_typography.scss +++ b/src/css/elements/typography.css @@ -3,12 +3,12 @@ */ body { - font-family: $font-main; + font-family: var(--font-main); } h1, h2, h3, h4 { - font-family: $font-key; + font-family: var(--font-key); } diff --git a/src/scss/layout/_base.scss b/src/css/layout/base.css similarity index 91% rename from src/scss/layout/_base.scss rename to src/css/layout/base.css index b549648..dd7ee8c 100644 --- a/src/scss/layout/_base.scss +++ b/src/css/layout/base.css @@ -15,7 +15,7 @@ button, input, select, textarea { - color: $main-color; + color: var(--main-color); } body { @@ -30,12 +30,12 @@ body { */ ::-moz-selection { - background: $selection-color; + background: var(--selection-color); text-shadow: none; } ::selection { - background: $selection-color; + background: var(--selection-color); text-shadow: none; } @@ -47,7 +47,7 @@ hr { display: block; height: 1px; border: 0; - border-top: 1px solid $hr-color; + border-top: 1px solid var(--hr-color); margin: 1em 0; padding: 0; } diff --git a/src/scss/layout/_footer.scss b/src/css/layout/footer.css similarity index 100% rename from src/scss/layout/_footer.scss rename to src/css/layout/footer.css diff --git a/src/scss/layout/_header.scss b/src/css/layout/header.css similarity index 100% rename from src/scss/layout/_header.scss rename to src/css/layout/header.css diff --git a/src/css/layout/main.css b/src/css/layout/main.css new file mode 100644 index 0000000..91e991c --- /dev/null +++ b/src/css/layout/main.css @@ -0,0 +1,74 @@ +/** + * All styles related to markup inside the main element + */ + +/* ========================================================================== + Print styles. + Inlined to avoid the additional HTTP request: h5bp.com/r + ========================================================================== */ +@media print { + * { + background: transparent !important; + color: #000 !important; /* Black prints faster: h5bp.com/s */ + box-shadow:none !important; + text-shadow: none !important; + } + + a, + a:visited { + text-decoration: underline; + } + + a[href]:after { + content: " (" attr(href) ")"; + } + + abbr[title]:after { + content: " (" attr(title) ")"; + } + + /* + * Don't show links that are fragment identifiers, + * or use the `javascript:` pseudo protocol + */ + + a[href^="#"]:after, + a[href^="javascript:"]:after { + content: ""; + } + + pre, + blockquote { + border: 1px solid #999; + page-break-inside: avoid; + } + + thead { + display: table-header-group; /* h5bp.com/t */ + } + + tr, + img { + page-break-inside: avoid; + } + + img { + max-width: 100% !important; + } + + @page { + margin: 0.5cm; + } + + p, + h2, + h3 { + orphans: 3; + widows: 3; + } + + h2, + h3 { + page-break-after: avoid; + } +} diff --git a/src/css/main.css b/src/css/main.css new file mode 100644 index 0000000..b8d4c53 --- /dev/null +++ b/src/css/main.css @@ -0,0 +1,24 @@ +/** + * This project's description goes here + * + * @author Some author's name + * @version v0.0.0 + */ + + +/* Helpers */ +@import url('src/css/base/variables.css'); +@import url('node_modules/normalize.css/normalize.css'); +@import url('src/css/base/helpers.css'); + +/* Typography and Elements */ +@import url('src/css/elements/typography.css'); + +/* Layout */ +@import url('src/css/layout/base.css'); +@import url('src/css/layout/header.css'); +@import url('src/css/layout/main.css'); +@import url('src/css/layout/footer.css'); + +/* Modules */ +@import url('src/css/modules/box.css'); diff --git a/src/scss/modules/_box.scss b/src/css/modules/box.css similarity index 93% rename from src/scss/modules/_box.scss rename to src/css/modules/box.css index c8cc52f..1463e50 100644 --- a/src/scss/modules/_box.scss +++ b/src/css/modules/box.css @@ -9,8 +9,10 @@ * Configuration * Use module specific variables and prefix them with the namespace. * - * @example $box-background: #ddd; + * --box-property: value; */ +:root { +} /* * General styling diff --git a/src/scss/base/_variables.scss b/src/scss/base/_variables.scss deleted file mode 100644 index b550406..0000000 --- a/src/scss/base/_variables.scss +++ /dev/null @@ -1,16 +0,0 @@ -/** - * Variables to be used throughout the project - */ - -// Fonts -$font-main: 'Helvetica Neue', Helvetica, Arial, sans-serif; -$font-key: Georgia, 'Times New Roman' serif; - -//
color -$hr-color: #ccc; - -// Text selection background color -$selection-color: #b3d4fc; - -// Text Color -$main-color: #222; diff --git a/src/scss/layout/_main.scss b/src/scss/layout/_main.scss deleted file mode 100644 index 0467ae3..0000000 --- a/src/scss/layout/_main.scss +++ /dev/null @@ -1,3 +0,0 @@ -/** - * All styles related to markup inside the main element - */ diff --git a/src/scss/main.scss b/src/scss/main.scss deleted file mode 100644 index 338b94a..0000000 --- a/src/scss/main.scss +++ /dev/null @@ -1,30 +0,0 @@ -/** - * This project's description goes here - * - * @author Some author's name - * @version v0.0.0 - */ - - -// Helpers -@import 'base/variables'; -@import '../../bower_components/sass-mixins/mixins'; -@import '../../bower_components/normalize-scss/normalize'; -@import 'base/helpers'; - -// Typography and Elements -@import 'elements/typography'; - -// Layout -@import 'layout/base'; -@import 'layout/header'; -@import 'layout/main'; -@import 'layout/footer'; - -// Modules -@import 'modules/box'; - -// Print Stylesheets -@media print { - @import 'media/print'; -} diff --git a/src/scss/media/_print.scss b/src/scss/media/_print.scss deleted file mode 100644 index 8a7cc6c..0000000 --- a/src/scss/media/_print.scss +++ /dev/null @@ -1,69 +0,0 @@ -/* ========================================================================== - Print styles. - Inlined to avoid the additional HTTP request: h5bp.com/r - ========================================================================== */ - -* { - background: transparent !important; - color: #000 !important; /* Black prints faster: h5bp.com/s */ - box-shadow:none !important; - text-shadow: none !important; -} - -a, -a:visited { - text-decoration: underline; -} - -a[href]:after { - content: " (" attr(href) ")"; -} - -abbr[title]:after { - content: " (" attr(title) ")"; -} - -/* - * Don't show links that are fragment identifiers, - * or use the `javascript:` pseudo protocol - */ - -a[href^="#"]:after, -a[href^="javascript:"]:after { - content: ""; -} - -pre, -blockquote { - border: 1px solid #999; - page-break-inside: avoid; -} - -thead { - display: table-header-group; /* h5bp.com/t */ -} - -tr, -img { - page-break-inside: avoid; -} - -img { - max-width: 100% !important; -} - -@page { - margin: 0.5cm; -} - -p, -h2, -h3 { - orphans: 3; - widows: 3; -} - -h2, -h3 { - page-break-after: avoid; -}