Do I need Ionic CSS?

ionic-v1
1

Scenario

I have a responsive single-page web app built in LESS and Angular.JS.

Aim

I’d like to port this into an app using the Ionic framework. Really all I’m after is the ionic-nav-view structure and all the smarts you guys have done for performance, 300ms delay, ghost clicks etc.

Question

Can I completely abandon the ionic CSS and use my own customised gulp build with the below structure? Are there any major implications to not using the ionic CSS?

app
|
|- platforms
|- less
|-www

  • css
    The build less under here
2

Yes, you can now. Read the Formula which describes how to deploy Ionic apps with Less. You can find this Formula at https://github.com/bassjobsen/ionic-learn/blob/less/content/formulas/working-with-less/article.md for now.

This Formula uses the Less autoprefix plugin and the Less ionic plugin.

Your Gulp less task should look like that shown below, with var less = require('gulp-less');:

gulp.task('less', function(done) {
  
  var LessPluginIonic = require('less-plugin-ionic'),
  ionicless = new LessPluginIonic();
   
  var LessPluginAutoprefix = require('less-plugin-autoprefix'),
  autoprefix = new LessPluginAutoprefix({ browsers: ["Android >= 2.1","BlackBerry >= 7","Chrome >= 20","Firefox >= 21","Explorer >= 10","iOS >= 3.2","Opera > 12","Safari > 6","OperaMobile >= 12.1","ChromeAndroid >= 40","FirefoxAndroid >= 30","ExplorerMobile >= 10"] });
  
  gulp.src('./less/ionic.app.less')
    .pipe(less({
      plugins: [ionicless, autoprefix]
      }))
    .pipe(gulp.dest('./www/css/'))
    .pipe(minifyCss({
      keepSpecialComments: 0
    }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest('./www/css/'))
    .on('end', done);
});