Merge branch 'release/4.0.0-alpha.1'

.editorconfig

@@ -8,3 +8,7 @@ end_of_line = lf
 indent_size = 2
 indent_style = space
 insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -1,9 +1,34 @@
-.DS_Store
+# Numerous always-ignore extensions
+*.diff
+*.err
+*.log
+*.orig
+*.rej
+*.swo
+*.swp
+*.vi
+*.zip
+*~
 
-/template-project/scss/*/*.scss
+# OS or Editor folders
+._*
+.cache
+.DS_Store
+.idea
+.project
+.settings
+.tmproj
+*.esproj
+*.sublime-project
+*.sublime-workspace
+nbproject
+Thumbs.db
 
+# Folders to ignore
+backstop_data
+bitmaps_test
+bower_components
+dist
 node_modules
-
-# DEPRECATED
-/package_dev
-/vendor
+sassdoc
+tmp

.npmignore

@@ -0,0 +1,5 @@
+.editorconfig
+
+CONTRIBUTING.md
+
+test

.stylelintrc.js

@@ -0,0 +1,8 @@
+const declarationBlockPropertiesOrder = require(`./.csscomb.json`)[`sort-order`][0];
+
+module.exports = {
+  extends: `stylelint-config-modularis`,
+  rules: {
+    'declaration-block-properties-order': declarationBlockPropertiesOrder,
+  },
+};

.travis.yml

@@ -0,0 +1,8 @@
+language: node_js
+node_js:
+  - "node"
+install:
+  - npm install -g yarn
+  - yarn
+script:
+  - bash test/test.sh

CONTRIBUTING.md

@@ -5,7 +5,7 @@ Found a problem? Want a new feature?
 - See if your issue or idea has [already been reported].
 - Provide a [reduced test case] or a [live example].
 
-Remember, a bug is a _demonstrable problem_ caused by _our_ code.
+Remember, a bug is a *demonstrable problem* caused by *our* code.
 
 ## Submitting Pull Requests
 

README.md

@@ -1,193 +1,29 @@
 # avalanche
-avalanche is a modular front-end framework which can be extended with npm
-packages. The goal is to provide a workflow to manage the complexity of big
-front-end projects.
+[![Build Status](https://travis-ci.org/avalanchesass/avalanche.svg?branch=master)](https://travis-ci.org/avalanchesass/avalanche)
 
-## Getting started
-### Quick start
-- Install [npm](https://docs.npmjs.com/getting-started/installing-node) and
-[gulp](https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md) on
-your system (if not already installed).
-- Install avalanche globally `npm install -g avalanchesass`.
-- Run `avalanchesass --template="project" --name="Your project name"` to create
-a new avalanche project in the current directory.
-- Run `npm install` inside your newly created project directory.
-- Run `gulp` to start the build process.
+avalanche establishes the foundation for a package based CSS workflow. Heavy weight CSS toolkits often stay in your way when creating unique looking experiences or they lead to a rather bland design. But you don't have to reinvent the wheel for every new project either. avalanche provides building blocks for you to handpick and integrate into your workflow.
 
-### Extend avalanche
-The high modularity of avalanche requires that every part of the system is a
-distinct package. There are multiple package types:
+## Get started
+avalanche comes with a CLI to kickstart new projects:
 
-- **Function:** custom SASS functions
-- **Base:** base styles like typography and other global default styles (mostly
-unclassed HTML elements)
-- **Object:** non-cosmetic styles (such as the famous media object)
-- **Component:** concrete, implementation-specific piece of UI
-- **Utility:** utility classes that do specific things (for example clearfix)
-
-You can find various available packages on
-[npm](https://www.npmjs.com/browse/keyword/avalanchesass-package)  
-To extend your installation with a preconfigured package open your
-`package.json` file, add the package to your *dependencies* and run
-`npm install` afterwards.
-
-```json
-"dependencies": {
-  "avalanchesass_base_default": "^3.0.0",
-  "avalanchesass_base_form": "^3.0.0",
-  "avalanchesass_base_typography": "^3.0.0",
-  "avalanchesass_object_media": "^3.0.0",
-  "normalize-scss": "^4.0.3"
-}
-```
-
-## Working with avalanche
-### Extend packages
-If you wan’t to make changes to a class defined by a package it is recommended
-to create a custom package with the name `_PACKAGE_NAME_extend.scss` in the scss
-directory of your project.
-
-#### Example
-Extending the `.c-button` class of the button component:
-
-- Create a file `_button_extend.scss` in `scss/component`.
-- Define the `.c-button` class and override or change it’s properties.
-- You can also remove properties by setting their value to `initial` and adding
-a `/*!remove*/` comment at the end of the line.
-
-```scss
-.c-button {
-  padding: initial;/*!remove*/
-  text-transform: uppercase;
-}
+```bash
+# Install the avalanche CLI.
+npm install @avalanche/cli -g
+# Create a new project with the name "Your Project Name".
+avalanche "Your Project Name"
 ```
 
