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.
Related
I am looking for the assets for MIT-scratch. Icons inside its interface. I am creating a learn to code curriculum using scratch, and having the assets will be great for me to include into the worksheets.
I have tried googling the assets and screenshotting the interface, but the images are not clear and doing it this way is not efficient.
Scratch is open source so you can access the assets via Github.
I found several in the GUI->src->components folder linked here:
https://github.com/LLK/scratch-gui/tree/develop/src/components
It appears that all icons in interface are svg files.
There are many curriculum's already available for Scratch free on web so you might want to look at others before putting a lot of time into your own.
I am finding old CSS code on my browser instead it has the new code in server files. I can see the minified CSS code on browser when application gets loaded up.
My team is using Liferay framework which seems to minify the CSS files. I am noob in liferay.
I found portal-ext.properties under liferay-portal-6.1.10-ee-ga1/tomcat-7.0.25/webapps/ROOT/WEB-INF/classes/ but didn't found any parameter for minifying the CSS files?
You shouldn't just update any CSS code you find deployed on the server. Instead, update your theme, build it (it builds to a web application) and deploy it to the server. This will take care of minification and updating caches. Just changing random files in the realm of the webserver will not.
For this you'll have to find the source files for your theme (or a whole plugins-sdk, which might contain that theme). Look at your organization's source control system, which is where I'd expect it.
Explaining how to update and build themes goes well beyond the scope of a single answer here, if these are really your first steps it might be worth getting some help from someone who has some experience with Liferay.
I would like to ask how to use .less files in a Rails application if they are placed under assets but in a separate folder (let's call the folder "myless") from stylesheets. Another way to term this is that the myless folder would be side by side the folders, "images", "javascript" and "stylesheets" which are under the assets folder.
How do I import them to application.css or to a .CSS file? What lines of code would I use?
Do I have to add a method in environment.rb?
What gems do I have to use?
Any insight would be superb. Note that I am fairly new to Rails and are studying different tutorials on it. The different implementations in different versions of Rails is confusing me and there's not really a clear tutorial I can find online. I am currently trying to implement a bootstrap template, this is why I ask this question. I got the JavaScript and the CSS down but realized that the template uses .less files. Help?
You can enable your app to support LESS by including the appropriate gem(s):
gem 'therubyracer'
gem 'less-rails'
Then run bundle install. Assuming you have the appropriate stylesheets included in your stylesheets manifest, you should be good to go!
There's also the rails-less-bootstrap gem if you want a simpler way of including Bootstrap in your project.
Note: it's a good idea to keep your stylesheets together. Instead of having the myless directory be on the same level as images, javascripts, and stylesheets, you should consider moving it inside of your stylesheets directory.
Hope it helps!
As I continue to make progress on my app my stylesheets folder has quickly become overrun. I've read the rails guide on the asset pipeline, and scoured the internet for a reputable source and am still at a loss on the "rails way" to keep everything tidy.
Before I go and try and develop a system by myself I was hoping to get some suggestions from you guys.
Is there a well known "best practice" when it comes to asset organization? If not, what has worked well for you?
As of now my setup is this:
app/assets/stylesheets >
application.css, application-RESPONSIVE.css
any code specific to the body, containers, navbar, footer
controller.scss, controller-RESPONSIVE
*any code specific to that controller
lib/assets/stylesheets >
reset.css
in application.css i use
*= require reset
*= require_tree .
*= require_self
To get all the styles however I've also been wondering if its better to set self before tree as a means of overriding the main styles if need be?
Is there a well known "best practice" when it comes to asset organization?
Organization of assets:
In Rails, pipeline assets can be placed inside an application in one of three locations: app/assets, lib/assets or vendor/assets.
1) app/assets is for assets that are owned by the application, such as custom images, JavaScript files or stylesheets.
2) lib/assets is for your own libraries' code that doesn't really fit into the scope of the application or those libraries which are shared across applications.
3) vendor/assets is for assets that are owned by outside entities, such as code for JavaScript plugins and CSS frameworks.
Is it better to set self before tree as a means of overriding the main styles if need be?
application.css is what is called a manifest file. Now, it wouldn't particularly make any difference by switching self with tree, but it would change it's position in the loading sequence. Consider this...
Once you’ve placed your assets in their logical locations, you can use manifest files to tell Rails (via the Sprockets gem) how to combine them to form single files. These manifest files contain directives - instructions that tell Sprockets which files to require in order to build a single CSS or JavaScript file.
Additional info:
One other thing that Rails does, is generate stylesheets for you when you run the rails generate command in the terminal. On creation of a new controller, you'll see a stylesheet with the controller's name in your assets. It'll look something like app/assets/stylesheets/newcontroller.css.scss
Also, what steve klein said.
Hope this helps you out.
UPDATE:
I've tried looking for examples on github but all of the apps I have found have been too simple and havent shown any advanced organization for a large amount of files.
I encourage you to check out Open Source Rails website. I have looked at some projects there and they seem complex enough for you to be interested enough. Especially, look at the Discourse app. Discourse was co-founded by Jeff Atwood, co-founder of Stack Overflow. That I suppose speaks for itself ;)
I have a web application that is becoming rather large. I want to separate it into smaller more logical projects, but the smaller projects are still going to need to access some of the classes in the app_code of the main project. What are some good methods to accomplish this?
Add a class library project with the common classes and add a reference to this project to each of the new projects.
So you'll have the following Solution layout
/webapp1
/default.aspx
/....
/webapp2
/default.aspx
/....
/lib
/Utils.cs
If you are only looking for a way to organize your files, then you can create a folder for each sub-project. This way you'll be able to get to the content of app_code and maintain a level of separation with very little rework.
If you are looking for the best way to do this, then refactoring your code to have a common Class Library based on what is reusable in the app_code folder and multiple, separate projects that reference that library is the way to go.
You may run into problem refactoring the code this way, including not being able to reference profile or user information directly. You are now going from the Web Site to Web Application paradigm.
http://www.codersbarn.com/post/2008/06/ASPNET-Web-Site-versus-Web-Application-Project.aspx
Extract your common code from app_code into a class library which is referenced by each of your other projects.
I like the 3 Tier approach of creating a data access project, a separate business project, then use your existing site code as the presentation layer, all within the same solution file.
You do this, like posters before me said, by creating Class Library projects within your existing solution and moving your App_Code classes to the appropriate layer and then referencing the data access project in the business project, and the business project in the web project.
It will take a bit of time to move it all around and get the bits and pieces reconnected once you move so make sure you set aside plenty of time for testing and refactoring.
In CVS & Subversion, you can setup what I think are referred to as "aliases" (or maybe it's "modules"). Anyway, you can use them to checkout part(s) of your source control tree. For example, you could create an alias called "views" that checks out all your HTML, javascript, and css, but none of your php/java/.NET.
Here's an example of what I'm doing within my projects.
The basic idea is to have all common files separately from htdocs so they are not accessible by client directly and sharable.
Directory structure:
public_html
The only htdocs dir for all projects.
Stores only files which should be directly accessible by client, ie js, css, images, index script
core
Core classes/functions required by application and other scripts. Framework in other words.
application
Stores files used to generate separate pages requested by public_html/index script + classes common to all projects
config
Configuration for all projects, separated by project
templates
Template files separated from all other files
The public_html/index script is then used for all projects on all domains/subdomains and based on the requested URL loads proper pages...
A somewhat simple approach is to group the code in your app_code folder into it's own assembly. The only issue that you could possibly run into is if the code in your app_code folder is not decoupled from the elements on you pages (This is normally always a bad idea since it indicates poor cohesion in you classes).
Once you have your code in a separate assembly you can deploy it to any number of servers when you are upgrading you apps.