dashing-framework

v1.13.0

Published

4 years ago

Style framework for Dash

0High
0Medium
0Low

aknobloch

jaredrauh

nevren

dashing dash dashing-framework

Dashing

Stylish framework for web apps

Browser Support

| Chrome | Edge | Firefox | Opera | IE | Safari | |--------|------|---------|-------|----|--------| | Latest | Latest | Latest | Latest | IE 11+ | Safari 8+ |

Getting Started

Install the Component

The Dashing Framework is delivered as a bower component. Note that Bower requires node, npm and git. If you don't yet have these installed, do this first.

Install bower

npm install -g bower

Create a bower.json file

  bower init

Note: You will be asked to create a title, description, and other information about the file. You can simply just hit enter to skip through a lot of these, or fill them out if you wish. The last three questions will be yes/no, just respond y to all of them.

Install the dashing bower component. This will install the Dashing files in your project's bower_components folder.

bower install dashing --save

Setting up your project with SASS

Sass is a great way to keep your project clean, organized and easy-to-manage. If you are unfamiliar with the workings of Sass, learn more here.

Including Dashing Styles

Copy and paste the following code snippet into your project. This will pull in normalize, along with Dashing base and module styles.

Note: If you wish to overwrite Dashing styles to add customization your project, skip through this step and head to the next section.

@import "/bower_components/dashing/sass/vendor/normalize";
@import "/bower_components/dashing/sass/base/base";
@import "/bower_components/dashing/sass/modules/modules";

Including Custom Styles

While the Dashing Style Framework does provide a lot of core modules for you to utilize, it most likely won't have everything you need. Follow the SMACSS syntax in order to add a clean, organized structure to your custom stylesheets.

Create five individual folders, named base, layout, modules, state and theme.
Within each folder, create a stylesheet to match. (e.g. You would create a base.scss file within your base folder).
Import everything to your main application folder. When you're all finished, it should look something like this:

@import "/bower_components/dashing/sass/vendor/normalize";
@import "/bower_components/dashing/sass/base/base";
@import "theme/theme";
@import "/bower_components/dashing/sass/modules/modules";

@import "base/base";
@import "layout/layout";
@import "modules/modules";
@import "state/state";

Note: By including a theme file, your modules will now look to that for color theming, rather than base.

Setting up your HTML file and importing styles

We've provided a starter HTML file to help you get running. Paste this code into your index.html file.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- These previous two meta tags *must* come first in the head -->
    <title>Dashing Template</title>

    <!-- Working with CSS – Use this link if prefer to use the vanilla css, without any customization -->
    <link rel="stylesheet" href="/bower_components/dashing/dashing.css">

    <!-- Working with SCSS – Use this if you'd like to add any customization to the dashing modules. Note: The path and file name may differ for your project. -->
    <link rel="stylesheet" href="styles/application.css">
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

What's Included

Every module contains an example file that allows you to preview the look and feel of each feature.

Base Styles

Color · Documentation · Example
Extendables · Documentation
Mixins · Documentation
Utilities · Documentation
Variables · Documentation

Modules

Actions · Documentation · Example
Card · Documentation · Example
Forms · Documentation · Example
Grid · Documentation · Example
Icons · Documentation · Example
Navigation · Documentation · Example
Footer · Example
Tables · Documentation · Example
Typography · Documentation · Example
Spinner · Example

Development

Clone the repository with git

git clone https://github.com/dashframework/dashing.git

bower install

npm install

Running the project

./dashutilitiy.sh

npm run webpack

Releasing a new version

Build the Sass and compress the CSS

sass --watch dashing.scss:dashing.css --style compressed

sass -w example/sass/example.scss:example/css/example.css

Update the version number in the bower.json and package.json files (See here for versioning conventions)
Stage the changes to be committed

git add .

Commit the changes made in the previous steps

git commit -m "[message]"

Tag the commit with the appropriate version number

git tag vX.Y.Z

Push your committed changes

git push

Push your new tag

git push --tags

Push your new npm package

npm publish

Found a Bug?

Submit an issue if you need help, or submit a pull request with your own fixes or changes.

Contributors

Dashing is a product of Samaritan Ministries International.

Thanks to the following people who have contributed to this project:

License

MIT License