creativetimofficial / argon-design-system Goto Github PK
View Code? Open in Web Editor NEWArgon - Design System for Bootstrap 4 by Creative Tim
Home Page: https://www.creative-tim.com/product/argon-design-system
License: Other
Argon - Design System for Bootstrap 4 by Creative Tim
Home Page: https://www.creative-tim.com/product/argon-design-system
License: Other
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.
Haven’t done any further testing
Facebook and Twitter icons are missing in homepage
https://demos.creative-tim.com/argon-design-system/examples/landing.html
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
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 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
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/
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.
You have beautiful alternative form elements but no class for custom file inputs. Is there any plan to add one?
i cant create a Carousel
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!
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.
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.
I more elements use from bootstrap.
Argon use for header, animation header and button.
How to make argon with bootstrap? And thanks!!!
Please answer the following questions for yourself before submitting an issue.
Documentation to have Select component under forms section
Documentation missing a Select component
Go to Components > Click on Components > Forms
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";
Follow up to #8
argon-design-system/assets/scss/custom/_badge.scss
Lines 26 to 29 in 4b9606a
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;
}
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.
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
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.
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.
do we have example sidebar component with subitem can toggle active ?
When using the from select input, the choices are in white on white.
We can only see the selection on the flyover
can someone provide me with the whole html script, and how can i edit the height and width.
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.
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
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.
I think the import paths are incorrect in the following files:
@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.
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
argon-design-system/assets/scss/bootstrap/_badge.scss
Lines 33 to 37 in 4b9606a
argon-design-system/assets/scss/custom/_badge.scss
Lines 10 to 13 in 4b9606a
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------------------>
<!--------------------------------------------->
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!
argon-design-system/index.html
Line 51 in 4b9606a
argon-design-system/index.html
Line 88 in 4b9606a
The lines contain duplicate href="#"
tag
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
I'd like to change the gradient background, how can I do that?
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
With that properties disabled
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.
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/
Press is spelled Prese on the bottom of the Overview page.
If found out you are using body/html tags twice in one argon.css file, why?
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.
🙏
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.