-**Attention:** removing properties and merging extended classes, will only
-happen in the minified version of the CSS code. But the styling of your site
-will be the same: setting a property value to `initial` has the same effect as
-removing the property from the original class. Extending the original class by
-defining it a second time, uses the default cascading behavior of CSS.
-
-### Override package variables
-Most packages define there own default variables which you can override to
-change the CSS output. There are two ways how to override variables of external
-and custom packages:
-
-1. Similar to the extending of packages, you can create a separate file in which
-you define the variables you want to override (for example
-`_button_variable.scss`).
-2. If you prefer to have one big file with all the variables inside, you can
-also override package variables inside the `_variable.scss` file in your
-projects `scss` directory.
-
-### CLI
-`avalanchesass --template="" [--type=""] [--name=""] [--path=""]`
-
-#### Options
-- `--template` *mandatory*  
-  possible values: project | package | package-custom
-- `--type` *optional*  
-  possible values: Function | Base | Object | Component | Utility  
-  default value: Component
-- `--name` *optional*  
-  possible values: "Your Project Name"  
-  default value: "Avalanche Project"
-- `--path` *optional*  
-  possible values: /path/to/somewhere  
-  default value: current working directory
-
-#### Examples
-**Create a project**  
-`avalanchesass --template="project" --name="Project Name"`
-
-**Create a `Component` package**  
-`avalanchesass --template="package" --type="Component" --name="Package Name"`
-
-**Create a custom `Object` package** *assuming you are in the project diretory*  
-`avalanchesass --template="package-custom" --type="Object" --name="Package Name" --path="scss/object"`
-
-### BEM
-avalanche uses the [BEM syntax](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/).
-To make the meaning of the classes more transparent every BEM class name is
-[namespaced](http://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/).
-The BEM syntax helps to prevent [side effects in CSS](http://philipwalton.com/articles/side-effects-in-css/)
-and the informative nature of the naming convention makes it ideal for teams and
-larger projects.
-
-```css
-.c-block {}
-.c-block__element {}
-.c-block--modifier {}
+avalanche is flexible in the way you can use it – it is also very easy to integrate avalanche packages into your existing project. [Learn more about how to use avalanche](https://avalanche.oberlehner.net/get-started/).
 
-.c-menu {}
-.c-menu__link {}
-.c-menu--horizontal {}
-```
-
-### Style guide
-avalanche uses [mdcss](https://github.com/jonathantneal/mdcss) to automatically
-generate a style guide from CSS comments in markdown syntax
-([avalanche style guide DEMO](http://avalanche.oberlehner.net)).
-
-Please follow the [official mdcss documentation](https://github.com/jonathantneal/mdcss#writing-documentation)
-on how to format comments in your SCSS code for the style guide.
-
-To generate the style guide run `gulp style_guide`. You can also run
-`gulp watch:style_guide` instead of the default `gulp` task to start the build
-process. This automatically generates the style guide on every change you make
-to your code base.
-
-### CSS extraction
-[HTTP/2](https://en.wikipedia.org/wiki/HTTP/2) is coming and changes the way
-[how we should build websites](https://mattwilcox.net/web-development/http2-for-front-end-web-developers).
-With HTTP/2 it can be faster to load multiple small files (but only those which
-are really needed) instead of one big file (with a potential overhead). Example:
-the pager component isn’t used on most of your pages but the styles are loaded
-on every request because they are concatenated into one big file.
-
-With CSS extraction you can split your styles into multiple separate CSS files.
-This makes it possible to load just the styles you need. Amongst other things
-there are the following advantages using this technique:
-
-- Increased cache granularity (avoids invalidating a whole sprite or
-concatenated bundle when just a single part changes)
-- Parallel downloading of files that before were bundled into one file
-- Less energy/memory usage in the client
-
-By default every avalanche package is prepared for CSS extraction.
-Run `gulp styles:extract` to create the CSS files - you can find them in
-`dist-extract`. Or you can start a watch task with CSS extraction enabled:
-`gulp watch:extract`.
-
-To make your custom packages CSS extraction ready, you have to add special
-placeholder comments.
-
-```css
-/* extract component_PACKAGE_NAME.css */
-.c-PACKAGE_NAME { … }
-/* end extract component_PACKAGE_NAME.css */
-```
-
-To prevent naming collisions it is recommended to add the package type as a
-prefix to the name of the desired resulting CSS file. If you define two or more
-extraction sections with the same name, those are combined into one file.
-
-It is recommended to also add placeholder comments for the package type. Because
-extraction sections with the same name are combined you end up with separate
-files per package type.
-
-```css
-/* extract component.css */
-/* extract component_PACKAGE_NAME.css */
-.c-PACKAGE_NAME { … }
-/* end extract component_PACKAGE_NAME.css */
-/* end extract component.css */
-```
+## Testing
+- Test all packages at once: `npm test`
+- Test a specific package: `npm test -- -p PACKAGE-NAME`
 
 ## About
 ### Author
 Markus Oberlehner  
-Twitter: https://twitter.com/MaOberlehner
+Twitter: https://twitter.com/MaOberlehner  
+PayPal.me: https://paypal.me/maoberlehner
 
 ### License
-GPL v2 (http://www.gnu.org/licenses/gpl-2.0.html)
+MIT

backstop.json

@@ -0,0 +1,48 @@
+{
+  "viewports": [
+    {
+      "name": "s",
+      "width": 480,
+      "height": 270
+    },
+    {
+      "name": "m",
+      "width": 720,
+      "height": 405
+    },
+    {
+      "name": "l",
+      "width": 960,
+      "height": 540
+    },
+    {
+      "name": "xl",
+      "width": 1200,
+      "height": 675
+    }
+  ],
+  "scenarios": [
+    {
+      "label": "avalanche",
+      "url": "test/tmp/test.html",
+      "selectors": [
+        "document"
+      ],
+      "readyEvent": null,
+      "delay": 500,
+      "misMatchThreshold" : 0.1
+    }
+  ],
+  "paths": {
+    "bitmaps_reference": "test/backstopjs/bitmaps_reference",
+    "bitmaps_test": "test/backstopjs/bitmaps_test",
+    "compare_data": "test/backstopjs/bitmaps_test/compare.json",
+    "casper_scripts": "test/backstopjs/casper_scripts"
+  },
+  "engine": "phantomjs",
+  "report": ["CLI", "browser"],
+  "cliExitOnFail": false,
+  "casperFlags": [],
+  "debug": false,
+  "port": 9999
+}