Create your front-end app with most lightweight and simple configuration, using modern tools and best practices.

Note: Be sure to have Node.js installed before proceeding.

Use the create-webic-app script, instantly fetch the latest npm published package:

npx create-webic-app

Or

npm init webic-app

Then, follow the prompts to set up your app:

? App name: # foo-app
? App description: # awesome description

that's it! Webic will set it up for you, and you're done.

• Robust base

Built on top of most crucially organized SASS partials, to ensure all basic styles are set, clean, scalable and easily maintainable.

• Modules based

Require any module you want, the index.js file will be bundling up and works in the browser perfectly.

• Automated Workflow

Includes gulpfile configurations to initialize a development environment that automates your workflow, debugging, starting a local server.

• Environment scripts

Start your app right away, with series of npm scripts that can perform all tasks in a single action, easily and quickly.

Inside your app directory, you can run:

Starts the development server.

Optmizes and bundles the app for production.

Removes the development environment.

Removes the production build.

A basic webic initial starter structure looks like this:

├── app/
│   ├── js/
│   ├── media/
│   ├── scss/
│   ├── index.html
│   ├── manifest.json
│   └── robots.txt
├── .eslintrc.json
├── .gitignore
├── .prettierrc
├── gulpfile.babel.js
├── package.json
├── README.md

• app/index.html: The main HTML file of your app.

• app/manifest.json file, contains startup parameters and app defaults. more

• app/robots.txt file, for indexing your app content by search engines. more

• media/ includes all app assets, icons, images, etc.

• scss/ contains SCSS base styles and all functions and mixins.

• js/ contains all app scripts, with cabablity to use require().

Webic uses Dart Sass new modules rules: @use and @forward to import partials. (more like import and export in JavaScript)

• The @use rule (which represents import) loads mixins, functions, and variables from other Sass stylesheets. more

• The @forward loads a Sass stylesheet and makes its mixins, functions, and variables available when your stylesheet is loaded in other Sass stylesheets. more

More about sass module system

webic uses necolas's Normalize.css in order to make browsers render all elements more consistently and in line with modern standards.

webic uses Akram Khalid's sass-mediaqueries SCSS breakpoints library.

example:

.foo {
 @include media(">phone", "<=tablet") {
   // your style here...
 }
}

Webic uses Babel to transpile ES6 code to make it compatible with older browsers.

Webic uses browserify to bundle all scripts together, by using require() to load dependencies in index.js, which the browser will execute.

Webic is open source project. licensed as MIT.

• Thanks to Nicolas Gallagher for Normalize.css.
• Thanks to Akram Khalid for sass-mediaqueries.
• Thanks to Kitty Giraudel for Sass Guidelines.

© Built by Kareem Aboueid - 2022.