I decided to upgrade the new app I am developing to the Meteor 1.3 release. I followed 'The Official Guide' instructions from MDG for the recommended directory layout and, with a bit of refactoring of my FlowRouter code, was able to get the app almost working. The problem seems to be with the Semantic UI package (2.1.8) installed from Atmosphere. I did need to add the appropriate SUI *.less files to a top-level 'main.less' file in the 'client' directory to get the app to render a properly styled view. However, the SUI behaviors which worked nicely in Meteor 1.2 yesterday no longer work.
My assumption is that I need to import the SUI behaviors using the form...
import something from 'meteor/semantic:ui';
...but I haven't been able to identify the correct import statement. Semantic UI doesn't present a typical namespace for its library so none of the obvious ideas worked.
Has anybody been able to get SUI working with 1.3 just using standard Blaze templates?
Maybe one of the following points may help, or give a hint for further inquiry:
Make sure the hole Semantic UI folder is at /client/lib/semantic-ui (no need to import anything elsewhere, just use the css classes).
Make sure the Atmosphere packages semantic:ui and flemay:less-autoprefixer are installed. So all .less files within the Semantic UI folder will be converted automatically.
If you need the JavaScript functionality of Semantic UI "Modules", like dropdowns, you need to initiate the functionality on page load. For example with $(".ui.dropdown").dropdown("initialize") or "refresh". Here you find some description of these so called "module behaviors". Behaviors are defined by $('.your.element').module('behavior name', argumentOne, argumentTwo).
If you are using a theme other than default, you might try setting the theme for the module you are trying to use to default in theme.config.less.import. It should look something like this:
/* Modules */
#accordion : 'material';
...
#dropdown : 'default';
....
Related
So I decided on taking it upon myself to make a React template with Deno as the backend. So far its been a good balance between learning something that is familiar (React) and new (Deno). Ultimately I would like to make it usable so that anyone using React can download it and get right in. With that said, there is one issue I am having and its with CSS.
While I can import the components CSS into my component, Deno does not recognize it when running the server. It will throw an "Unknown MediaType" error. So far there is only 2 workarounds I've found:
Use inline styling and turn the CSS for that attribute into an object.
Put all the CSS into the static file thereby making the file longer.
Personally I would choose the second option than the first because at least I could use stuff like media queries. I have tried using the ESM version of the "styled-components" module yet that doesn't work either. Can anyone share what they have been doing?
Solved it.
I ended up using the ESM version of the "styled-components" module and then set up the server-side rendering in the response body. Cant believe this gave me 2 weeks of headaches.
I read from time to time that it is bad practice to override css selectors in node_modules. Good practice is to override the stylesheets with more specific selectors in your own project. Can someone please explain to me why exactly this is bad practice.
To give you an example, I use the ngx-bootstrap datepicker and have had to adapt it for an application. For this I have added a custom theme to the bs-datepicker.css file. The bs-datepicker.css file was finally placed in the app folder, so everyone who pulls the project via gitlab will have the datepicker as custom when installing the dependencies via npm.
Could one say it depends, or is it fundamentally bad practice to extend the css of a node module or even overwrite selectors here?
you node module will only stay in your computer. If someone else uses your code and tries to run npm install , they will not get you manual css changes.
Also if you ever update your node_modules then also your changes will be overridden
Therefore you are suggested to make your changes in your code not in node modules.
You can use ::ng-deep in your code to make changes to some css in a library
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.
I wish there were better instructions for installing and getting started with Semantic-ui on Meteor....please see below.
Any improvements/feedback welcome.
I just decided to post these because of some difficulties I had getting semantic-ui to work with Meteor. I figured out the few things I was not getting from various answers across various forums:
Install via CLI: meteor add semantic:ui flemay:less-autoprefixer (You don't need to worry about LESS)
Create an empty custom.semantic.json file in /client/lib/semantic-ui/custom.semantic.json. (Note this is NOT the lib folder that is outside the client and server folders - make a new lib folder. Putting it in the original lib will cause your app to crash because jQuery hasn't been loaded
Start meteor - the custom.semantic.json file will populate and all the semantic-ui files will be added to your project in the same folder.
Edit the file custom.semantic.json to select only the definitions and themes you want
If you are happy with the default values you will need to remove .custom.semantic.json to generate Semantic UI - in all likelihood you will want to delete this file.
Save the file and it will generate Semantic UI
It hasn't been an issue for me yet but it appears that if you are changing theme you still need to leave the default theme setting as true. This seemed to be causing people confusion.
I wanted to use the accordion and couldn't figure how to get it working. The HTML from the docs is very straightforward but I needed this JS to get me going:
Template.yourTemplate.rendered = function() {
$('.ui.accordion').accordion();
}
If anyone knows a better way, please jump in.
Hope this helps someone avoid the minor frustrations I had earlier today.
I am using the vaadin plugin for grails, and am trying to define some custom styles. Where within my grails appliction should I put the .css? My Vaadin application is in /vaadin/ I have tried creating a /vaadin/themes/mytheme/ folder and then putting my styles.css file in there, but still had no luck. Any help would be greatly appreciated. New to grails and new to vaadin, and am pulling my hair out over small stuff like this and can't get any of the actual legwork done until I can figure these things out..
Any way of doing inline styling would be fine with me too, at this point. I really just need some way to write explicit style..
Thanks
You need to put it into /web-app/VAADIN/themes/mytheme
You can have a look at the completed addressbook tutorial (with added Gorm and Spring Security Core support)
With the latest version of the plugin:
The name of the file must be styles.css (or styles.scss, which will then be compiled to styles.css by the command grails prod war)
The file must be located in /web-app/VAADIN/themes/mytheme , where the last part is the name of your style
In your UI file, use the #Theme annotation, for example
#Theme("mytheme")
#VaadinUI(path = '/')
class MyUI extends UI {
// ...
In VaadinConfig.groovy, specify the styles used by the application:
themes = ['mytheme']