Svelte Folder Structure
To make the code more re-usable we have created multiple components that can be reused. This makes refactoring the code effecient and saves a lot of time for the developers.
We have used the best folder structure to keep all the common types of code separate from each other.
- Cuba
- public
- assets
- audio
- fonts
- feather
- flag-icon
- font-awesome
- ico
- ionic-icon
- material-design-icon
- themify
- typicon-icon
- i18n
- images
- appointment
- avtar
- banner
- big-lightgallry
- big-masonry
- blog
- button_builder
- calender
- checkout
- dashboard
- dashboard-2
- dashboard-3
- dashboard-4
- dashboard-5
- dashboard-6
- dashboard-7
- dashboard-8
- ecommerce
- email-template
- faq
- job-search
- landing
- lightgallry
- logo
- masonry
- notification
- other-images
- product
- range-slider
- sidebar-image
- sidebar-pattern
- slider
- slider-auto-width
- social-app
- tree
- user
- user-card
- welcome
- language
- scss
- base
- components
- layout
- pages
- themes
- utils
- vendors
- chartist
- feather-icon
- flag-icon
- font-awesome
- icoicon
- image-cropper
- ionic-icon
- page-builder
- scrollable
- select2
- simple-line-icon
- simple-mde
- sticky
- summernote
- svg-icon
- sweetalert2-master
- themify
- time-picker
- todo
- tour
- tree
- typicon-icon
- vector-map
- whether-icon
- chartist
- base
- svg
- video
- audio
- build
- assets
- public
- script
- src
- api
- auth
- components
- Application
- Bookmark
- Chat
- Chats
- VideoChat
- Chats
- Ecommerce
- Chekout
- Invoice
Invoice.svelte
- Chekout
- OrderHistory
- PaymentDetails
- OrderHistory
- Pricing
- Product-List
- Pricing
- Wishlist
- Bookmark
- Emails
- EmailApp
- EmailCompose
EmailCompose.svelte
- EmailApp
- Application
- FileManger
- SearchResult
- SocialApp
- Users
- UsersCards
- UsersEdits
EditedUserDetails.svelte
- UsersCards
- UsersProfile
- api
- BonuUi
- BasicsCard
- Breadcrumb
- CreativeCard
- DragandDrop
- DraggableCards
- Dropzone
- Pagination
- RangeSlider
- Ribbons
- SweetAlert
- TimeLine
- Toasts
- TreeView
- BasicsCard
- Buttons
- ButtonGroup
- DefaultStyle
- EdgeStyle
- FlatStyle
- RaisedStyle
- ButtonGroup
- Charts
- ApexChart
- ChartJs
- ApexChart
- CommonComponent
- core
- Dashboard
- CommenSquare
- Crypto
- Default
- Ecommerce
- OnlineCourse
- Social
- NFT
- POS
- SchoolManagement
- CommenSquare
- Forms
- Controls
- BaseInput
- BaseInput
- FormLayout
- FormsWidgets
- Controls
- Icons
- FeatherIcons
- FlagIcons
- FontawsomeIcon
- IcoIcon
- IconMarkUp
- ThemifyIcons
- WeatherIcons
- FeatherIcons
- Miscellaneous
- Blog
- FAQ
- gallery
- Maps
- LeafletMap
- LeafletMap
- Knowledgebase
- SupportTicket
- Blog
- OtherPages
- CommingSoon
- ErrorsPages
- CommingSoon
- PageLayout
- FooterDark
- FooterFix
- HideNavScroll
- FooterDark
- Tables
- AutofillDatatables
- DataTable
- SveltestrapTables
- BasicTable
- BorderTable
- SizingTable
- TableComponents
- BasicTable
- AutofillDatatables
- AutofillDatatables
- Ui-kits
- Accordion
- Alert
- Avtars
- Dropdown
- Grid
- HelperClasses
- List
- Modal
- Basic
- Others
- Size
- Verifying Modal
- Basic
- SvelteSlider
- Popover
- Progress
- SvelteSlider
- Tabs
- Tag&Pills
- Tooltip
- Typography
- Accordion
- Chart
- General
- Accordion
- Alert
- Application
- BookMark
- Chat
- Ecommerce
- FileManager
- Project
- SearchResult
- SocialApp
- Todo
- UserProfile
- BookMark
- Avtars
- chart
- dashboard
- dashboard
- Dashboard
- Crypto
- Default
- Ecommerce
- OnlineCourse
- Social
- NFT
- POS
- SchoolManagement
- Crypto
- Layout
- HeaderData
- HeaderData
- MISCELLANEOUS
- FAQ
- Gallary
- Knowledgebases
- Maps
- FAQ
- SvgIcon
- Breadcrumb
- Footer
- Header
- PreLoader
- Sidebar
- Tapontop
- ThemeCustomizer
- Constance
Cuba
This folder contains all the other files and folders related to the project. Information regarding those folders is given below.
assets
Apart from the html we require many other files to make our website more interative and attractive. These type of files are stored in this folder. It contains all the scss files , images, and the javascript files. We recommend you keep the name of the folder "assets" as it is saved as the default path for accessing the public files.
JSON Data
To make code sorter and easily modifiable, we get the required data from a JSON file and loop through it. This process makes our code mode dynamic and more readable.
For Example: There are many links in our sidebar and if we write HTML code for individual link then, there will be hundreds of lines of code and it would be dificult to make any changes in all the links at once. So the solution is making a JSON file , in which we define an array and then loop through it. To add or remove links you can make modification in menu.json file.
Navigate to theme > src > data folder to find all JSON
files.
themes
This is the main folder where all the "themes" files are there Saved as the default folder name from which view files are shown.will be accessed. So we advice that you do not change the name of this folder as well. This folder contains all the view files, if you need to make changes in the '.svelte ', you will have to find that file in this folder.