-3

I did everything on this post Clarity Design System-Get Started but I can't make it work. I installed Clarity UI on a new ionic proyect, but when I tried to add a simple Card example or anything else:

  <div class="row">
<div class="col-lg-5 col-md-8 col-sm-12 col-xs-12">
    <div class="card">
        <div class="card-header">
            Header
        </div>
        <div class="card-block">
            <div class="card-title">
                Block
            </div>
            <div class="card-text">
                ...
            </div>
        </div>
        <div class="card-footer">
            <button class="btn btn-sm btn-link">Footer Action 1</button>
            <button class="btn btn-sm btn-link">Footer Action 2</button>
        </div>
    </div>
</div>

CSS has not worked. This is how it looks 2

What I missed? CSS and JS files fails to be referenced by anything like this:

<link rel="stylesheet" href="path/to/node_modules/clarity-ui/clarity-ui.min.css">

I'm new working with Ionic2 + Angular, and I'm new with Clarity

Fede Dávila
  • 27
  • 3
  • Welcome! Please read the [how-to-ask](https://stackoverflow.com/help/how-to-ask) article to help us help you. We need to understand what specifically you have done and what the error is. – Philip Brack Jan 03 '18 at 18:13
  • You're right Philip, sorry. I add some addicional information. I just follow this tutorial, anything else I found say just same information. – Fede Dávila Jan 03 '18 at 19:54
  • I have not used clarity, but the process is probably similar to using font-awesome. Take a look at [this](https://charlouze.github.io/ionic/2017/05/31/Ionic-3-and-Font-Awesome.html) and see if it can be augmented for the css portion of this clarity thing. – Philip Brack Jan 03 '18 at 22:43
  • Thanks again Philip!!I finally found this – Fede Dávila Jan 04 '18 at 13:52

1 Answers1

0

Thanks again Philip!! I read this article and I finally found this file {{ROOT}}\node_modules\@ionic\app-scripts\config\copy.config.js where I add this:

copyClarityIcons: {
    src: ['{{ROOT}}/node_modules/clarity-icons/clarity-icons.min.css'],
    dest: '{{WWW}}/assets/css'
},
copyClarityElements: {
    src: ['{{ROOT}}/node_modules/@webcomponents/custom-elements/custom-elements.min.js','{{ROOT}}/node_modules/clarity-icons/clarity-icons.min.js'],
    dest: '{{WWW}}/assets/js'
},
copyClarityCSS: {
    src: ['{{ROOT}}/node_modules/clarity-ui/clarity-ui.min.css'],
    dest: '{{WWW}}/assets/css'
}

It works!!

Fede Dávila
  • 27
  • 3