Create your app blazingly fast with most lightweight, and configurable boilerplate template.
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-appThen, answer the questions:
? App name: # foo-app
? App description: # awesome descriptionthat's it! Webic will set it up for you, and you're done.
Built on top of most crucially organized SASS partials, to ensure all basic styles are set, clean, scalable and easily maintainable.
Require any module you want, the index.js file will be bundling up and works in the browser perfectly.
Includes gulpfile configurations to initialize a development environment that automates your workflow, debugging, starting a local server.
Start your app right away, with series of npm scripts that can perform all tasks in a single action, easily and quickly.
Inside the newly created app, you can run the following built-in commands:
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.jsonfile, contains startup parameters and app defaults. more -
app/robots.txtfile, 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 userequire().
Webic uses Dart Sass new modules rules: @use and @forward to import partials. (more like import and export in JavaScript)
-
The
@userule (which represents import) loads mixins, functions, and variables from other Sass stylesheets. more -
The
@forwardloads 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.