Follow up to #8

I'd like to change the gradient background, how can I do that?

In the example pages, the following .css is referenced: docs.min.css, like so:

<link type="text/css" href="./assets/css/docs.min.css" rel="stylesheet">

However, it is not included in the download.

Facebook and Twitter icons are missing in homepage
https://demos.creative-tim.com/argon-design-system/examples/landing.html

What is the purpose of this code? Only first badge is aligned right.
Or .badge-inline should be used without siblings?

With that properties disabled

I am new to sass/css/web design and i am trying to customize the argon template for my project. After extracting the .zip file from above location I am running following sets of command in command prompt. Note - node.js is already installed in my system.

npm install -g gulp //installing gulp globally
npm init //initialization 
npm install --save-dev gulp //installing gulp locally - dev utility

npm install -g npm-install-all 
npm-install-all gulpfile.js //Installing all required modules from gulpfile.js 

After preparing my env. when i run the gulp task defined in the gulpfile.js using following code, it throws the mentioned error:

C:\Users\my_user\Documents\my_project>gulp build
[18:42:36] Using gulpfile ~\Documents\my_project\gulpfile.js
[18:42:36] Starting 'build'...
[18:42:36] Starting 'clean:dist'...
[18:42:36] Finished 'clean:dist' after 4.27 ms
[18:42:36] Starting 'scss'...
Error in plugin 'sass'
Message:
    assets\scss\custom\_mixins.scss
Error: File to import not found or unreadable: custom/mixins/alert.scss.
        on line 1 of assets/scss/custom/_mixins.scss
        from line 28 of assets/scss/argon.scss
>> @import "custom/mixins/alert.scss";

   ^

[18:42:37] Finished 'scss' after 805 ms
[18:42:37] Starting 'copy:css'...
[18:42:37] Finished 'copy:css' after 33 ms
[18:42:37] Starting 'copy:js'...
[18:42:37] Finished 'copy:js' after 11 ms
[18:42:37] Starting 'minify:js'...
[18:42:37] Finished 'minify:js' after 128 ms
[18:42:37] Starting 'minify:css'...
[18:42:38] Finished 'minify:css' after 992 ms
[18:42:38] Finished 'build' after 2 s

The content of all the file is unchanged and is the same as the git repo. So, incase if one wants to refer, one can check the link attached earlier.

I am using a windows-10 machine with:

>npm -v
6.4.1

>node -v
v8.12.0

>gulp -v
[19:04:01] CLI version 3.9.1
[19:04:01] Local version 3.9.1

I more elements use from bootstrap.
Argon use for header, animation header and button.

How to make argon with bootstrap? And thanks!!!

https://imgur.com/a/GSTeIwL

argon-design-system-free/assets/scss

The path should be like this

@import "../custom/mixins/alert.scss";
@import "../custom/mixins/badge.scss";
@import "../custom/mixins/background-variant.scss";
@import "../custom/mixins/buttons.scss";
@import "../custom/mixins/forms.scss";
@import "../custom/mixins/icon.scss";
@import "../custom/mixins/modals.scss";
@import "../custom/mixins/popover.scss";

argon-design-system-free/assets/scss/custom

@import "../custom/utilities/backgrounds.scss";
@import "../custom/utilities/floating.scss";
@import "../custom/utilities/helper.scss";
@import "../custom/utilities/position.scss";
@import "../custom/utilities/sizing.scss";
@import "../custom/utilities/spacing.scss";
@import "../custom/utilities/shadows.scss";
@import "../custom/utilities/text.scss";
@import "../custom/utilities/transform.scss";

can someone provide me with the whole html script, and how can i edit the height and width.

Hi there,

Thank you for this beautiful design system, We love it. Can you please update us about the planned release time of Angular 6/7 version of the theme?

Thank you!

do we have example sidebar component with subitem can toggle active ?

If found out you are using body/html tags twice in one argon.css file, why?

iPhone 8 Google Chrome version 70.0.3538.75
The Profile example page has a white triangle to set the angle of the top photograph over the top of the raised circle and the card.

I do not want to use jquery. it's possible?
what components did not work without jquery?

Great work. Stripe is beautiful and it's great to have the tools that make it easier to replicate their style. However, one suggestion. On Stripe.com, when you hover over "Products" then move the cursor to "Developers", the drop-down menu moves and changes shape. In your design, each has its own drop-down menu that fades-in/fades-out when you do the same thing. It would be nice to have this behavior changed to emulate Stripe's behavior.

