Webic

Quick start

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

Then, answer the questions:

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

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

Features

• 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.

Scripts

Inside the newly created app, you can run the following built-in commands:

npm start

Starts the development server.

npm run build

Optmizes and bundles the app for production.

npm run clean:dev

Removes the development environment.

npm run clean:build

Removes the production build.

What's included

Basic structure

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

Files

• 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().

SCSS

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

For reset style:

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

Media queries:

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

example:

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

JavaScript

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.

License

Webic is open source project. licensed as MIT.

Credits

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

Copyright

© Built by Kareem Aboueid - 2022.