com.christiangrete.libs.scss

The SCSS Library for christiangrete.com

This library is provided as an artifact to be installed as a dependency into your project and will not generate any CSS code. It is authored in SCSS syntax and consists of configurable functions and mixins that will extend the native set of Sass utilities and provide many helpful cross-browser solutions to improve your workflow in a simple way without worrying about vendor prefixes. It is also inspired by other programming languages and modular, object-oriented concepts and tries to concur with the CSS specs in the best possible way.

Getting started

Installation

Install this library as a dependency to your project using Bower:

$ bower install --save-dev com.christiangrete.libs.scss

Alternatively, this library is also available using npm:

$ npm install --save-dev com.christiangrete.libs.scss

For whatever reason you want to use Composer, this library can be installed from its GitHub repository since version 0.0.3 using the repositories.vcs property in your composer.json file as well. See Composer docs for further information.

Usage

In case of using Bower, this library is installed as a subfolder to your Bower components directory, that defaults to bower_components. All you need to do is importing the library.scss file that is located topmost in the before mentioned subfolder:

@import 'bower_components/com.christiangrete.libs.scss/dist/library';

Otherwise, when using npm, it is installed as a subfolder to your Node.js modules directory, called node_modules. In this case, you need to import the library.scss file that is located topmost in the following subfolder:

@import 'node_modules/com.christiangrete.libs.scss/dist/library';

After that, the library with all its configurations, functions and mixins is available and ready to be used in your stylesheet.

Development

Installation

The following global tools are needed if you do not already have them:

• Node.js (JavaScript runtime environment)
  • Required by npm, Bower and Grunt (see below)
• npm (Package manager for Node.js)
  • Will be installed with Node.js by default
  • Used to locally install development dependencies (as described later)
• Git (Version control system)
  • Used for versioning and loading dependencies
• Grunt
  • Used for task running and build processes
  • Needs to be globally installed via npm as shown below:

$ npm install -g grunt-cli

• Bower (Front end component and package manager)
  • Used to locally install components and dependencies (as described later)
  • Needs to be globally installed via npm as shown below:

$ npm install -g bower

Make sure that all required tools are installed, then clone this repository onto your machine:

$ cd /your/desired/directory # Navigate into the folder of your choice, then:
$ git clone [email protected]:ChristianGrete/com.christiangrete.libs.scss.git
$ cd com.christiangrete.libs.scss # Navigate into the project folder

After navigating into the project directory, execute the installer script:

$ sh bin/install.sh # Installs all local dependencies & components

Automation

The following grunt tasks are available:

$ grunt # Runs the “default” task, see below
$ grunt default # The default task — validates the manifest JSON files
$ grunt compile # Compiles the “src/sass” directory for testing purposes
$ grunt uncompile # Deletes the compiled “debug” directory
$ grunt serve # Runs SassDoc, starts a web server with LiveReload
$ grunt build # Generates an artifact for testing purposes
$ grunt unbuild # Deletes the generated “build” directory
$ grunt build --release # Generates an artifact for distribution

License

MIT © Christian Grete

• GitHub
• npm
• Twitter
• XING