### Start Localhost Server (Shell)
Source: https://designreset.com/cork/documentation/laravel/installation
Starts the local development server using Laravel's Artisan command, making the application accessible via a URL.
```shell
php artisan serve
```
--------------------------------
### Start Vite Development Server (Shell)
Source: https://designreset.com/cork/documentation/laravel/installation
Starts the Vite development server, which provides fast hot module replacement for front-end assets.
```shell
npm run dev
```
--------------------------------
### Install NPM Dependencies (Shell)
Source: https://designreset.com/cork/documentation/laravel/installation
Installs all the project's JavaScript dependencies listed in package.json.
```shell
npm install
```
--------------------------------
### Watch for Sass and BrowserSync
Source: https://designreset.com/cork/documentation/installation
Starts a watcher that simultaneously compiles Sass files (for the specified layout, e.g., 'vdm') and runs BrowserSync for live browser reloading upon file saves.
```bash
gulp watch:vdm
```
--------------------------------
### Build for Production (Shell)
Source: https://designreset.com/cork/documentation/laravel/installation
Compiles and optimizes front-end assets for production deployment.
```shell
npm run build
```
--------------------------------
### Test Gulp Initialization
Source: https://designreset.com/cork/documentation/installation
Verifies that Gulp has been successfully installed and initialized within the project. This command runs a basic Gulp task.
```bash
gulp hello
```
--------------------------------
### Install Gulp Globally
Source: https://designreset.com/cork/documentation/installation
Installs the Gulp command-line tool globally on your system, allowing you to use Gulp commands from any directory. Mac users may need to use 'sudo'.
```bash
npm install gulp -g
```
```bash
sudo npm install gulp -g
```
--------------------------------
### Install Composer Dependencies (Shell)
Source: https://designreset.com/cork/documentation/laravel/installation
Installs all the project's PHP dependencies listed in composer.json. It creates a 'vendor' folder containing these dependencies.
```shell
composer install
```
```shell
composer install --ignore-platform-req=ext-fileinfo
```
--------------------------------
### Basic Grid Layouts (HTML)
Source: https://designreset.com/cork/documentation/grid-system
Demonstrates the fundamental structure for creating columns within the grid system. These examples show how to divide rows into equal or specific width columns.
```html
```
```html
.col-md-3
.col-md-3
.col-md-3
.col-md-3
```
```html
.col-md-4
.col-md-8 (wider)
.col-md-3
.col-md-6 (wider)
.col-md-3
```
```html
```
```html
1 of 3
Variable width content
3 of 3
Column
Variable width content
Column
```
--------------------------------
### Check Composer Version (Shell)
Source: https://designreset.com/cork/documentation/laravel/installation
Verifies if Composer, a dependency manager for PHP, is installed.
```shell
composer --version
```
--------------------------------
### Check Node.js Version (Shell)
Source: https://designreset.com/cork/documentation/laravel/installation
Verifies if Node.js is installed and meets the minimum required version (16+). This is a prerequisite for Vite and Laravel plugins.
```shell
node -v
```
--------------------------------
### Generate .env File (Shell)
Source: https://designreset.com/cork/documentation/laravel/installation
Generates the .env file if it is missing, which is crucial for application configuration.
```shell
php artisan key:generate
```
--------------------------------
### Configure Database in .env File (Environment Variables)
Source: https://designreset.com/cork/documentation/laravel/installation
Sets the database connection details. This includes the database driver, host, port, name, username, and password.
```env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=
```
--------------------------------
### Rebuild Node Sass with Force
Source: https://designreset.com/cork/documentation/installation
Attempts to resolve 'ENOENT' errors related to 'node-scss' by rebuilding the native modules. The '--force' flag can be used if the issue persists.
```bash
npm rebuild
```
```bash
npm rebuild --force
```
--------------------------------
### Compile Sass for Plugins
Source: https://designreset.com/cork/documentation/installation
Compiles Sass files located within the Plugins folder into CSS. The 'vdm' prefix indicates the Vertical Dark Menu layout; 'vlm' and 'cm' are used for Vertical Light Menu and Collapsible Menu respectively.
```bash
gulp vdm:sass:plugins
```
--------------------------------
### Compile Sass for Assets
Source: https://designreset.com/cork/documentation/installation
Compiles Sass files located within the Assets/css folder into CSS. The 'vdm' prefix indicates the Vertical Dark Menu layout; 'vlm' and 'cm' are used for Vertical Light Menu and Collapsible Menu respectively.
```bash
gulp vdm:sass:assets
```
--------------------------------
### Layouts Folder Structure
Source: https://designreset.com/cork/documentation/folder-structure
Illustrates the structure of the 'layouts' folder, which contains the CSS and JavaScript files for each specific layout. The example shows the organization for the 'vertical-dark-menu' layout.
```tree
├── layouts -> Layout CSS and JS
└── vertical-dark-menu
├── css
| ├── dark
| └── light
|
├── app.js
└── loader.js
```
--------------------------------
### Define Route in Laravel's web.php
Source: https://designreset.com/cork/documentation/laravel/development
This snippet shows how to define a new GET route in Laravel's `web.php` file. It includes parameters for the view path, page category, title, breadcrumbs, and a flag for simple page layouts, facilitating the creation of new pages with specific configurations.
```php
Route::get('/route‐name', function () {
return view('[your blade file path]',
[
'catName' => '[category of the route]', // category can be anything such dashboard, apps, pages, etc ( Note:‐ Category name is for adding the active class for sidebar)
'title' => '[Page Title]', // Page Title
"breadcrumbs" => ["Main", "Submenu 1", "Submenu 1"], // Array for Breadcrumbs
'simplePage' => 0 // To create pages without sidebar and topbar such as Error, Maintainance, Auth pages
'scrollspy' => 0, // Always be 0. Ignore it.
]
);
})‐>name('routeName');
```
--------------------------------
### NPM Lock File
Source: https://designreset.com/cork/documentation/folder-structure
This file records the exact versions of all dependencies installed in the project. It ensures reproducible builds by locking dependency versions, preventing unexpected changes.
```json
package-lock.json
```
--------------------------------
### Loader Initialization with JS
Source: https://designreset.com/cork/documentation/javascript
The loader.js file handles the initial loading sequence for the application. It removes a loading screen and prepares settings for the demo, often including layout-specific configurations.
```javascript
window.addEventListener("load", function(){
// Remove Loader
var load_screen = document.getElementById("load_screen");
document.body.removeChild(load_screen);
var layoutName = 'Collapsible Dark Menu';
var settingsObject = {
............
............
............
}
})
```
--------------------------------
### App Initialization for Layout
Source: https://designreset.com/cork/documentation/javascript
The app.js file is crucial for the proper functioning of the application's layout. It typically contains an App object with an initialization method that is called upon page load.
```javascript
var App = function() {
}();
window.addEventListener('load', function() {
App.init('layout');
})
```
--------------------------------
### Gulp Build Configuration
Source: https://designreset.com/cork/documentation/folder-structure
This file contains the build configurations for the project using Gulp. It likely includes tasks for compiling SCSS, minifying JavaScript, and other development-related operations.
```javascript
gulpfile.js
```
--------------------------------
### NPM Project Configuration
Source: https://designreset.com/cork/documentation/folder-structure
This file defines the metadata for the Node.js project, including dependencies, scripts, and version information. It's essential for managing packages and running project tasks via npm.
```json
package.json
```
--------------------------------
### Vertical Dark Menu Folder Structure
Source: https://designreset.com/cork/documentation/folder-structure
Explores the 'vertical-dark-menu' folder, which houses all HTML files for pages and the starter kit. It categorizes files by application, authentication, charts, components, elements, forms, dashboards, layouts, maps, pages, tables, users, and widgets.
```tree
├── vertical-dark-menu -> HTML Files
├── starter-kit -> Contains Starter Kit
|
├── app-*.html -> All Application Files
├── auth-*.html -> All Authedication Files
├── charts.html -> Charts
├── component-*.html -> All Components Files
├── element-*.html -> All Elements Files
├── form-*.html -> All Form Files
├── index.html -> Default Dashboard
├── index2.html -> Secondary Dashboard
├── layout-*.html -> All Layouts Files
├── map.html -> Maps
├── pages-*.html -> All Pages Files
├── table-*.html -> All Tables Files
├── user-*.html -> All User Files
└── widgets.html -> Widgets
```
--------------------------------
### Main Package Folder Structure
Source: https://designreset.com/cork/documentation/laravel/folder-structure
Overview of the top-level directories within the CORK Admin main package. This structure includes directories for documentation, different framework implementations (HTML, Laravel), and tools.
```directory
├── cork-v4.0
└── Documentation
└── HTML
└── Laravel
└── Tools
```
--------------------------------
### Create New Blade File for Development in Laravel
Source: https://designreset.com/cork/documentation/laravel/development
This snippet demonstrates how to create a new Blade file within the `resources/views/` directory in Laravel. It extends the base layout (`layouts.app`) and defines sections for styles, content, and scripts, which are essential for structuring the application's views.
```blade
@extends('layouts.app')
@section('styles')
{{‐‐ Style Here ‐‐}} // All the SCSS or CSS goes here
@endsection
@section('content')
{{‐‐ Content Here ‐‐}} // Content goes here
@endsection
@section('scripts')
{{‐‐ Scripts Here ‐‐}} // All the script goes here
@endsection
```
--------------------------------
### Compile SASS using gulp-sass
Source: https://designreset.com/cork/documentation/style-customization-sass
This snippet explains how to compile SASS files using gulp-sass. It highlights the location of the main SCSS files and recommends using `custom.scss` for user modifications to ease future updates.
```bash
gulp-sass
```
--------------------------------
### Source Files Folder Structure (src)
Source: https://designreset.com/cork/documentation/folder-structure
Details the 'src' folder, containing all source files including assets (CSS, images, JS), Bootstrap framework files, and plugins (CSS and JS, including custom files).
```tree
├── src -> Contains all the Source Files
├── assets -> Contains all the CSS, Images and JS
| ├── css
| ├── img
| └── js
|
├── bootstrap -> Bootstrap Framework
|
└── plugins -> All the plugins CSS and JS including Custom files
├── css
└── src
```
--------------------------------
### HTML Folder Structure
Source: https://designreset.com/cork/documentation/folder-structure
Detailed structure of the HTML folder, which contains the different HTML versions and layouts of the CORK ADMIN template. It also includes source files and SCSS.
```tree
├── HTML -> Contains the HTML version of CORK ADMIN
├── vertical-dark-menu
├── vertical-light-menu
├── collapsible-menu
└── layouts
└── scss
└── src
```
--------------------------------
### Laravel Implementation Folder Structure
Source: https://designreset.com/cork/documentation/laravel/folder-structure
Detailed breakdown of the Laravel version's folder structure. It highlights key directories like 'app', 'public', 'resources', and 'routes', crucial for understanding the Laravel application's organization.
```directory
├── Laravel -> Contains the Laravel version of CORK ADMIN
├── app
|
├── bootstrap
|
├── config
|
├── database
├── lang
|
├── public
| |── build -> All build assets
| | |── assets
| | └── manifest.json
| └── plugins -> All plugins JS and CSS
|
├── resources
| |
| |── images -> Contains uncompiled images
| |
| |── js -> Contains all the app pages JS such as Chart, Mailbox etc and plugins related to vite
| |
| |── layouts -> Contains all layouts app.js and loader.js
| | |── collapsible-menu
| | |── vertical-dark-menu
| | └── vertical-light-menu
| |
| |── scss -> SCSS files
| | |── dark
| | |── layouts
| | └── light
| |
| └── views -> Contains Application Blade Files
| |── admin -> Application/Dashboard pages
| └── layouts -> Contains Layouts Blade Files
|
├── routes -> Web Routers
├── storage
├── tests
├── vendor -> Vendor Folder will be generated when composer install command will be executed
├── .editorconfig
├── .env
├── .env.example
├── .gitattributes
├── .gitignore
├── .phpunit.result.cache
├── artisan
├── composer.json
├── package.json
├── phpunit.xml
└── vite.config
```
--------------------------------
### HTML Sidebar Section
Source: https://designreset.com/cork/documentation/admin-structure
This HTML code illustrates the structure of the sidebar in the admin panel. It includes navigation elements and is designed to be responsive.
```html
```
--------------------------------
### SCSS Folder Structure
Source: https://designreset.com/cork/documentation/folder-structure
Breaks down the 'scss' folder, which organizes all SCSS files. It includes subfolders for dark themes, layouts, and light themes, each containing specific assets, base styles, and plugin styles.
```tree
├── scss -> Sass Files
├── dark -> All Dark assets and plugins SCSS
| ├── assets
| ├── base
| └── plugin
|
├── layouts -> All the LAYOUTS SCSS
|
└── light -> All Light assets and plugins SCSS
├── assets
├── base
└── plugin
```
--------------------------------
### Direct CSS File Modification
Source: https://designreset.com/cork/documentation/style-customization-css
Allows for direct modification of CSS files if SASS is not being used. Customizations should be made in `custom.css`. Avoid altering core framework or library CSS files.
```css
/* Customizations go here */
/* Example:
body {
background-color: #f0f0f0;
}
*/
```
--------------------------------
### HTML Main Container Section
Source: https://designreset.com/cork/documentation/admin-structure
This HTML snippet defines the main container section of the admin layout. It encompasses the overlay, sidebar, and the primary content area.
```html
```
--------------------------------
### HTML Main Content Area
Source: https://designreset.com/cork/documentation/admin-structure
This HTML code defines the main content area where widgets and breadcrumbs are displayed. It uses the 'main-content' class and 'layout-px-spacing' for styling.
```html
```
--------------------------------
### HTML Header Section
Source: https://designreset.com/cork/documentation/admin-structure
This HTML code represents the header section of the admin interface. It includes elements for the sidebar toggle, search bar, language dropdown, theme toggle, notifications, and user profile.
```html
```
--------------------------------
### SCSS File Location in Cork Admin Laravel
Source: https://designreset.com/cork/documentation/laravel/style-customization-sass
The SCSS files for the Cork Admin Laravel template are located within the `resources/scss/**.scss` directory. Vite is used for SCSS compilation. Customizations should be made in `custom.scss` to avoid conflicts during updates.
```text
resources/scss/**.scss
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.