Accessibility

File Structure

Instead of having a scss/css folder, you will find that the download instead contains many .scss files which contain the styles of individual components. Unfortunately, the browser cannot interpret Sass, so you must have your Sass compiler compile the scss/jds-app.scss into a regular CSS file. At this point you can link this newly outputted file in your HTML page.

    MyWebApp/
    |  scss/
    |  | _function.scss
    |  | _mixins.scss
    |  | jds-app.scss
    |  | varibales.scss
    |  | 0-plugins/
    |  | | plugins-dir.scss
    |  | 1-base
    |  | | badge.scss
    |  | | base.scss
    |  | | base-dir.scss
    |  | | border.scss
    |  | | colors.scss
    |  | | cursor.scss
    |  | | forms.scss
    |  | | grid.scss
    |  | | list.scss
    |  | | margin.scss
    |  | | padding.scss
    |  | | progress.scss
    |  | | progress-load-spinners.scss
    |  | | radius.scss
    |  | | reboot.scss
    |  | | shadow.scss
    |  | | typography.scss
    |  | 2-layout/
    |  | | container.scss
    |  | | header.scss
    |  | | layout-dir.scss
    |  | | mood-dark.scss
    |  | | mood-light.scss
    |  | 3-moduls/
    |  | | accordion.scss
    |  | | alerts.scss
    |  | | avatars.scss
    |  | | blankslate.scss
    |  | | breadcrumb.scss
    |  | | buttons.scss
    |  | | cards.scss
    |  | | header.scss
    |  | | load-spinners.scss
    |  | | modal.scss
    |  | | moduls-dir.scss
    |  | | navigation.scss
    |  | | pagination.scss
    |  | | taber.scss
    |  | | widget.scss
    |
    | index.html

When you have installed JDS with sources you will find the JDS scss folder. The Sass version allows you to include customizations in the build process, rather than manually overwriting a lot of CSS rules by hand.