New user to 3rd party bootstrap templates for Ember and need help.
I purchased the INSPINIA admin template from www.wrapbootstrap.com. The download comes with multiple pre-created projects with INSPINIA built in (e.g., Angular, Rails, etc.) but not for Ember. I reached out to the creator to see if they could include a project for Ember and they said no.
So, I am curious, does anyone know how to add INSPINIA to an Ember web application? Is it as simple as ember install bootstrap and then copy the *.css file? Note: the INSPINIA template comes with way more files than just a *.css, and I am using ASP.NET CORE 2.2 for the web API.
Any help is appreciated.
When I did the same thing a few years ago, I bought the theme just for the themed css. I used their less and integrated that into my existing ember build. Nowadays I'd use the scss but it's unimportant.
What is important is understanding that bootstrap js components will not simply work in the context of your ember application. If you want callbacks, events, binding, etc to exist in the context of ember (ie within ember's runloop and lifecycle), you will need to wrap each individual component. Luckily, ember-boostrap does exactly that for you. This addon provides the easiest way for you to pull in your bootstrap scss. This addon also does not use bootstrap's js, but rather is a full implementation of the bootstrap component's in a way that is ember-aware.
ember-bootstrap deliberately excludes bootstrap.js
because the jQuery and Ember ways of control flow and animation
sometimes don't play well together, causing unpredictable results.
This is the main motivation behind ember-bootstrap. It is possible to
import bootstrap.js from bower_components or the vendor folder. This
is NOT recommended or supported, and you will be on your own. You have
been warned!
Once you've gotten the scss preprocessing properly set up in your ember-cli-build.js file, you should be able to use their markup more or less directly. You will need to have some understanding, though, of when you're encountering bootstrap markup (stuff with data classes that will be handled by bootstrap's js). In moments like that, you simply use ember-bootstrap components instead
Related
I have started a new .NET Core template with Angular (with Microsoft identity) and I have started with the UI.
So here I see that the .net core identity uses bootstrap default, and it is not possible to reach that. The solution around that is to create a CSS-folder in "wwwroot", that will be read after the default bootstrap. Even though I would have like to create my own bootstrap theme, I can live with this.
But now I see that the angular lives with a different "theme". Even though it uses many of the same classes I have to define each class in my angular app also in the "styles.scss".
So many classes will be pretty similar (especially if I use NGbootstrap).
So I tried to import "wwwroot/css/site.css" into my styles.scss, so I didn't need to write it twice, that did of course not work.
Is there any way to use the same CSS document in both places, or is that something I should avoid?
Is it possible to specify the css rules for only the angular-bootstrap modules that I'm using in my application? For example I'm only using the dropdown, datepicker and tooltip modules from angular bootstrap. However the entire bootstrap css file is required for these three modules. I'm not using bootstraps css in the rest of my application so I think importing the entire css file is overkill.
Webpack has a built in treeshaking function, which will be the easiest option if your project is already done or way ahead in development.
I have also found this treeshaking that manually compiles Bootstrap and uses Gulp to do the treeshaking in the mean time. I found it to be way harder and possibly outputing the same result, but make yourself comfortable.
I'm starting a new angular project and it has been decided not to use a framework like bootstrap/bulma/materialize/... but write our own sassy component library.
I have done some research but to be honnest I don't realy know where to start (besides a css reset). I'm still a junior, have already worked on some features in a previous existing project. Now I have to start of the front end for new project and would like to build everything as structured and reusable as possible but I'm a little lost where to start.
What's your plan of action when you start writing your?
How do you structure your angular components library?
Have you ever seen a good tutorial about this that I should definitely check out as well?
From my point of view, it is not a simple task. But you can start from using SCSS which will give you a wide access to term reusability. And also you may need to work on flexbox/grid-layout (Not the case if you need to support old browsers like IE 11 and below) to implement a handful of styled components. By the combination of scss and 'flexbox`, I think most of the components can be created simply and reused in the way you want it to be.
I strongly recommend avoiding the usage of libraries and write our own code instead. Because the power we will have at the time is infinite. You will be amazed to have it.
But at the same time, if the project is a long-running project and your requirements are on the way, then I would suggest you to rethink about eliminating libraries like 'bootstrap, materialize. Otherwise, if the requirements change in time and you may need to use a number of libraries to achieve the functionalities you may need. (Experience is the best teacher)
On most of my projects to date I have not used a framework and written my own CSS library and would recommended it. I don't have any experience with Angular, only React. All I can share with you is my current setup.
I use gulp to compile SASS files into a main.css file and BEM methodology (You could also look at SMACSS). Each 'block' (defined by BEM) has a separate file in either Layout or Modules.
I separate my SASS files into the following folder:
Base - Used for - resets /Grids / helpers/ typography/ base (general base styles eg wrap)
Layout - Used for containers - header/footer/sidebar ect
Lib - used for mixins
Modules - used for components - form / button / alert / icon / accordion ect
Settings - color / font / responsive - used to set sass varibles to be used in all other files.
I hope that helps.
As I become more familiar with Angular, and the vast number of modules out there for making an application really shine, I am also becoming overwhelmed at understanding the basic logic of CSS overloading, and how to manage the imports to get the desired behavior.
For instance, I have pulled the following libraries into my Angular application; Boostrap, Bootcards, boostrap-select, font-awesome, and some custom bootstrap-wizard libraries for a modal tab-based wizard.
All of these libraries require being defined in the index.html page of my Angular app (both the CSS files the JS files). How do you manage the desired behaviors so that one components styles don't override another components styles? What are the best practices around bringing in multiple components and using them in an Angular app, without negatively affecting the applications previous behaviors?
You have 3 choices:
Place more important CSS files AFTER less important ones so the more important override when both have same attribute names.
Manually go in stylesheet and change attribute names.
Instead of including the stylesheet in index, include it in your html file
I am making a static website with Flask and using the flask-bootstrap extension to simplify the front-end development. I concurrently have been learning Rails and so I understand that there are a few of these languages that compile down to CSS (LESS/SASS/SCSS). As I understand it, Bootstrap by default uses LESS, and in my Rails app I had to convert LESS variables (with an # symbol at the beginning) into SCSS variables (with a $). This wasn't too difficult, no problem.
I noticed that in Miguel Grinberg's tutorial (Flask Web Development, O'Reilly) Bootstrap is used (Flask-Bootstrap extension), and there is the brief mention of {% block styles %} used to include stylesheets that way, I am confused about how I can go about modifying the existing LESS variables that come by default with Bootstrap so that I can modify the grid structure and not mess things up with my own custom stylesheets. I want to be able to do, for example, is modify the #body-bg LESS variable, or any of the ones here: http://getbootstrap.com/customize
It is very interesting question. I also was interesting in creating styles dynamically. You need follow another ways. It is not possible by the way you have described above.
You mentioned you used Flask-Bootstrap. This extension adopts the Flask project to use the Twitter Bootstrap styles. I have not fond any SASS/LESS functionality.
http://pythonhosted.org/Flask-Bootstrap/#
https://github.com/mbr/flask-bootstrap
If you look at the static folder of the extension you will not find any tracks of SASS/LESS.
As I know Twitter Bootstrap is generated by LESS. There is also a SASS fork. You regenerate styles and replace them in the static folder of the Flask-Bootstrap project.
If you want to do it dynamically you need create your own solution. I do not know a ready extension. It is the very challenging task.