I've installed a fresh skeleton-navigation with typescript and tried to follow the instructions here:
http://aurelia-ui-toolkits.github.io/demo-materialize/#/installation
When checking the network tabs and console windows, there are no errors however the styles do not seem to apply to the controls.
Be sure that when you're setting up the skeleton, you follow either the Aurelia tutorial or the Materialize Bridge tutorial. They outline how to do manual bootstrapping in different ways which don't play well with one another.
In a nutshell, you either want to include the bootstrap script in your index.html file or you want to move that logic to your "main.js" file, not both. If you choose to go in the latter direction, you'll need to make sure that your HTML contains an import for "aurelia-bootstrappper" or the configure method of Main won't be run.
Related
Hi I received a web project with all already implemented CSS js HTML code, directories, project structure etc.
I have to make changes in view.js but I don’t always have internet access on the move so is there a way to continue this project locally without changing my project structure?
I already have an existing web project whose file contains
-an HTML page
-a CSS file
-a js file
Place in their folders respectively
I want to use view.js on this project
The problem I don’t always have internet access when I’m on the move.
So how do I use seen?
Knowing that:
CDN is a script placed in HTML requiring a connection to run view
-Vue CLI is a package that allows to generate a new project view "certainly out of competition"
But I should start over
Because the directory structure and already predefined what doesn’t suit me.
How does it work?
How to just add view and continue the project without zero spread?
I already installed node.js (npm) on my pc if its can help .
"-- IN BRIEF:
If you still don’t understand
Imagine being entrusted with a web project all made HTML CSS JS already configure etc...
And you must use VUE to make changes
knowing that on the move you don’t always have the connection
How do you do that?
Assuming (I can't tell 100% from your description) that it is an un-compiled implementation that uses the CDN, you can easily handle this by copying the vue library locally and update the html to use the local version instead of the CDN.
if you need to keep the html, you could use a browser plugin like requestly but there are many others. There you can select the url that goes to the cdn and replace it with the local one.
Another option for chromium-based browsers is to use local overrides. Picture upload is not working currently, so can't include a picture, but the option is available through the sources tab in the developer tools. You need to enable overrides, select a folder, then you can select the resource that you want to serve from local override.
Is there any easy way to remove any query to google font api "fonts.gstatic.com" in Nuxt.Js ? I would rather provide font files myself.
So far I tried to remove any mention of fonts.gstatic.com from .nuxt/components/index.js, but it seems that the command build reset my modifications, so nothing changed.
My configuration is quite simple, I initialized an app with #nuxt/content-theme-docs.
Since the concern is more aimed towards GAFAM (avoid the usage of Google fonts), the solution would be to fork the package for the Nuxt team and strip the related module.
Here is where to find it: https://github.com/nuxt/content/search?q=fonts
This module of Nuxt is aimed towards so fast, pain-free and easy to setup documentation. Hence probably why, Nuxt's team was using such package (since it's still the goto as of today to use Google fonts).
You can follow this answer if you want to use a module on build time: https://stackoverflow.com/a/68166329/8816585
Otherwise, you can use this website to have your fonts locally (link those to your CSS file and you should be fine): https://google-webfonts-helper.herokuapp.com/fonts
So here's a question. I'm new to Sylius, and am working on some simple CSS updates. I have a local copy of Sylius running with the built-in webserver: server:run. I also have a development server on Digital Ocean, which runs an (almost) identical copy of Sylius, aside from the configs of course.
Something strange is happening with my CSS update, however. I made a change to .navbar-brand within web/assets/compiled/backend_backend_4.css.
This change showed up immediately on my local. On the development server, however, when pulling down the change (git), and verifying that it now exists in that file, the change doesn't seem to propegate. It's effects aren't shown, inspecting the stylesheet doesn't show them, and furthermore viewing the css file sourcecode directly in the browser does not show the change. But on the filesystem it's definitely there.
I've tried clearing the cache, to no avail.
I also checked the assetic value in both config_dev.yml files, and verified they are both set to use_controller: true
Even still, I tried dumping assetic, to no avail.
So I'm wondering what's going on. Additionally, I realize that I probably shouldn't edit CSS files within a folder called 'compiled'. I'm sure there's a way to do that using a compiler, but I'm not yet familiar with the process and am just making minor changes and learning about caching so far.
Yes you are right you shouldn't be editing the compiled files.
You should edit the source files, then run gulp
or on my system i have to explicitly run npm run gulp
I've documented the solution that worked for me here. It didn't involve Gulp at all, but instead uses Assetic:
Assets need to be installed as hard copies first (I'm not quite sure
what this does exactly, but it seems like an important step because
it copies a lot of assets to places. Documentation was unhelpful but
it was suggested on Stack Overflow somewhere.):
app/console assets:install web
Assets should be edited in web/bundles/[bundle-here]/css or js. This
is frequently within syliusweb if it has to do with page styles /
layouts.
Hint: These assets are referred to in files such as
src/Sylius/Bundle/Resources/views/Backend/layout.html.twig (see the
opening:
(% stylesheets
tag, or search universally for this tag).
Within this tag, you'll see that stylesheets have an output to the compiled folder, but also list the
bundles where they pull their original css from. You should edit one of the source css files, if you'd like your changes to end up in the destination css.
After editing assets, dump assetic:
php app/console assetic:dump
Note - it is also possible to set an assetic watcher on these assets
(google to find out how, think it's a -w flag somewhere), but this is
said to only work in development mode, as it should.
After dumping assetic, the assets from the source bundles compile into their assets/compiled versions, usually combining multiple stylesheets. You should now see your asset refresh!
In Sitefinity WebForms you have a ResourceLinks control allowing you to combine multiple, but what do you use in MVC layouts?
I'm not sure if the razor helper #Html.StyleSheet will do the job?
Adding all the CSS files to the Global folder in App_Data\Sitefinity\WebsiteTemplates[template_folder]\App_Themes[theme] will automatically add them to the site, but won't combine them.
We're working with Sitefinity 8.x and looking for a definitive way to compress and combine JS and CSS, but the pickings seem slim.
With the move from webforms to mvc, Sitefinity didn't include specifically introduce a new bundler or something so you're left with essentially 2 default options, but they've seemed to have opted for approach #3.
1) Use .less and .sass to pre-process as part of your build process.
So in your theme folder you would have a global.less (or scss or sass) that essentially combines them using the #import directive.
Install a VisualStudio extension like Mad's Kristensen Bundler and Minification VS Extension (previously part of WebEssentials) and then define in the VS settings that it should compile and minify on build.
Then every time you build or publish, your one bundled-and-compressed .min.css will be available for Sitefinity.
2) Second option would be to use default ASP.NET Web Optimization.
Where you define static bundles in VisualStudio and then use these bundles by means of #Styles.Render or #Scripts.Render to output them.
3) Lastly a new way has been added with the new Feather approach, which uses the current fashionable approach of Grunt to bundle and optimize your styles and scripts.
In the /ResourcePackages folder you'll already see a gruntfile.js file which has a task you can run which can then compile (and can be extended to prefix, bundle, minify, etc) your .sass into a .min.css which you can then add to your solution.
A sample can be seen here (https://github.com/Sitefinity/feather-packages/blob/master/Bootstrap/gruntfile.js)
I'd use a combination of the above approach to receive the maximum result with Sitefinity where you use option 1 to have VS build out your core/base CSS and JS and then include them using Web.Optimization.
Any additional page or widget related styles or JS can then be included afterwards manually through the css widget which gets compiled through option number 3.
Once you get more familiar with this new approach you can create and load optimized .css and .js on demand - even using a RequireJS approach to load them depended on the widget dragged and dropped on the page. RequireJS might seem out-dated given the latest gadgets and gizmo's but with v9.0 its still being used by Sitefinity itself to add inline-editing functionality.
Let me know if you need more info on option 3, I'm happy to extend my answer with some code snippets, or sample scripts on how I've tailored them.
I've cloned noflo-ui from github and am running locally but cannot figure out how to add/remove components from the noflo-search box. Ideally, I would like to remove all components from the search results and show only a the ones from my component libraries.
The readme states that libraries can be added by modifying preview/component.json, but removing libraries seems to have no effect. After reading through the docs on components and the spec for component.js I tried editing /component.json, and was also unable to change the results which show in the search box. Furthermore, I can't find any documentation on the .noflo property used in components.json.
Am I doing something wrong or is removing default components not an option?
I assume you are using the bundled noflo-browser runtime (iframe). Did you rebuild after editing preview/components.json?
An easier way to use custom component libraries is to do a custom runtime build, for instance based on noflo-app, host it locally, and switch the runtime URL to point there.
This also works with app.flowhub.io so no need to build & run noflo-ui locally.
In addition to editing preview/component.json, you also have to rebuild the iframe runtime components. To do that, run:
$ grunt build
Note that with newer noflo-ui/Flowhub there is actually no need to build the full UI locally. You can use the hosted Flowhub or even the Chrome app, and simply connect it to an iframe runtime you're running somewhere else:
The noflo-browser-app repo gives a nice base to build these from.