Flat UI Free Deployment and Usage Guide

Prerequisites

Before getting started with Flat UI Free, ensure you have the following installed:

• Node.js (version 10 or higher) - Required for running npm scripts and Gulp tasks
• npm (comes with Node.js) - Package manager for installing dependencies
• Git - For cloning the repository
• Bower (optional) - Package manager for web packages (if you prefer Bower over npm)

Installation

Follow these steps to install Flat UI Free:

1. Clone the repository:

   git clone https://github.com/designmodo/Flat-UI.git
   cd Flat-UI
   

2. Install dependencies:

   npm install
   bower install
   

3. Verify installation: The project structure should include:

   • app/ - Source files (SCSS, JavaScript, etc.)
   • dist/ - Compiled and minified CSS/JS files
   • docs/ - Documentation and examples

Configuration

Flat UI Free doesn't require any environment variables or API keys. However, you may want to customize the following:

1. SCSS Variables: Modify _variables.scss in app/styles/ to customize colors, typography, and other design elements.

2. Build Configuration: The Gulpfile.js contains build tasks. You can modify the dev variable to control whether sourcemaps are generated during development.

3. BrowserSync: The Gulpfile uses BrowserSync for live reloading. You can configure the server settings in the browserSync configuration.

Build & Run

Development

1. Start development server:

   gulp serve
   

   This will:

   • Compile SCSS files to CSS
   • Start a local development server
   • Enable live reloading when files change

2. Watch for changes: The gulp serve task automatically watches for changes in SCSS and JavaScript files and recompiles them.

Production

1. Build for production:

   gulp build
   

   This will:

   • Compile and minify SCSS files
   • Minify JavaScript files
   • Optimize images
   • Output to the dist/ folder

2. Run production build:

   gulp serve:dist
   

   This serves the production-ready files from the dist/ folder.

Deployment

Flat UI Free is a front-end framework, so it can be deployed to any static hosting service. Here are some recommended options:

GitHub Pages

1. Build the project for production:

   gulp build
   

2. Deploy the dist/ folder to GitHub Pages:

   • Create a new repository on GitHub
   • Initialize a git repository in the dist/ folder
   • Commit and push to GitHub
   • Enable GitHub Pages in the repository settings

Netlify

1. Connect your repository to Netlify
2. Set the build command to gulp build
3. Set the publish directory to dist/
4. Deploy

Vercel

1. Connect your repository to Vercel
2. Set the build command to gulp build
3. Set the output directory to dist/
4. Deploy

Troubleshooting

Common Issues and Solutions

1. SCSS Compilation Errors:

   • Ensure you have the latest version of Node.js and npm
   • Check that all dependencies are installed: npm install
   • Verify that your SCSS syntax is correct

2. JavaScript Errors:

   • Make sure jQuery is loaded before Flat UI JavaScript files
   • Check that the application.js file is properly included
   • Verify that all required dependencies (like Bootstrap) are loaded

3. Build Failures:

   • Run npm cache clean --force and reinstall dependencies
   • Check for any missing files in the app/ directory
   • Ensure you have sufficient disk space

4. Live Reload Not Working:

   • Check that BrowserSync is running: gulp serve
   • Verify that your browser allows connections to localhost
   • Check the console for any JavaScript errors

5. Missing Fonts/Icons:

   • Ensure the fonts/ directory is included in your deployment
   • Check that the font paths in CSS are correct
   • Verify that the font files are not corrupted

6. Responsive Design Issues:

   • Test on different screen sizes
   • Check that the viewport meta tag is included in your HTML
   • Verify that Bootstrap's responsive utilities are properly loaded

Getting Help

• Documentation: Visit the Flat UI Documentation
• Issues: Report issues on the GitHub Issues page
• Community: Check the Designmodo Community for support and discussions