{"id":13489299,"url":"https://github.com/creativetimofficial/argon-design-system","last_synced_at":"2025-05-14T10:14:39.387Z","repository":{"id":44848009,"uuid":"141703108","full_name":"creativetimofficial/argon-design-system","owner":"creativetimofficial","description":"Argon - Design System for Bootstrap 4 by Creative Tim","archived":false,"fork":false,"pushed_at":"2024-06-26T08:57:37.000Z","size":6639,"stargazers_count":2473,"open_issues_count":30,"forks_count":494,"subscribers_count":44,"default_branch":"master","last_synced_at":"2025-03-05T02:02:42.036Z","etag":null,"topics":["bootstrap-4","creative-tim","creativetim","design","design-system","design-systems","free","freebie","freebies","profile-page","responsive","responsive-design","webdesign"],"latest_commit_sha":null,"homepage":"https://www.creative-tim.com/product/argon-design-system","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/creativetimofficial.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-07-20T11:17:28.000Z","updated_at":"2025-03-04T15:52:28.000Z","dependencies_parsed_at":"2024-01-14T03:48:07.336Z","dependency_job_id":"0ffc9a9f-a11d-47d6-8800-dcc3f19df08f","html_url":"https://github.com/creativetimofficial/argon-design-system","commit_stats":{"total_commits":31,"total_committers":7,"mean_commits":4.428571428571429,"dds":0.6129032258064516,"last_synced_commit":"eea29c587e6a2cddcde4549724b122e30a21b6d4"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/creativetimofficial%2Fargon-design-system","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/creativetimofficial%2Fargon-design-system/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/creativetimofficial%2Fargon-design-system/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/creativetimofficial%2Fargon-design-system/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/creativetimofficial","download_url":"https://codeload.github.com/creativetimofficial/argon-design-system/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247968368,"owners_count":21025823,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap-4","creative-tim","creativetim","design","design-system","design-systems","free","freebie","freebies","profile-page","responsive","responsive-design","webdesign"],"created_at":"2024-07-31T19:00:22.137Z","updated_at":"2025-04-09T03:09:52.593Z","avatar_url":"https://github.com/creativetimofficial.png","language":"CSS","readme":"\u003ch1 id=\"argon-design-system\"\u003e\u003ca href=\"https://www.creative-tim.com/product/argon-design-system\"\u003eArgon Design System\u003c/a\u003e\u003c/h1\u003e\n\n\u003cp\u003e\u003cimg src=\"https://s3.amazonaws.com/creativetim_bucket/products/90/original/opt_argon_thumbnail.jpg\" alt=\"Product Gif\" /\u003e\u003c/p\u003e\n\n\u003cp\u003eStart your development with a Design System for Bootstrap 4. It is open source, free and it features many components that can help you create amazing websites.\u003c/p\u003e\n\n\u003ch4 id=\"fully-coded-components\"\u003eFully Coded Components\u003c/h4\u003e\n\n\u003cp\u003eArgon Design System is built with over 100 individual components, giving you the freedom of choosing and combining. All components can take variations in colour, that you can easily modify using SASS files.\u003c/p\u003e\n\n\u003cp\u003eYou will save a lot of time going from prototyping to full-functional code, because all elements are implemented. This Design System is coming with prebuilt examples, so the development process is seamless, switching from our pages to the real website is very easy to be done.\u003c/p\u003e\n\n\u003cp\u003eEvery element has multiple states for colors, styles, hover, focus, that you can easily access and use.\u003c/p\u003e\n\n\u003ch4 id=\"complex-documentation\"\u003eComplex Documentation\u003c/h4\u003e\n\n\u003cp\u003eEach element is well presented in a very complex documentation. You can read more about the idea behind this design system here. You can check the components here and the foundation here.\u003c/p\u003e\n\n\u003ch4 id=\"example-pages\"\u003eExample Pages\u003c/h4\u003e\n\n\u003cp\u003eIf you want to get inspiration or just show something directly to your clients, you can jump start your development with our pre-built example pages. You will be able to quickly set up the basic structure for your web project.\u003c/p\u003e\n\n\u003ch2 id=\"table-of-contents\"\u003eTable of Contents\u003c/h2\u003e\n\n\u003cul\u003e\n  \u003cli\u003e\u003ca href=\"#demo\"\u003eDemo\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"#quick-start\"\u003eQuick Start\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"#deploy\"\u003eDeploy\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"#documentation\"\u003eDocumentation\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"#file-structure\"\u003eFile Structure\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"#browser-support\"\u003eBrowser Support\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"#resources\"\u003eResources\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"#reporting-issues\"\u003eReporting Issues\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"#technical-support-or-questions\"\u003eTechnical Support or Questions\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"#licensing\"\u003eLicensing\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"#useful-links\"\u003eUseful Links\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003ch2 id=\"versions\"\u003eVersions\u003c/h2\u003e\n\n\u003cp\u003eWe are coding Argon Design System for this frameworks also. Chek’em out:\u003c/p\u003e\n\n\u003cul\u003e\n  \u003cli\u003e\u003ca href=\"https://www.creative-tim.com/product/vue-argon-design-system\"\u003eVue.js\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003ch3 id=\"coming-soon\"\u003eComing soon\u003c/h3\u003e\n\n\u003cul\u003e\n  \u003cli\u003eAngular\u003c/li\u003e\n  \u003cli\u003eReact\u003c/li\u003e\n  \u003cli\u003eSketch\u003c/li\u003e\n  \u003cli\u003ePhotoshop\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003ch2 id=\"demo\"\u003eDemo\u003c/h2\u003e\n\n\u003cul\u003e\n  \u003cli\u003e\u003ca href=\"https://demos.creative-tim.com/argon-design-system\"\u003eIndex Page\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"https://demos.creative-tim.com/argon-design-system/examples/landing.html\"\u003eLanding page\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"https://demos.creative-tim.com/argon-design-system/examples/profile.html\"\u003eProfile Page\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"https://demos.creative-tim.com/argon-design-system/examples/login.html\"\u003eLogin Page\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"https://demos.creative-tim.com/argon-design-system/examples/register.html\"\u003eRegister Page\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"https://demos.creative-tim.com/argon-design-system/docs/getting-started/overview.html\"\u003eDocumentation\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003cp\u003e\u003ca href=\"https://demos.creative-tim.com/argon-design-system\"\u003eView More\u003c/a\u003e\u003c/p\u003e\n\n\u003ch2 id=\"download-and-installation\"\u003eDownload and Installation\u003c/h2\u003e\n\n\u003cul\u003e\n  \u003cli\u003e\u003ca href=\"https://github.com/creativetimofficial/argon-design-system/archive/master.zip\"\u003eDownload from Github\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003e\n    \u003cp\u003e\u003ca href=\"https://www.creative-tim.com/product/argon-design-system\"\u003eDownload from Creative Tim\u003c/a\u003e\u003c/p\u003e\n  \u003c/li\u003e\n  \u003cli\u003e\n    \u003cp\u003eInstall with Bower: \u003ccode class=\"highlighter-rouge\"\u003ebower install argon-design-system\u003c/code\u003e\u003c/p\u003e\n  \u003c/li\u003e\n  \u003cli\u003e\n    \u003cp\u003eInstall with Composer: \u003ccode class=\"highlighter-rouge\"\u003ecomposer create-project creativetimofficial/argon-design-system\u003c/code\u003e\u003c/p\u003e\n  \u003c/li\u003e\n  \u003cli\u003e\n    \u003cp\u003eClone from Github: \u003ccode class=\"highlighter-rouge\"\u003egit clone {{ site.product.github_clone }}\u003c/code\u003e\u003c/p\u003e\n  \u003c/li\u003e\n  \u003cli\u003e\n    \u003cp\u003eInstall with Npm: \u003ccode class=\"highlighter-rouge\"\u003enpm i argon-design-system-free\u003c/code\u003e\u003c/p\u003e\n  \u003c/li\u003e\n  \u003cli\u003eInstall with Yarn: \u003ccode class=\"highlighter-rouge\"\u003eyarn add argon-design-system-free\u003c/code\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003ch2 id=\"deploy\"\u003eDeploy\u003c/h2\u003e\n\n\u003cp\u003e:rocket: You can deploy your own version of the template to Genezio with one click:\n\n[![Deploy to Genezio](https://raw.githubusercontent.com/Genez-io/graphics/main/svg/deploy-button.svg)](https://app.genez.io/start/deploy?repository=https://github.com/creativetimofficial/argon-design-system\u0026utm_source=github\u0026utm_medium=referral\u0026utm_campaign=github-creativetim\u0026utm_term=deploy-project\u0026utm_content=button-head)\u003c/p\u003e\n\n\u003ch2 id=\"documentation\"\u003eDocumentation\u003c/h2\u003e\n\n\u003cp\u003eThe documentation for the Argon Design System is hosted at our \u003ca href=\"https://demos.creative-tim.com/argon-design-system/docs/getting-started/overview.html\"\u003ewebsite\u003c/a\u003e.\u003c/p\u003e\n\n\u003ch2 id=\"file-structure\"\u003eFile Structure\u003c/h2\u003e\n\n\u003cp\u003eWithin the download you’ll find the following directories and files:\u003c/p\u003e\n\n\u003cdiv class=\"highlighter-rouge\"\u003e\u003cdiv class=\"highlight\"\u003e\u003cpre class=\"highlight\"\u003e\u003ccode\u003eargon/\n├── CHANGELOG.md\n├── LICENSE.md\n├── README.md\n├── assets/\n  ├── css/\n  │   ├── argon.css\n  │   ├── argon.css.map\n  │   ├── argon.min.css\n  │   ├── argon.min.css.map\n  └── img/\n  │   ├── argon/\n  │   ├── brand/\n  │   ├── icons/\n  │   ├── ill/\n  └── js/\n  │   ├── argon.js\n  │   └── argon.min.js\n  └── scss/\n  │   ├── bootstrap/\n  │   ├── custom/\n  │   ├── argon.scss\n  └── vendor/\n      ├── bootstrap/\n      ├── bootstrap-datepicker/\n      ├── font-awesome/\n      ├── headroom/\n      ├── jquery/\n      ├── nouislider/\n      ├── nucleo/\n      ├── popper/\n\n\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003c/div\u003e\n\n\u003ch2 id=\"browser-support\"\u003eBrowser Support\u003c/h2\u003e\n\n\u003cp\u003eAt present, we officially aim to support the last two versions of the following browsers:\u003c/p\u003e\n\n\u003cp\u003e\u003cimg src=\"https://s3.amazonaws.com/creativetim_bucket/github/browser/chrome.png\" width=\"64\" height=\"64\" /\u003e\n\u003cimg src=\"https://s3.amazonaws.com/creativetim_bucket/github/browser/firefox.png\" width=\"64\" height=\"64\" /\u003e\n\u003cimg src=\"https://s3.amazonaws.com/creativetim_bucket/github/browser/edge.png\" width=\"64\" height=\"64\" /\u003e\n\u003cimg src=\"https://s3.amazonaws.com/creativetim_bucket/github/browser/safari.png\" width=\"64\" height=\"64\" /\u003e\n\u003cimg src=\"https://s3.amazonaws.com/creativetim_bucket/github/browser/opera.png\" width=\"64\" height=\"64\" /\u003e\u003c/p\u003e\n\n\u003ch2 id=\"resources\"\u003eResources\u003c/h2\u003e\n\n\u003cul\u003e\n  \u003cli\u003eDemo: \u003ca href=\"https://demos.creative-tim.com/argon-design-system\"\u003ehttps://demos.creative-tim.com/argon-design-system\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003eDownload: \u003ca href=\"https://www.creative-tim.com/product/argon-design-system\"\u003ehttps://www.creative-tim.com/product/argon-design-system\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003eDocumentation: \u003ca href=\"https://demos.creative-tim.com/argon-design-system/docs/getting-started/overview.html\"\u003ehttps://demos.creative-tim.com/argon-design-system/docs/getting-started/overview.html\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003eLicense Agreement: \u003ca href=\"https://www.creative-tim.com/license\"\u003ehttps://www.creative-tim.com/license\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003eSupport: \u003ca href=\"https://www.creative-tim.com/contact-us\"\u003ehttps://www.creative-tim.com/contact-us\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003eIssues: \u003ca href=\"https://github.com/creativetimofficial/argon-design-system/issues\"\u003eGithub Issues Page\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003ch2 id=\"reporting-issues\"\u003eReporting Issues\u003c/h2\u003e\n\n\u003cp\u003eWe use GitHub Issues as the official bug tracker for the Argon Design System. Here are some advices for our users that want to report an issue:\u003c/p\u003e\n\n\u003col\u003e\n  \u003cli\u003eMake sure that you are using the latest version of the Argon Design System. Check the CHANGELOG from your copy on our \u003ca href=\"https://www.creative-tim.com\"\u003ewebsite\u003c/a\u003e.\u003c/li\u003e\n  \u003cli\u003eProviding us reproducible steps for the issue will shorten the time it takes for it to be fixed.\u003c/li\u003e\n  \u003cli\u003eSome issues may be browser specific, so specifying in what browser you encountered the issue might help.\u003c/li\u003e\n\u003c/ol\u003e\n\n\u003ch2 id=\"technical-support-or-questions\"\u003eTechnical Support or Questions\u003c/h2\u003e\n\n\u003cp\u003eIf you have questions or need help integrating the product please \u003ca href=\"https://www.creative-tim.com/contact-us\"\u003econtact us\u003c/a\u003e instead of opening an issue.\u003c/p\u003e\n\n\u003ch2 id=\"licensing\"\u003eLicensing\u003c/h2\u003e\n\n\u003cul\u003e\n  \u003cli\u003e\n    \u003cp\u003eCopyright © 2019 Creative Tim (https://www.creative-tim.com)\u003c/p\u003e\n  \u003c/li\u003e\n  \u003cli\u003e\n    \u003cp\u003eLicensed under MIT (https://github.com/creativetimofficial/argon-design-system/blob/master/LICENSE.md)\u003c/p\u003e\n  \u003c/li\u003e\n\u003c/ul\u003e\n\n\u003ch2 id=\"useful-links\"\u003eUseful Links\u003c/h2\u003e\n\n\u003cul\u003e\n  \u003cli\u003e\u003ca href=\"https://www.creative-tim.com/bootstrap-themes\"\u003eMore products\u003c/a\u003e from Creative Tim\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"https://www.youtube.com/channel/UCVyTG4sCw-rOvB9oHkzZD1w\"\u003eTutorials\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"https://www.creative-tim.com/bootstrap-themes/free\"\u003eFreebies\u003c/a\u003e from Creative Tim\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"https://www.creative-tim.com/affiliates/new\"\u003eAffiliate Program\u003c/a\u003e (earn money)\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003ch2 id=\"social-media\"\u003eSocial Media\u003c/h2\u003e\n\n\u003cul\u003e\n  \u003cli\u003eTwitter: \u003ca href=\"https://twitter.com/CreativeTim\"\u003ehttps://twitter.com/CreativeTim\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003eFacebook: \u003ca href=\"https://www.facebook.com/CreativeTim\"\u003ehttps://www.facebook.com/CreativeTim\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003eDribbble: \u003ca href=\"https://dribbble.com/creativetim\"\u003ehttps://dribbble.com/creativetim\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003eGoogle+: \u003ca href=\"https://plus.google.com/+CreativetimPage\"\u003ehttps://plus.google.com/+CreativetimPage\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003eInstagram: \u003ca href=\"https://www.instagram.com/CreativeTimOfficial\"\u003ehttps://www.instagram.com/CreativeTimOfficial\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n","funding_links":[],"categories":["CSS","Templates \u0026 Themes","组件库相关"],"sub_categories":["Themes"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcreativetimofficial%2Fargon-design-system","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcreativetimofficial%2Fargon-design-system","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcreativetimofficial%2Fargon-design-system/lists"}