dashing-framework

Style framework for Dash

Usage no npm install needed!

<script type="module">
  import dashingFramework from 'https://cdn.skypack.dev/dashing-framework';
</script>

README

Dashing

Stylish framework for web apps

GitHub version Bower version npm version

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.

  1. Install bower
npm install -g bower
  1. 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.

  1. 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.

  1. Create five individual folders, named base, layout, modules, state and theme.

  2. Within each folder, create a stylesheet to match. (e.g. You would create a base.scss file within your base folder).

  3. 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
Modules

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

  1. 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

  1. Update the version number in the bower.json and package.json files (See here for versioning conventions)

  2. Stage the changes to be committed

git add .
  1. Commit the changes made in the previous steps
git commit -m "[message]"
  1. Tag the commit with the appropriate version number
git tag vX.Y.Z
  1. Push your committed changes
git push
  1. Push your new tag
git push --tags
  1. 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