I am attempting a test dev setup of a foundation/underscores wordpress theme.
I have a wordpress install, and to that I added an underscores theme. I then made a folder in this called foundation and installed foundation ( sass using bower ) into that.
I will get it all working and hooked up using gulp, but I notice that Foundation placed a git file in the foundation folder. I have used git in the past but I'm unsure of what options I have here. Ideally I want to remove the git repo. Then at that point I would be doing a git init from the main theme folder ( the foundation sub folder I intend to only use for the sass source files). My quesion is ... Is there any issue with doing it this way. I essentially want to get rid of the git repo that came down with the foundation install and setup my own git repo manually; ( which will also cover the underscores and my own custom files in the parent directory)
My directory structure looks like this:
wp-content
themes
my_theme ( underscores) ( new git repo here )
foundation folder ( git repo here which I want to remove )
I also want to remove the package.json file and gruntfile because I hope to use gulp instead ( again from the main theme folder not the foundation directory )
Unless you're planning on hacking on the foundation code I wouldn't recommend this. There will be issues if you decide to upgrade to a newer version of foundation using bower. If you are working on this with another developer and choose to pursue this route I'd recommend removing the dependency from your bower.json file.
Related
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.
I'm trying out semantic-ui in a meteor/npm environment and am left a little dissatisfied with the install process. I love the interactivity, but it's made a mess of my project. I now have semantic folders inside my node_modules directory and outside, a semantic.json config file in the root, and my node_modules directory is now just completely full of ugly gulp folders (node_modules was empty before the install). Is this how it is supposed to go? If so, I'm out, I want to keep it clean, simple, and contained.
I also faced this issue. I ended up doing the following:
npm uninstall gulp semantic-ui
And add semantic like this:
create an empty custom.semantic.json file within your client library folder. suggested location of /client/lib/semantic-ui/custom.semantic.json depending on your applications structure
Run in termnial meteor add semantic:ui flemay:less-autoprefixer jquery
That way you have 1 folder of semantic inside your lib.
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 don't understand how to compile foundation with my own SASS additions.
I have my own Github repo with ZURB foundation 5, I've extended it (with SASS and JS) and changed some things.
Let's say my repo is here: github.com/some_name/my_foundation_version.
So, I download it from git
git clone git://github.com/some_name/my_foundation_versionbut then what?
I don't understand how to use bower or grunt in this case. How do I use my own git repo?
UPDATE:
Going into: ./foundation/scss and run sass foundation.scss:output.css doesn't work either
Method One - Self Compile using koala etc
If you just want to use the scss to compile yourself you need 2 repo's not one
First you want the Foundation Master Repo Then Secondly The Bower_components
Foundation Master
Bower-Foundation
Unpack the foundation master then in it create a directory called foundation and unpack the bower components into there.
I personally then use koala to compile the scss which is a simple drag and drop programme I click on the app.scss set the output path to app.css and away I go.
If you want a version to play here is a repo i'm playing with for a framework also has the icons set and a few other bits in there but you can simply download unzip and it should then compile
https://github.com/Relution-Design/legion-assets
I also use netbeans which is more or less the same process, make sure correct libs are installed in netbeans set output path and compile on save.
Method 2
Firstly Make sure that you have all the dependencies!! 3 months I spent and was missing one . . . . HEAD IN HANDS :( then follow the instructions
FOUNDATION SCSS
I am new to roots theme and want to change my custom wordpress theme to roots theme.
What are the steps that i should follow so that finally m able to get my theme in roots.
I would be glad if there is such tutorials that help me getting started to roots and converting my theme to roots.
Any link please help
thanks,
suku
Roots has some dependencies, so you would need to use Grunt.
My answer is based on a Windows local environment.
Make sure you set your wp-config file for Roots for development or you’ll notice nothing changes in your css when you update: define('WP_ENV', 'development');.
Make a new folder in your WordPress theme directory.
Grab the latest ZIP from the Github for Roots and take the guts to set up in your theme.
Extract the zip. Contents should all be saved in the folder of your new theme. As you can see if you look around, some of the assets are missing because you really do need to use Grunt for this to work.
Download and install Node.js
Install grunt (go to the Node.js command prompt and type in npm install -g grunt-cli to install Grunt globally on your system so you can access from a project folder anywhere. You can use the command where grunt to make sure the path is under user > AppData > Roaming > npm.
Install Git Bash
Right click in your new roots theme folder and click Git Bash Here and then type in npm install.
Install Roots dependencies by running grunt dev. Run grunt watch to watch the folder for code changes. Edit your code to style accordingly and ass needed (assets/less is where the style mods should live (global, and in layouts folder) and lib/extras.php for function overrides).
Run grunt built command to create minified asses for a live environment (and then change your wp-config to define('WP_ENV', 'production'); so it uses those assets.
After that you can port the theme out (minus the node_modules folder since it's added bloat you don't need) and install.