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.jsonfile
bower initNote: You will be asked to create a title, description, and other information about the file. You can simply just hit
enterto skip through a lot of these, or fill them out if you wish. The last three questions will be yes/no, just respondyto all of them.
- Install the dashing bower component. This will install the Dashing files in your project's
bower_componentsfolder.
bower install dashing --saveSetting 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.
;;;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,stateandtheme. -
Within each folder, create a stylesheet to match. (e.g. You would create a
base.scssfile within yourbasefolder). -
Import everything to your main application folder. When you're all finished, it should look something like this:
;;;; ;;;;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.
<!-- These previous two meta tags *must* come first in the head --> Dashing Template <!-- Working with CSS – Use this link if prefer to use the vanilla css, without any customization --> <!-- 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. --> Hello, world! 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.gitbower installnpm installRunning the project
./dashutilitiy.shnpm run webpackReleasing a new version
- Build the Sass and compress the CSS
sass --watch dashing.scss:dashing.css --style compressedsass -w example/sass/example.scss:example/css/example.css-
Update the version number in the
bower.jsonandpackage.jsonfiles (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 publishFound 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: