problem with import bootstrap theme to ruby on rails app - css

I can't seem to import this bootstrap theme to my rails application.
https://github.com/puikinsh/sufee-admin-dashboard
I am trying to import this template for two days but no luck. It could be easy, but I don´t know what I´m doing wrong :(
I receive this error:
Undefined variable: "$border-color".
Undefined mixin ....
So I have got a problem with variables and mixins at the first time. I tried another template and it works, so I really don´t know what to try next.
Any hint or idea about how to solve this problem would be really appreciated.
Thanks

Porting a template into your Rails application is not hard if you break it down into several imprortant steps:
Import styles. From what I can see, your template is using sass along with plain css style files. You can pick one of those and copy the files into your /app/assets/stylesheets folder and importing them in your application.sass. The Undefined variable: "$border-color". points you towards missing variables.scss, which contains all the color variables for your template.
See if your template is using any third-party libraries or frameworks. In this particular example, there is a list of them in the repo's "Built With" section of the readme. Go through every single one of them and find gem versions of those libraries and add them to your Gemfile.
Copy non third-party Javascript files into your app/assets/javascripts. Require them in pagedown.coffee.erb along with third-party modules. Be sure to keep non third-party code below other modules to preserve functionality of code that relies on those modules.
Trim HTML templates into views. Figure out what part of your layout should be preserved for every page and put it into your layout view, break down the rest into controller-specific views.
There can be a lot of problems, but in general, just try to analyze the errors being thrown and solve them one by one.

Related

How to add INSPINIA bootstrap to Ember application

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

CSS modules and rollup - generating separate CSS files ("themes") with same hashes

I'm using CSS Modules (Sass) with rollup on a component library project, which is working well. Each component ends up with a dist folder containing a single JS bundle file, and a corresponding CSS file with the scoped CSS classes so consumers of the component don't have to worry about CSS class name conflicts. All they do is include the JS bundle and the CSS file and everything is great. Yay CSS Modules.
The problem I'm now facing is that some components really need separate "themes" - ideally, separate CSS files, one per theme. So consumers can continue as they've been doing: including the JS bundle, but now choosing which CSS file to include to pick a theme.
I'm not sure how to get this going with CSS modules & rollup, and whether this is even the sort of approach others are taking. From what I can see, rollup always handles bundling things together, whereas I want separate CSS files, all of which get their classes renamed identically during the build phase. That way, if within my JS I refer to styles.myclass, if myclass had gotten renamed to scoped-myclass by CSS modules for the original CSS file, for a second CSS file it would also get the same name.
This would keep consumption of the component extremely simple - just a matter of including a different CSS file.
Any suggestions?
Awfully late, but let me answer this 3 years on. So what I ended up doing was totally detaching the CSS generation step from rollup and relying on the Sass CLI to handle that portion of the build process. It felt a bit klutzy, but I remember it wasn't awfully hard to do and solved the problem I outlined above. I don't believe there was a plain rollup solution at the time, nor do I think there's one today.
However... in my case the whole approach was kinda mistaken. This certainly won't be everyone's scenario, but let me spell it all out because hey it may be useful and it definitely wasn't obvious to me at the time.
This was for an in-house shared component library, where each component and its corresponding CSS was a separate npm package stored in our Artifactory. When it grew, plenty of internal references popped up, e.g. multiple components would reference the Button component, and over time they'd reference different versions of the Buttons component - each of which needed its own properly scoped CSS, unique to that package-version.
So what I found was that by doing it this way - having the CSS generated as part of the npm package dist files - I had to write an additional layer for the consumer applications that would parse their node_modules/ folder for our own internal components and combine all the different CSS files, such as the multiple versions of buttons. e.g. the main application would directly import buttons v1.0.0 in its package.json file, but the Dialog component (also included in the package.json) could include buttons 2.0.0 as its own dependency. For every version of the package, there was a uniquely scoped version of the CSS - so the consuming application HAD to include every version otherwise the styling would be borked.
So all in all, it ended up being way more complex that I wanted. I thought I could make it easier & better with the separate generated themed CSS files as part of the package dist, but it didn't end up that way. If I could revisit that project today, I'd re-examine a solution used by Material UI and others which I kinda poo-poo'd at the time: automatic injection of the CSS into the page by the component JS, rather than generating standalone CSS files which required extra work by the consumer applications to gather up and add to the final webpage. Frankly, now I regard it as the "least crap". There are definite downsides to the injection approach (extra work done on every page render for everyone! Yikes!), but there's no doubt in my mind it hugely simplifies the job of the consumer applications. It's a balancing act, but in 20-20 hindsight I'd lean towards the injection approach. With that, scoping & theming is a different and much simpler problem.
If I got you right, consider looking at SCSS plugin: rollup-plugin-scss. It captures all spare .css files imported in the components, and then processes them through underlying node-sass. The catch is, it seems like you can write a custom callback function that'd handle your CSSs differently based on conditions you throw in.
Based on the example from the plugin's page:
import scss from 'rollup-plugin-scss'
...
export default {
input: 'src/index.tsx',
output: [...],
plugins: [
...
output: function (styles, styleNodes) {
// replace this with conditioned outputs as needed:
writeFileSync('bundle1.css', styles)
writeFileSync('bundle2.css', styles)
},
]
}

Theming HTML5 canvas along with rest of site

I'm working on theming a web app, and I ran into a problem with an angular directive that is being used. It's called angular-knob, and it uses an HTML5 canvas to display a progress bar input. Since it's a canvas, you have to tell it the color in JavaScript instead of CSS. This is the problem.
The rest of the site is themed based on a set of LESS variables. I would like the canvas to be the color of #brand-primary from the variables.less file, which could also be overridden in other theme-*.less files. I haven't found a good solution to this yet, but these are some of the ideas I've had:
Parse the variables from the LESS file with some kind of ASP.Net utility (haven't found anything that would do this for me) to get the variable names and then render them to the client in a JavaScript variable (which I could then put in an angular service)
Have gulp parse the variables from the LESS file (again, haven't found any npm packages that would do this for me) and create a script that puts the variables in with the JavaScript bundle.
Like I said, I haven't found any LESS file parsing utilities for ASP.Net or npm that would get me access to the LESS variables.
How would you tackle this kind of problem? Has anyone else had to handle something like this?

How to modify Bootstrap's LESS variables in a Flask app?

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.

FLEX components: updating import statements to move the component into another folder

I've just imported a Flex component into my project.
I have a theory question about importing.
all the imports statements in the component source files started with "com.subFolder.etc", but I have preferred to move the component folders into "componentName" and to replace all import statements as "componentName.com.subFolder.etc"
Is this ok ? Everything works perfectly, but I was wondering if the method is correct.
thanks
You can put the components anywhere you like, however you want to organize them. People will site best practices and theory but if you know where everything is and you tell the compiler where they are:
import componentName.com.subFolder.componentToBeUsed;
Everything will compile and run just fine.
Usually you will see code and components broken up in a domain model.
So you'll have:
com.yoursite.views
com.yoursite.events
com.someothersite.renderers
Which correspond to:
/com/yoursite/views
/com/yoursite/events
Basically all of your code living in folders within /com/yoursite/
and:
/com/someothersite/renderers
being a custom renderer you imported from someothersite.com to use in your application.
In the end, for the compiler and the flash player I don't think it matters where you put things as long as your happy and understand it all...and of course 6 months from now when you come back to look at this code!
It's totally correct, yes.
Note that Flex Builder (if you're using it) can automatically replace your import statements/class name when you rename a directory or a .mxml/.as file.
I never tried moving a complete structure, though, but I would't be surprised if it worked too.

Resources