Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/canonical/vanilla-framework

From community websites to web applications, this CSS framework will help you achieve a consistent look and feel.
https://github.com/canonical/vanilla-framework

css css-framework hack hacktoberfest html npm npm-package package sass vanilla-framework web-and-design

Last synced: 1 day ago
JSON representation

From community websites to web applications, this CSS framework will help you achieve a consistent look and feel.

Host: GitHub
URL: https://github.com/canonical/vanilla-framework
Owner: canonical
License: lgpl-3.0
Created: 2015-02-23T12:34:16.000Z (almost 10 years ago)
Default Branch: main
Last Pushed: 2024-10-25T13:19:29.000Z (3 months ago)
Last Synced: 2024-10-29T15:11:33.098Z (3 months ago)
Topics: css, css-framework, hack, hacktoberfest, html, npm, npm-package, package, sass, vanilla-framework, web-and-design
Language: HTML
Homepage: https://vanillaframework.io
Size: 12.3 MB
Stars: 838
Watchers: 36
Forks: 167
Open Issues: 124
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

awesome-ccamel - canonical/vanilla-framework - From community websites to web applications, this CSS framework will help you achieve a consistent look and feel. (HTML)
fucking-awesome-css-frameworks - Repo
awesome-css-frameworks - Repo

README

        # ![vanilla](https://assets.ubuntu.com/v1/70041419-vanilla-framework.png?w=35 'Vanilla') Vanilla Framework

[![npm version](https://badge.fury.io/js/vanilla-framework.svg)](http://badge.fury.io/js/vanilla-framework)

[![Downloads](http://img.shields.io/npm/dm/vanilla-framework.svg)](https://www.npmjs.com/package/vanilla-framework)

[![devDependency Status](https://david-dm.org/canonical/vanilla-framework/dev-status.svg)](https://david-dm.org/canonical/vanilla-framework#info=devDependencies)

[![Chat in #vanilla-framework on Freenode](https://img.shields.io/badge/chat-%23vanilla--framework-blue.svg)](http://webchat.freenode.net/?channels=vanilla-framework)

[![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io)

Vanilla Framework is an extensible CSS framework, built using [Sass](http://sass-lang.com/) and is designed to be used either directly or by using themes to extend or supplement its patterns.

[Documentation](https://vanillaframework.io/docs) |

[Join the mailing list](http://canonical.us3.list-manage2.com/subscribe?u=56dac47c206ba0f58ec25f314&id=36f7d8394e)

## Table of contents

- [Using Vanilla](#using-vanilla)

  - [Hotlinking](#hotlinking)

  - [Including Vanilla in your project via NPM](#including-vanilla-in-your-project-via-npm)

- [Developing Vanilla](#developing-vanilla)

- [Community](#community)

## Using Vanilla

### Hotlinking

You can link to the latest build to add directly into your markup like so, by replacing the x values with the [version number you wish to link](https://github.com/canonical/vanilla-framework/releases).

```html

```

### Including Vanilla in your project via NPM or yarn

To get set up with Sass, add the `sass` and `vanilla-framework` packages to your project dependencies:

```bash

yarn add sass vanilla-framework

```

In the script that builds the CSS in your `package.json`, you should include the path to `node_modules` when looking for `@imports`. In this example, we have called the build script `"build-css"`:

```

"build-css": "sass -w --load-path=node_modules src:dist --style=compressed"

```

Make a folder `src/`, create a file inside called `style.scss` and import Vanilla:

```sass

// Import the theme

@import 'vanilla-framework';

@include vanilla;

// Optionally override some settings

$color-brand: #ffffff;

// Add theme if applicable

```

If you don't want the whole framework, you can just `@include` specific [parts](scss) - e.g. `@include vf-b-forms`.

Now run `yarn build-css`, which will convert any Sass files in the `src/` folder to CSS in the `dist/` folder.

To watch for changes in your Sass files, add the following script to your `package.json`

```

"watch-css":  "yarn build-css && sass --load-path=node_modules -w src:dist --style=compressed"

```

## Developing Vanilla

If you're looking to contribute to the Vanilla project itself, [start here](/CONTRIBUTING.md).

- [Code of conduct](/CONTRIBUTING.md#code-of-conduct)

- [Reporting bugs and issues](/CONTRIBUTING.md#reporting-bugs-and-issues)

- [Working with the Vanilla project](/CONTRIBUTING.md#working-with-the-vanilla-project)

- [Pull requests](/CONTRIBUTING.md#pull-requests)

- [Releasing Vanilla](/CONTRIBUTING.md#releasing-vanilla)

## Community

Keep up to date with all new developments and upcoming changes with Vanilla.

- Follow us on Twitter [@vanillaframewrk](https://twitter.com/vanillaframewrk)

- Read our latest blog posts at [Ubuntu Blog](https://blog.ubuntu.com/topics/design)

Code licensed [LGPLv3](https://opensource.org/license/lgpl-3-0/) by [Canonical Ltd](http://www.canonical.com/)

With ♥ from Canonical