Is it possible to get those pages (https://demos.creative-tim.com/argon-design-system/docs/foundation/colors.html) as noncompiled sources?
To create own structure, to have one SCSS source, etc.

Love this. The demos really helped with inspiration. Would like to see more demonstrations demonstrating more of the CSS styles/classes.

Also, would love to see a better registration flow that utilizes pagination.

The links to color utilities and typography on the Typography page utilities both return a 404 page

Links:
https://demos.creative-tim.com/argon-design-system/docs/foundation/argon-design-system/docs//utilities/text/
https://demos.creative-tim.com/argon-design-system/docs/foundation/argon-design-system/docs//utilities/colors/

Hi my landing page is finish, its weird because using npm localhost preview there is no problem in style. but when you open the file using non npm index.html preview there is no style.

Work in progress ...

Highlights

This version comes with some bug fixes and also a new page header for the index page. Feel free to download it again and simply replace the css/js from your project with the newer ones.

CSS

• #7 Removed the double body/html tags in SCSS/CSS
• #8 Solved the syntax error in the calc() function

Prerequisites

Please answer the following questions for yourself before submitting an issue.

• I am running the latest version
• I checked the documentation and found no answer
• I checked to make sure that this issue has not already been filed
• I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

Documentation to have Select component under forms section

Current Behavior

Documentation missing a Select component

Steps to Reproduce

Go to Components > Click on Components > Forms

Context

Here is the link

• Device: Dell XPS
• Operating System: Ubuntu
• Browser and Version: Chrome 71

You have beautiful alternative form elements but no class for custom file inputs. Is there any plan to add one?

Hi,

Is there any Card design available or not, if so I cannot find this in the docs or is this called under a different alias.

Thanks.

The lines contain duplicate href="#" tag

For some reason stripe element error does not display with Argon theme, plain B4 displays no problem. Element is rendered but has display:none applied
Also there is slight glitch when typying in stripe element form backdrop goes 100% black when i leave the field it goes back to normal. I have this form in modal.

When having multiple .badge-inline, last one has additional margin-right

Replacing that block with this one, will fix the problem

 .badge-inline + .badge-inline { 
     margin-left: .625rem; 
 } 

Popovers does not display on Safari 11.1.2, macOS 10.13.6
https://demos.creative-tim.com/argon-design-system/docs/components/popovers.html

when using headroom, as you scroll with it out of the screen, and it switches the class to "headroom-not-top", that color in the CSS is a static value. So if I change the background shape gradient to say orange, then scroll down and IF the header snaps, the header is the original dark blue color.

The header doesn't always snap into place, so i will probably just not use headroom anyway, but still an issue overall mainly because it takes a change to the CSS class to match the background color, which is not ideal.

Hi Tim, its my first time to convert the argon html to wordpress. can you please check the inserted php code for a navigation wordpress if the position is correct?

`` <!-----------wordpress-header.php--------->
<!-----------header Navbar------------------>
<!--------------------------------------------->

				<!--PHP Wordpress-->
				<?php
					wp_nav_menu(array(
							'theme_location'	=> 'primary',
							'container'			=> 'nav',
							'menu_class'		=> 'navbar-nav ml-lg-auto'
						)
					);
				?>
				<!--PHP Wordpress-->
    
                <ul class="navbar-nav ml-lg-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">HOME</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">AIM</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">PARTNERS</span></a>
                    </li>

                    <li class="nav-item dropdown">
                        <a class="nav-link" href="#" id="navbar-default_dropdown_1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            FAQ
                        </a>
                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbar-default_dropdown_1">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                    </li>
                </ul>
    
            </div>
        </div>
    </nav>
</header>

Press is spelled Prese on the bottom of the Overview page.

When using the from select input, the choices are in white on white.
We can only see the selection on the flyover

calc() cannot take variable names with hypens:

width: calc(100% - $icon-size-xl - 1);

The generated css is therefore invalid, containing $icon-size-xl.

Solution:
width: calc(100% - #{$icon-size-xl} - 1);
Don't forget to put spaces among the hypens when it is subtraction.

Argon Design system available now for sketch (free)

hello guys:

I just wanted to give you an update for those interested in this design system for Sketch, we have made available free of charge this design system build using Sketch.

Here is the link: https://github.com/Epikly/Argon-Design-System-Sketch

we will add more documentation and info as we go. feel free to comment and leave your feedback

###To do:
add more components and patterns
add better documentation and previews

i cant create a Carousel

How to reproduce

• Using an editor, change the class of the main navbar to “navbar navbar-main navbar-expand-lg navbar-dark bg-default headroom”
• Save it and open it in Firefox Quantum
• Scroll down, and when you scroll back up to trigger headroom, the navbar will no longer stretch to the full width of the screen

Haven’t done any further testing

I am adding new and more fancy hero section in the index page example. You will be able to see it once the update is released at this link:

https://demos.creative-tim.com/argon-design-system/index.html

Bootstrap 4 has a color class for text text-secondary, when used with Argon is basically impossible to see:

Loving this so far though!

You will be able to get Argon with npm, yarn, bower. Learn more about this in our docs once the update is released.

Here is the link:
https://demos.creative-tim.com/argon-design-system/docs/getting-started/download.html

Is it possible? https://demos.creative-tim.com/argon-design-system/docs/components/modal.html

FYI, using Argon with React, so $('#myModal').modal('show') doesn’t seem to work.

🙏

I am adding a new feature for the main menu so you can fix it to the top of the page and show it on scroll using the headroom.js plugin. You can learn more about this in the Docs in the Plugins section once it is released.

Here is a link:
https://demos.creative-tim.com/argon-design-system/docs/plugins/hearoom.html

Hi, My apologies if this is a sily question, but I struggle to find the appropriate css attribute to modify. I would like to change the background color of the Navbar (which I can easily do with bg-primary for example, but it looses it's transparency if at top of page). I'd like to change the color, but also keep transparency feature. How can I achieve that?

Thanks in advance!

I think the import paths are incorrect in the following files:

• argon/assets/scss/custom/_mixins.scss
• argon/assets/scss/custom/_utilities.scss

@import "custom/mixins/" and "custom/utilities/" should be "mixins/" and "utilities/" then the relative paths are correct and I was able to import argon.scss.

Hi,

While I was browsing on the demo website, I found an incorrect link.

The link for the following element (cf. screenshot below) is supposed to redirect you to React's website (https://reactjs.org/), but it actually redirects on AngularJS's website (https://angularjs.org/)

The concerned files are both index.html examples/landing.html at lines 626 (see here), and the correct URL should be https://reactjs.org/

Hi,

is there a way to customize navbar-transparent trigger? Right now it triggers on the middle of the container, and it looks chaotic :)

Hi! Your design system is awesome, and also the documentation, how can I create something like your documentation page? do you use any tool or framework? Specifically the vue docs
Thanks