Getting Started

Learn how to easily start using JDS in your webpage.

HTML Setup

To start using JDS, all you have to do is connect/download one of the options below.

You just have to make sure you link the files properly in your webpage. Follow the example below on how to import LDS into your webpage.

JDS optimize code for mobile devices and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head> .

 
 

File Structe

Instead of having a 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/
    |  img/
    |  | avatar/
    |  | ico/
    |  | placeholder/
    |
    |  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
 
 


Back
Next Breakpoints