SuperflyCSS Commandline Interface

CLI for SuperflyCSS Projects. The CLI enables the running of superflycss build, test, and serve/watch tasks. The CLI uses the pli - project layout instance for project layout. See the Build PostCSS Plugins list for a list of plugins currently supported.

Installation

npm i -g @superflycss/cli

Usage

Blog Articles

Prototyping With Bootstrap 4 Using the SuperflyCSS CLI

New Project Types

The sfc new command supports four different options for project type. They are c for component, u for utility, p for prototype, and a for application.

So for example when generating a new component project, use sfc new -t c. Prototype is the default, so when creating a prototype project just use sfc new projectname.

Supported Commands

Type sfc -h to see supported commands. The output will look like this:

  Usage: sfc [options] [command]

  SuperflyCSS Command Line Interface

  Options:

    -V, --version        output the version number
    -t, --type [type]    
    -h, --help           output usage information

  Commands:

    new|n <name>         Create a new project
    clean|c              Clean the build (Removes target folder)
    build:main:css|bmc   Build main css)
    build:test:css|btc   Build Test CSS
    build:test:html|bth  Build Test HTML
    build|b              Build main css, test css, and test html
    dist|d               Prepare dist directory for publishing to NPM
    serve|s              Compile and serve main and test css and test html

The sfc serve command watches and builds the project while also serving the projects html files with live reload courtesy of browser-sync.

Specifically it build src/test/css/**/*.css files and the results are saved to serve/css. The src/test/html/**/*.html files are build and save to the serve directory.

Place main css files in src/main/css and test css files (The CSS used in the test html file) in src/test/css. Built main css files are saved in target/main/css and test css files are saved to target/test/css. Use test case files in src/test/html/ to test the CSS being built. Run sfc test:css to compile the test html files.

PostCSS Plugins Used by the CSS Build Commands

The following plugins are invoked when the tasks build:main:css and build:test:css are invoked.

Plugin Name	Plugin URL
autoprefixer	https://github.com/postcss/autoprefixer
postcss-import	https://github.com/postcss/postcss-import
postcss-apply	https://github.com/pascalduez/postcss-apply
postcss-calc	https://github.com/postcss/postcss-calc
postcss-color-function	https://github.com/postcss/postcss-color-function
postcss-custom-media	https://github.com/postcss/postcss-custom-media
postcss-custom-properties	https://github.com/postcss/postcss-custom-properties
postcss-each	https://github.com/outpunk/postcss-each
postcss-font-magician	https://github.com/jonathantneal/postcss-font-magician
postcss-for	https://github.com/antyakushev/postcss-for
postcss-reporter	https://github.com/postcss/postcss-reporter
postcss-sass-color-functions	https://github.com/adam-h/postcss-sass-color-functions

Test CSS Command

The sfc test:css command supports the visual testing of superflycss components and utilities by building the src/test/html/**/*.html content. It has the following features:

• Nunjucks templating
• Highlighting of content contained in the Test-markup block
• Generation of aTest-render block that copies and displays the markup contained in the Test-markup block

Sample prebuilt content is shown below. The markup contained in Test_markup will be highlighted, and a corresponding Test-render block will be generated after the Test_description block. Note that the tree structure of the test markup must match the structure shown.

<div class="TestHeader">
    <span class="TestCounter"></span>
    <span class="TestComponent">Button</span>

    <div class="TestContainer">
      <div class="TestInput">
          <div class="TestWhen"></div>
          <div class="TestDescription">When the <code>.Grid</code> container holds 2 <code>.Grid-cell</code> instances.</div>
          <pre class="TestMarkup">
            <code class="html">
              <div class="Grid">
                  <!-- Use Nunjucks to keep markup DRY -->
                  {% for cell in ['1', '2'] %}
                      <div class="Grid_cell">{{cell}}/2</div>
                  {% endfor %}
               </div>
            </code>
          </pre>
      </div>
      <div class="TestOutput">
          <div class="TestThen"></div>
          <div class="TestDescription">Each grid cell occupies the same amount of space witin the grid container row.</div>
      </div>
  </div>

Post the test build the content looks like this:

<div class="TestHeader">
  <span class="TestCounter"></span>
  <span class="TestComponent">Grid</span>

  <div class="TestContainer">
    <div class="TestInput">
      <div class="TestWhen"></div>
      <div class="TestDescription">When the <code class="hljs"><span class="hljs-title">.Grid</span></code> container holds 2 <code class="hljs"><span class="hljs-title">.Grid-cell</span></code> instances.</div>
      <pre class="TestMarkup">
            <code class="html hljs">
&lt;div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"Grid"</span>&gt;
  <span class="xml"><span class="hljs-comment">&lt;!-- Use Nunjucks to keep markup DRY --&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"Grid_cell"</span>&gt;</span>1/2<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"Grid_cell"</span>&gt;</span>2/2<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
            </code>
          </pre>
    </div>
    <div class="TestOutput">
      <div class="TestThen"></div>
      <div class="TestDescription">Each grid cell occupies the same amount of space witin the grid container row.</div>
      <div class="TestRender">
        <div class="Grid">
          <!-- Use Nunjucks to keep markup DRY -->
          <div class="Grid_cell">1/2</div>
          <div class="Grid_cell">2/2</div>
        </div>
      </div>
    </div>
  </div>
</div>