Skip to content
Styling og komponenter
CSS JavaScript HTML
Branch: master
Clone or download
Pull request Compare This branch is 379 commits ahead, 2 commits behind FSGpilot:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/ISSUE_TEMPLATE Update issue templates Jan 17, 2019
config/gulp Fixed so script can now be used to access dkfds javascript + naming c… Aug 7, 2019
dist Update dist Dec 17, 2019
examples Fixed icons close-circle and help Jan 14, 2019
src add line-height to backlink Dec 13, 2019
.editorconfig initial commit Oct 9, 2017
.eslintignore Frontend Styleguidens komponenter opdateret til seneste US web design… Oct 30, 2017
.eslintrc.yml
.gitignore Logo height changed to 4.8rem Apr 2, 2019
.npmignore more simplification Oct 29, 2018
README.md Updated readme to not include fractal information Oct 4, 2019
fractalfile.js Removed examples from project - moved to docs project Mar 1, 2019
gulpfile.js
package-lock.json Update dist Dec 17, 2019
package.json

README.md

FDS - Det Fælles Designsystem

This repo is part of the project for a Frontend Styleguide.

Using the design system in your project

There are a few different ways to use the design system within your project. Which one you choose depends on the needs of your project and how you are most comfortable working. Here are a few notes on what to consider when deciding which installation method to use:

Download

Download the design system as a zip file and open that file.

Install using npm

Install dkfds in your project by writing the following in a commad-prompt:

npm install --save dkfds

The dkfds module is now installed as a dependency. You can use the un-compiled files found in the src/ or the compiled files in the dist/ directory.

Including FDS in your project

FDS as vendor

If you downloaded the project as a zip folder simply include the follow code in the head-part of your page to include the css:

  <link type='text/css' rel='stylesheet' href='[path to dkfds folder]/dist/css/dkfds.css'>

To include the javascript, include this tag at the bottom of the body-part of your page:

  <script src='[path to dkfds folder]/dist/js/dkfds.js'></script>

Webpack

To include the styling add the following code to your main.scss file:

  $font-path:         '~dkfds/src/fonts/IBMPlexSans/';
  $image-path:        '~dkfds/src/img';
  $site-image-path:   '~dkfds/src/img';
  $icons-folder-path: '~dkfds/src/img/svg-icons';
  @import '../node_modules/dkfds/src/stylesheets/dkfds';

To include the javascript via webpack, import it in your main.js file:

  import "dkfds";

Contribute

The project is available on Github. You are more than welcome to contact us with suggestions or if you have a bug to report. See the project on Github

You can’t perform that action at this time.