Search code examples
cssangularjstwitter-bootstraplessstylesheet

How to modify your CSS working with Mobile Angular UI and Bootstrap

I know that my question has already a huge number of topics, but I think it could be helpful for the community to have a clear answer in one topic.

This is about modifying your CSS while using Mobile Angular UI, with a bootstrap template.

  1. This is how a project is organized with Mobile Angular UI :
    • bin
    • bower_components
    • hooks
    • node_modules
    • platforms
    • plugins
    • src
    • www

I have my index.html in src/html/ and my other webpages in src/templates. My index importations look like :

<link rel="stylesheet" href="css/app.min.css" />
<link rel="stylesheet" href="css/responsive.min.css" />

thanks to that, I can see the bootstrap template on my webpages. But I don't know how to modify it. The two solutions I saw are creating a design.css and import it after the two other .css, but it doesn't work. I also saw that normally we should import bootstrap.min.css, but it has no effect on my webpages.

So How could I modify the global design for my webpages, like for example the background color, keeping the Bootstrap template ? Shall we go into the less files ? What's the aim of these two css responsive.min and app.min ?

How should we organize the CSS files while working with Mobile Angular UI ?

Thanks a lot !

Solution

  • By the way, which version of Mobile angular UI are you using ? I think those stylesheets are not available. I have git cloned the project, and i can't see them.

    And now I can answer your question. If you download the framework well, you will have a src directory. In this src directory you have less/variables.less, where you can change most of the customizable elements of your interface.

    Then you gulp build again to have appropriate dist/css/*.css elements.

    Hope that help.