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

2
votes

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 !

1
cssangularjstwitter-bootstraplessstylesheet
just add your custom stylesheets after the framework ones, i really don't see the point of your question. - vdegenne
Thank you for your answer. As I said, it doesn't take into account my custom stylesheet, when I import design.css in my index.html, it doesn't change anything. My question is how to overwrite your Bootstrap template. - Gabriel Schmitt
Yes I read well but this is strange behavior, it should works. some properties are persistent, meaning they will not change after being defined but that is where !important becomes handy. IMHO you shouldn't modify the less files of the bootstrap, bootstrap is consistent and it doesn't make sense to modify it just to fit your own design, it is a framework. - vdegenne
What if I want to add new features ? Do I need to modify the app.min.css file ? - Gabriel Schmitt

1 Answers

0
votes

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.