Handcrafted CLI to make my front-end workflow much easier.
MIT License
Maverick CLI lets you create a scaffolding for your next project with ease. Maverick CLI is based on a popular Yeoman generator webapp, with some changes.
On macOS, Linux, or Windows run the following:
npm install -g maverick-cli
That is it!
gulp serve
to preview and watch for live changesgulp
or gulp build
to build the app for productiongulp serve:dist
to preview the production buildmaverick init <path> [Project name] [options]
- to scaffold your webapp ( is optional)
Options:
--skip-install
to skip the execution of bower
and npm
installation after scaffolding.
maverick sass [options] [File name]
- create a SCSS file.
Options:
Options argument is required.
-c
or --component
to add a component, this also adds a css selector.-e
or --element
to add an element-t
or --tool
to add a tool-u
or --utility
to add a utility-p
or --plugin
to add a pluginExample
maverick sass -c "responsive-img"
maverick pug [File name]
to create a pug page
Options:
-t
or --title <title>
to add a title to the pageIf you don't provide the title it will be empty.
There is a well-defined project structure that must be respected.
src
├───fonts
├───images
├───js
├───sass
│ ├───components
│ ├───elements
│ ├───generic
│ ├───plugins
│ ├───tools
│ └───utilities
└───views
├───inc
└───layouts
SASS Folder
This is where all the .scss
files are found, gulp will watch for changes in this folder.
/components
- Complete chunks of UI, like navigation, cards, panels etc../elements
- Unclassed HTML elements, like a, h1, body, blockquote etc../generic
- Reset and normalize css./plugins
- SCSS files from imported plugins, like owl-carousel, popper etc../tools
- Mixins and functions/utilities
- Override and helper functions, they are usually high-priority (!important)
SCSS files shouldn't be created manually, CLI should be used for that.
Views folder
This is where all the .pug
files are found, gulp will watch for changes in this folder.
inc
- Page parts that are included in a template, like header, footer, navigation etc...layouts
- Templates that are extended by the pages.In the root of the views
is where the pages are located.
If the project hasn't been generated by Maverick CLI commands (scss, pug) won't work.