I seem to be quite confused with how this works. I've installed Semantic-UI with one site and it has it's own "semantic" folder, but when I try to install Semantic again using Gulp, it says that it is already installed. True, it is installed within that specific project.
Should I have given semantic it's own folder within my "Sites" folder, and then referenced specific themes within each project?
Any information on how to set up semantic UI locally for multiple websites is appreciated.
Related
Webdev beginner here. I have been working on a website for a couple of weeks, and I want to start using the Bulma CSS framework and sass now.
I cloned Bulma https://github.com/jgthms/bulma into my project folder, and I see that Bulma has it's own css and sass folders.
Am I supposed to:
-put all my css, php, html, js into the Bulma folder and have it essentially become my new project folder?
-or should I just access Bulma's files through the Bulma folder, in my project folder.
I could not find any straight forward information online about how Bulma files/folders integrate into existing projects.
Here is my project folder currently:
I don't really know the best way to organize web projects, especially now adding frameworks. I can see the potential of things getting hairy, and I want to make sure I won't be slowly building a sloppy project pile that's gonna screw me over in the future, or moving folders and messing up relative addressing etc.
Thank you for your time,
Best
-Joe
Between the two choices you mention, the second is the appropriate one.
Best Practice to Organize Javascript Library & CSS Folder Structure
Web project's folders/directories structure - Best practices
There are many ways people structure their project folders. Google something like "website folder structure" and read resources like the above links to get a general idea. The two common ones are grouping files by type and by module/library. The second way is what I would recommend and is what your second choice does.
If you just need default Bulma, all you need to do is load bulma.min.css in your web pages from wherever you've chosen to put it. So out of the entire package, that file is really the only necessary one to keep if you like (and perhaps the LICENSE file since it requests that you do).
If you are customising Bulma, you will need to create your own sass file that should live outside the bulma folder, and then follow the customize Bulma documentation. It would be very similar to an answer I wrote for a Bootstrap question.
I am trying to get the css files for Semantic-UI buttons (Amazon Theme). I tried to follow their instructions on how to build themes which is way beyond my skill level and got me lost. I will really appreciate any sort of help to get these buttons (Amazon Theme) css file.
1- Is there a simple way ?
2- Are they ready available with the desired theme?
http://semantic-ui.com/elements/button.html
2-- Precompiled non-default (packaged) themed components are neither available on Semantic UI's official site nor in the dist folder on their github repo.
However you can cheat your way to the precompiled Amazon buttons, because they are available as resources on the Theming Demo site.
Open this site, which looks like github, except that it has a paint bucket icon next to the notification icon in the top right. Click this paint bucket icon, and a theming sidebar will appear on the left. You'll have to select your desired theme for the resources to load, but then you can grab them via the browser's Developer Tools Sources or Network tab.
1-- If you'd like to give another chance to the build process, here's how:
Prerequisites: Install NodeJs with Npm and Gulp (run npm i -g gulp in command line).
Download (and unpack) the Semantic UI sources
Navigate to the folder you extracted or downloaded the Semantic-UI sources, and do the followings in command line:
Run npm install.
When asked, choose Automatic (for installation)
and then choose Yes (for removing setup files)
and then No (for building Semantic now)
Edit the ./src/theme.config file, and change #button: 'default'; to #button: 'amazon';
Run gulp build
After the build is done, you should find the compiled css files in the ./dist folder, and your custom Amazon button.css in the ./dist/components folder.
I'm using the accordion, tooltips and transition components of UI Bootstrap.
I can create a custom build with the online tool on the UI Bootstrap website, which will create a minified and non-minified JS file containing only the components I selected, without overhead.
However, I don't want to use the online tool to compile my custom version of UI Bootstrap, instead I want to compile my own version locally, preferably using the tools I already use; Bower, Grunt and NPM.
So my question: How can I create my own version of UI Bootstrap locally?
bower install angular-ui-bootstrap, and then calling Grunt build in bower_components/angular-ui-bootstrap creates a UI Bootstrap build that includes all modules, there's probably a way to do the same with only a subset of the modules, but I could not figure this out.
It can be done by using the following command
grunt build:moduleName1:moduleName2:moduleName3....:moduleNameN
For example if you require the build to contain only tabs and buttons module , then the grunt command will be like
grunt build:tabs:buttons
The generated files will be present in dist folder
For the list of module names , check all folder names in src folder
The documentation for this is sparse , but if you check the Gruntfile.js , where they register the build task , they mention about how to build modules selectively
It is not as easy as I expected (and as it should be).
Take a look at the Gruntfile.js of the project. You will see that they do quite a lot. Converting HTML and CSS to JS, concating all the scripts in such way they are loadable by others. Moreover the file is quite difficult for orientation; it even includes custom tasks.
To mimic its behaviour I suggest this: Download it via Bower as you normally do. Copy its node dependecies to your package.json dependencies. Then copy the Gruntfile.js, change he routes, and try deleting some parts of the code until you reach a point when you cannot remove more lines without breaking it. It is not a nice way, it should be however successful.
If one had a lot of time, the build script is a good candidate for a deep refactoring. Moving custom tasks to standalone files (or projects), documenting the flow, and maybe implementing standard tasks for some steps (e.g. CSS minification).
Tl;dr : Is there an equivalent in meteor to .gitignore?
Yes, I am aware of using a leading '.' in the directory name to get meteor to exclude it. But using leading dot is not a solution in this case. Read below to understand.
Longer:
I would like to use Bower.io to install various browser plugins.
Ideally, I run bower in the client subdirectory. Bower does its thing creating the bower_components directory and pulls down the plugin (pick a random jquery plugin for example).
Many plugins include example html, demo css files, etc. to show how to use the plugin.
Unfortunately, Meteor wants to include all that stuff in the application. Which unsurprisingly causes problems.
My current solution is to have bower.io run in the project's parent directory. This is not ideal as I have to copy js/css files over from the bower directory to the meteor client directory. (yes, I could use soft links but then the files would be missing when pushing to production).
With only a few client plugins / css packages this is becoming quite annoying.
NOTE: Renaming files/directories retrieved by bower.io to have a leading '.' or using bower in a dotted subdirectory helps only marginally. I would then have to manually include the files needed.
Is this possibly a duplicate of How to exclude directories/files from Meteor's bundler?
If you want to define the way you name your files, you could try including a certain regex to match in the meteor bundler. Otherwise, maybe it's something that needs to be implemented on a framework level.
I also found this tutorial by Tri on integrating meteor and bower: http://tridnguyen.com/articles/meteor-and-bower/. Tri defines a new meteor package to specify the exact files required on the client.
The best solution, however, is move away from Bower as Meteor offers its own package manager at a framework level. Including the front end files that you need using Meteor packages would be the more productive solution in the long run, especially as the framework changes.
Background: Trying to set up my dev. environment in new job. Have subversion installed ok in Flash Builder 4, and checked out the project folders I will be working on. Work to date was developed in FB3, I'm going to be using FB4.
The folders/files that get imported to the project also include .flexProperties, .actionScriptProperties, .project, html-template etc (basically everything).
I would have thought that just the src, libs, lib-rsl etc should be part of the svn?
UPDATE:
Here is a good link to setup details for sharing svn flex projects using 2 folders, one of which has the checkout code, the other of which has folders linked to the first (but without the project/setup files)
It depends on the the development group. If everyone is provided the exact same set of tools in the exact same environments it can be ok to include the IDE project files. But if there is any chance that anyone is going to use a different environment (this includes a rolling upgrade of tools) then it is a bad idea. I recommend against putting these files in source control.