I am trying to upgrade from Bootstrap 4.0.0 to 4.5.0 on my WordPress. From reading another thread, I believe I simply need to find certain files and replace the 4.0.0 versions with 4.5.0 versions., specifically CSS and JS folders.
I downloaded the 4.5.0 source files from Bootstrap's website. In the WordPress site theme I have active, I see inside /node_modules/bootstrap/ a collection of folders that match folders inside the Bootstrap 4.5.0 source files I downloaded. Specifically (all at the same level):
A folder titled "dist" with subfolders "css" and "js"; the contents
appear very similar between the source files and what I already have
A folder titled "js" with subfolders "dist" and "src"; the contents
appear very similar between the source files and what I already have,
but the source files folder also has a folder "tests" that is not on
my existing site
A folder titled "scss" with subfolders "mixins" and "utilities" as
well as a number of .scss files; the contents appear very similar
between the source files and what I already have
There are also some stray files in the /node_modules/bootstrap/ folder (LICENSE, package.json and README.md) that are also in the 4.5.0 source files.
All of this makes me feel that this is the place I need to replace the 4.0.0 files with the 4.5.0 files. However there are several files in the 4.5.0 source files not present in /node_modules/bootstrap/:
_config.yml
a folder "build" with various .js files
CNAME
CODE_OF_CONDUCT.md
composer.json
Gemfile
Gemfile.lock
package-lock.json
package.js
SECURITY.md
From my limited understanding, I think the 4.5.0 source files have more than any given person may need, and that makes me think these files may not be essential for my purposes, if they are not already in the /node_modules/bootstrap/ folder on my existing site. I'm also in a dev environment, so I could just give it a go and see what happens.
My other concern is, I see in /dist/styles/main.css there is what appears to be all the 4.0.0 css, as well as additional css for plugins. Do I need to manually update the portion of this css file with the 4.5.0 css?
I'd avoid updating node_modules manually as the packages listed there were created by a package manager (more than likely, npm) and as such specific versions were installed with dependencies. Editing files in there can break your app!
If you can, look for a package.json file in the parent folder of node_modules and update the version of bootstrap in there, then run npm install in the terminal.
Related
I want to remove the meteor installation from my meteor project directory while keeping my source code intact, so that I can archive the project without the installed packages. I also want the package configuration to be retained in the archive so that I can re-install the project without having to re-add and re-remove the packages again.
How do I do this?
Meteor already creates a .gitignore file for you. That file tells you everything that should be archived. So you can simple look at that file and only archive that (either by deleting everything else, or just writing a script that reads the .gitignore file and interprets it). Alternatively, of course, you could just add everything to git (in which case git will interpret the .gitignore file for you), and then create an archive from the git repo.
Of course, that .gitignore file only excludes .meteor/local, so as Kyll already said, you could just delete that folder.
I'm currently trying to migrate an old ASP.NET WebSite project to Visual Studio 2015. I'd like to use NPM/Gulp to automatically compile LESS files to CSS (this task was done by WebEssentials in VS 2013).
I added a package.json file to the project to load the required components. This creates a node_modules folder in the root of the WebSite project, and this is where my problem starts:
Since WebSite projects don't have a project file, all files (and sub-directories) found in the project root folder, are automatically part of the project. Due to the deeply nested directory structure inside node_modules, this leads to errors because of too long path names.
An easy workaround is to set the hidden attribute on the node_modules folder (but this has to be done manually by each developer).
Is there a way to tell NPM to put the node modules into another directory e.g. one level above the project (..\node_modules) where the solution file is?
Or is it possible to set the hidden attribute on a folder from a gulp-task (which runs when the project is loaded)?
Based on #Rik's answer, I was able to solve the problem:
Instead of adding the package.json and gulpfile.js into the WebSite project, I added them at the solution level (as solution items). This means, that the node_modules folder is now in the solution directory at the same level as the WebSite project(s).
The only other change was to modify the paths in gulpfile.js accordingly.
You might want to check out npm 3.0+. It installs the modules in a maximally flat structure. It should reduce the paths lengths in the module directory.
From the release notes
Flat, flat, flat!
Your dependencies will now be installed maximally flat. Insofar as is
possible, all of your dependencies, and their dependencies, and THEIR
dependencies will be installed in your project's node_modules folder
with no nesting. You'll only see modules nested underneath one another
when two (or more) modules have conflicting dependencies.
#3697 This will hopefully eliminate most cases where windows users ended up with paths that were too long for Explorer and other
standard tools to deal with.
#6912 (#4761 #4037) This also means that your installs will be deduped from the start.
#5827 This deduping even extends to git deps.
#6936 (#5698) Various commands are dedupe aware now.
This has some implications for the behavior of other commands:
npm uninstall removes any dependencies of the module that you specified that aren't required by any other module. Previously, it
would only remove those that happened to be installed under it,
resulting in left over cruft if you'd ever deduped.
npm ls now shows you your dependency tree organized around what requires what, rather than where those modules are on disk.
#6937 npm dedupe now flattens the tree in addition to deduping.
https://github.com/npm/npm/releases/tag/v3.0.0
For upgrading the windows installation check out this package npm-windows-upgrade
I have installed DSpace on my PC. I am using Mirage as a default theme and now I want to customize it for my DSpace. I want to change CSS files (redesign it), but I don't know the steps to properly set my customizations. I can edit my CSS files in [dspace]/webapps/themes/Mirage/lib/css/ folder, but after rebuilding DSpace they will be removed. What is the correct way doing customizations over already installed theme? Should I edit CSS files and add them to [dspace-source]/dspace/modules/src/main/ folder and then rebuild my webapps? I have read official documentation about that, but I couldn't find proper answer to my question.
Create a folder for your theme in [dspace-src]/dspace/modules/xmlui/src/main/webapps/theme/[yourTheme]
Copy the CSS (or js or xsl) files you wish to modify into that directory - you can find a copy of the source files in [dspace-install] as you have referenced, or you can find them on the project github page
Edit your changes
Run the maven build in [dspace-src]/dspace: "dspace package" - this command will pull the source files for the theme and overlay your customizations. The results are built into the "target" folder.
cd into [dspace-src]/dspace/target/dspace-installer
Run "ant update" - this command will take the built files and install them into [dspace-install]
Restart tomcat
The following page has some resources that might be useful.
https://wiki.duraspace.org/display/DSDOC5x/XMLUI+Configuration+and+Customization
I have a dist folder inside semantic-ui zip file that I downloaded (version 1.8.1 to be precise)
Is this folder the only thing i need to deploy my Web Application as far as semantic-ui related files are concerned?
Would including semantic.js and semantic.css be enough for my web application?
I am asking this question as I want to eliminate the need of installing npm and gulp on my target machines and would just like to copy over the css and js files that are needed by the application.
Including semantic.min.js, jquery, and semantic.min.css will should be enough for the start since the semantic.min.js contains all the modules you'd need. You will find these files in 'dist' folder.
I decided to use the Sass version of Foundation4 as the CSS one is virtually impossible to edit efficiently now.
I followed the instructions here: http://foundation.zurb.com/docs/sass.html
These advised me to install the gem (no problem) then install compass then create a project, which I did in wwwroot.
All good so far. It then goes on to advise me to "download the files from Github (grab the scss/ and js/ directories) and put them into your project directory"
Now why in the name of a fish on a bicycle would the instructions advise me to do this when the previous step on the command line (compass create -r zurb-foundation --using foundation) creates a folder already in the root directory for my project - albeit named differently - that contain similar if not identical files? There's already a "javascripts" folder with "foundation" and "vendor" subfolders that contain largely the same files - although some are different sizes.
Am I missing something? The included "index.html" file reference the "javascripts" folder so why am I meant to be including "js" from the github? This is very confusing when you're new to the technology!
After following the installation instructions I now have "foundation.scss" and "app.scss" files which seem to be largely the same apart from one (app.scss) has lots commented out. Which one am I meant to use?
It seems to me that the instructions are basically out of date. It appears that I don't need "js" from github but I do need "scss". The contents of this scss folder look like they need to go into the "sass" folder created when the project is made and the "foundation.scss" file can be deleted as "app.scss" is a copy of it.
I have no idea where the base "app.scss" file is hoping to "#import foundation" from as there is no "foundation" folder created on installation/creation of project. Maybe I'm missing something but it's all very confusing. Could someone please clarify what I need to start with and what I can delete/ignore?
When you install the gem, all the proper Foundation files are installed for you in the gem cache. Compass will pull all the F4 SCSS files into your project via the #import directive from foundation.scss.
The project docs in the Github repo show the latest Compass instructions for building your F4 project.
https://github.com/zurb/foundation/blob/master/docs/sass.html.erb
It sounds like you are mixing the Standalone instructions into the Compass ones.
If you have run this:
[sudo] gem install compass
cd path/to/where-you-want-your-project
run compass create <project-name> -r zurb-foundation --using foundation
You don't need Github or the Standalone instructions.
The steps below outline the manual steps of building an F4 project. I think you're stuck on STEP 4, so focus on that part.
STEP 1:
Download for easy access these two archives:
Foundation Vanilla:
http://foundation.zurb.com/files/foundation-4.1.6.zip
Foundation Master:
https://github.com/zurb/foundation/archive/master.zip
CD into your www root directory:
STEP 2:
Create this file:
/config.rb
require 'zurb-foundation'
http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "img"
javascripts_dir = "js"
output_style = :expanded
relative_assets = true
line_comments = true
Switch output_style = :compact or :compressed and line_comments = false for Production (when going live).
STEP 3:
Copy/Move index.html from Foundation Vanilla into your root www directory.
Edit line 11 and change foundation.css to app.css in the style tag.
STEP 4:
Create this directory and file:
/scss/
Create app.scss - This is your site/app stylesheet and we'll import Normalize and F4 in it.
Copy this into it:
// Global Foundation Settings
// #import "settings";
// Comment out this import if you don't want to use normalize
#import "normalize";
// Comment out this import if you are customizing you imports below
#import "foundation";
// Your own SCSS here...
If you want to override some F4 SaSS variables you will need the _settings.scss file. For now I would skip this step and leave it commented out until you are more familiar with F4.
STEP 5:
Create this directory (files automatically written here):
/css/
app.css - will be written here from /scss/app.scss by Compass. Normalize and all the F4 CSS will be inside it, plus any of your own CSS you've added.
This happens automatically, you don't need to do anything except have the required gems installed and your Compass config file from STEP 2.
STEP 6:
Create this directory and copy/move these files into it:
/js/
Copy/Move /js/foundation.min.js from the Foundation Vanilla download here.
If you need your own app.js create/place it here and link to it last in your footer.
/js/vendor/
Copy/Move /js/vendor/custom.modernizr.js from the Foundation Vanilla download into here.
Copy/Move /js/vendor/zepto.js and /js/vendor/jquery.js from the Foundation Vanilla download here.
Later, when you feel more comfortable, you can cherry pick individual Foundation JS files from Foundation Master and concatenate them into a smaller lib here as foundation.min.js.
That should do it.
Check out this file in my www repo, as it shows a working F4 setup:
https://github.com/jhauraw/jhaurawachsman.com/blob/master/_layouts/default.html
You can also poke around there for how to integrate Grunt.js for automated build of the SCSS and JS with concatenation and minification:
https://github.com/jhauraw/jhaurawachsman.com/blob/master/Gruntfile.js
Without being as adept as #jhauraw, I did notice something else.
I installed FOundation through the Compass app. Being a novice with Compass, I too was looking for the "foundation" folder that would contain all the various Foundation SCSS files. And when I looked at the _settings.scss file that was present, it appeared that everything was commented out. What I know understand (still as a novice towards Compass) is that the "foundation" file lives within a resource library within Compass. When needed, these files are imported when generating the CSS file. The _settings.scss file with all the commented out fields is an override file. So if you remove the comments for a particular variable or mixin, it will override the originals hidden in the Compass library. The compiled CSS seems to contain everything that's needed.