creativetimofficial/argon-design-system

Argon - Design System for Bootstrap 4 by Creative Tim

argon-design-system's Issues

converting to navigation in wordpress

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>

syntax error in _icons.scss

Follow up to #8

Social icons are missing

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

Headroom Navbar, Change color but keep it transparent when at the top of page.

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!

double body/html tags in css

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

Headroom-not-top color static/mismatch

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.

newby

i cant create a Carousel

How to make argon with bootstrap

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

new hero section for the index page

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

Angular support

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!

UI bug

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.

How does the documentation works?

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

More demos?

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.

File input alternative

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

text-secondary is very difficult to see

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

Loving this so far though!

Multiple `.badge-inline` align

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

argon-design-system/assets/scss/custom/_badge.scss

Lines 31 to 34 in 4b9606a

	.badge-inline + span {
	top: 2px;
	position: relative;
	}

With that properties disabled

Profile page narrow-width screen bug

syntax error in _icons.scss

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.

Duplicate `.badge-pill` properties

argon-design-system/assets/scss/bootstrap/_badge.scss

Lines 33 to 37 in 4b9606a

	.badge-pill {
	padding-right: $badge-pill-padding-x;
	padding-left: $badge-pill-padding-x;
	@include border-radius($badge-pill-border-radius);
	}

argon-design-system/assets/scss/custom/_badge.scss

Lines 10 to 13 in 4b9606a

	.badge-pill {
	padding-right: $badge-pill-padding-x;
	padding-left: $badge-pill-padding-x;
	}

sticky navbar with headroom.js

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

Without JQuery

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

Utilities links broken in documentation on Typography page

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/

add npm, yarn, bower and composer for quick installation

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

Stipe Elements in Dialog Box

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.

Easy typo fix

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

sidebar theme

The top navigation drop-down menus should transition more smoothly rather than fade in/fade out

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.

[Demo] Wrong link for React's website

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/

Can't find stylesheet to import.

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";

sidebar component

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

Cannot use the noUISlider in the page. I have already included the js files for the same, still it's not working.

Bootstrap 4 Card Design

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.

Popover not working on Safari 11.1.2

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

v1.0.1 ship list

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

Headroom nav doesn’t spread across the whole screen

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

Changing background

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

Documentation missing Form Select component

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

no style when opening in the browser

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.

Missing file: docs.min.css

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.

Multiple `.badge-inline` margin

argon-design-system/assets/scss/custom/_badge.scss

Lines 26 to 29 in 4b9606a

	// Multiple inline badges
	.badge-inline {
	margin-right: .625rem;
	}

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; 
 } 

Sketch Library now available

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

Form Select not integrated

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

Components pages in source code

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.

Duplicate href tag

argon-design-system/index.html

Line 51 in 4b9606a

<a href="#" class="nav-link" data-toggle="dropdown" href="#" role="button">

argon-design-system/index.html

Line 88 in 4b9606a

<a href="#" class="nav-link" data-toggle="dropdown" href="#" role="button">

The lines contain duplicate href="#" tag

navbar-transparent trigger

Hi,

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

Could not import argon.scss

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.

Open modal programmatically?

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.

🙏

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

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

hello is argon design system support rtl design?

Error in plugin 'sass': Running 'gulp build' throws error while working on “creative-tim” open source template.

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