1. Project Overview & Quickstart (ionic-team/ionic-framework)
File: README.md
Ionic
[Quickstart](https://ionicframework.com/docs/intro/cli) · Documentation · [Contribute](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md) · [Blog](https://blog.ionicframework.com/)
Community:
Discord
·
Forums
·
Twitter
Packages
| Project | Package | Version | Downloads | Links |
|---|---|---|---|---|
| Core | @ionic/core |
README.md |
||
| Angular | @ionic/angular |
README.md |
||
| Vue | @ionic/vue |
README.md |
||
| React | @ionic/react |
README.md |
Looking for the ionic-angular package? Ionic 3 has been moved to the ionic-v3 repo. See Earlier Versions.
Getting Started
Start a new project by following our documentation.
We would love to hear from you! If you have any feedback or run into issues using our framework, please file
an issue on this repository.
Migration Guides
Already have an Ionic app? These guides will help you migrate to the latest versions.
- Migrate from v7 to v8
- Migrate from v6 to v7
- Migrate from v5 to v6
- Migrate from v4 to v5
- Migrate from v3 to v4
Examples
The Ionic Conference App is a full featured Ionic app. It is the perfect starting point for learning and building your own app.
Contributing
Thanks for your interest in contributing! Read up on our guidelines for
contributing
and then look through our issues with a help wanted
label.
Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.
Earlier Versions
The source code for earlier versions of the Ionic Framework may exist in other repositories. Please open issues and pull requests in their respective repositories.
- Ionic 2/3: Moved to
ionic-team/ionic-v3 - Ionic 1: Moved to
ionic-team/ionic-v1
File: docs/README.md
Ionic Framework Developer Resources
What is Ionic Framework?
Ionic Framework is an open source app development toolkit for building modern, fast, top-quality cross-platform native and Progressive Web Apps from a single codebase with JavaScript and the Web.
It is based on Web Components, which enables significant performance, usability, and feature improvements alongside support for popular web frameworks like Angular, React, and Vue.
Guides
| Guide | Description |
|---|---|
| Contributing | How to contribute including creating pull requests, commit message guidelines, and more. |
| Component Guide | Guidelines for implementing component states, accessibility, and more. |
| Sass Guidelines | Outlines scenarios where Sass members and comments should be used. |
| CSS Shadow Parts Guidelines | Guidelines for CSS shadow parts in components. |
Packages
| Project | Package | Documentation | Guides |
|---|---|---|---|
| Core | @ionic/core |
Readme | Testing |
| Angular | @ionic/angular |
Readme | Testing |
| React | @ionic/react |
Readme | Testing |
| React Router | @ionic/react-router |
Readme | Testing |
| Vue | @ionic/vue |
Readme | Testing |
| Vue Router | @ionic/vue-router |
Readme | Testing |
2. Official Technical Reference & Guides (ionic-team/docs)
File: packages/theme-classic/lib/theme/README.md
Theme folder
This folder is used to override the base docusaurus theme. It houses swizzled components. Components should NOT be swizzled unless absolutely necessary to allow for changes in future versions. If it is possible to shallow swizzle a component using the @theme-original alias, then that should be heavily considered. Swizzled components should be added to the prettier ignore and all code updates should be marked with comments to allow more seamless version updating. The styles file for components that have been unsafely swizzle should absolutely not be edited. All styling should be done from the component partials.
File: packages/theme-classic/src/styles/components/README.md
Components folder
This folder is used to style components that are used globally across the site. A good way to setup a file is to include any themed variables at the top, and the override styles below that. All these partials are imported into the base styles with the sass @use rule.
Light themed variables can be targeted using the following selector:
html[data-theme='light'] {
--ifm-menu-color-background-active: red;
}Dark themed variables can be targeted using the following selector:
html[data-theme='dark'] {
--ifm-menu-color-background-active: blue;
}Global variables can be overridden at root like this:
:root {
--sidebar-spacing-horizontal: 1.5rem;
}Styles can be overriden like this:
#__docusaurus {
.class-to-override {
margin-block-start: 1rem;
}
}File: packages/theme-classic/src/styles/README.md
Styles folder
This folder houses a global style file that is brought into the theme in docusaurus.config.js. In addition, there is a components folder that is used to style theme components instead of swizzling them.
Related issue: https://github.com/facebook/docusaurus/pull/5987 Since theme styles cannot be overridden at the moment, the base #__docusaurus tag is being used to +1 the specificity of selectors.
File: packages/theme-classic/src/theme/README.md
Theme folder
This folder is used to override the base docusaurus theme. It houses swizzled components. Components should NOT be swizzled unless absolutely necessary to allow for changes in future versions. If it is possible to shallow swizzle a component using the @theme-original alias, then that should be heavily considered. Swizzled components should be added to the prettier ignore and all code updates should be marked with comments to allow more seamless version updating. The styles file for components that have been unsafely swizzle should absolutely not be edited. All styling should be done from the component partials.
File: packages/preset-classic/README.md
`@docusaurus/preset-classic`
Classic preset for Docusaurus.