I'm using rails to assist me in creating a static website. I have one controller pages. It has 4 action-view pairs: home, team, work, and contact.
Rails has created pages.css.scss for me, but there are elements in each of these pages that have the same name (i.e. class="container" or class="wrapper"), but have varying properties throughout the different pages.
What is the best practice for creating SASS stylesheets that are only applied to specific pages.
One method that I've read of is to use content_for, in which I create stylesheets for each of these pages, and use content_for to include them in the header of each individual page. Are there any negatives associated with this? The only thing I can think of is the fact that I have to tell rails to precompile every one of the page-specific .scss files, which is tedious.
You need content_for and need to restrict loading all tree directory to only those files which are common all over your app.
you can just put the <style></style> directly on the view file
Related
I made a website with Twitter bootstrap and the design is finished in terms of all the HTML and CSS.
Now I need to add functions like making an account and blogging. I decided to use Ruby on Rails to do this, but I have no idea where to put the files and how to connect them.
So far I have figured out that I want to put them in the "views" folder and have it say, for example, "index.html.erb" but I don't know if that goes into another folder in "views" or how any of that works.
I also don't know where to put all the CSS and JavaScript incorporated with bootstrap.
Following Rails conventions, views should go in a dir that mirrors the model name (plural), which also aligns with the controller name. i.e. model = user, views dir = users, controller = users_controller.rb. You should read through at least the first few Rails guides; esp this layout and rendering one:
RE the bootstrap portion of this question, just use the bootstrap-sass gem and follow the instructions for including it in your application.scss and application.js.
I am learning Angular and I need advice on best practice, and a general direction for digging deeper in the subject:
I am trying to create a web app with Angular which is composed of a number of standalone widgets, and I decided to implemented them each as independent custom directives.
I would like to make these custom directives as reusable, movable, replaceable and cohesive as possible, and put all of their related html/css/js files in their own dedicated folders, with a folder structure of something like this:
What is the best practice for loading a separate CSS file for the template partial of a custom directive? (For example, should I load the CSS from the partial.html which will eventually appear in the html body? Should I look into merging my css files with Grunt upon build?)
You should build all of your CSS into a single file you. Without merging you require an additional request to the server and processing of the CSS which adds more time before the page can be rendered.
For additional loading performance you can combine all of your HTML fragments into a single file as well that you load up front.
<script type="text/ng-template" id="temp2.html">
<div class="view">
</div>
</script>
I have a Ruby on Rails Web application but the general 'look-and-feel' is a bit ugly.
I did some research and I found Bootstrap.
With research many question came to my mind:
As I said before, I have a scaffolded RoR app. With the scaffold it generated the stylesheets for my application. It generated one application.css and files .css.scss for each controller. The application.css is used for the application layout, right? So for each view I want to style I need to create some view.css file in that directory? Because that directory only has .css.scss files.
So I'll have a general layout. My objective is: in every page of the site it appears the same "top-navigation-bar" and the same footer. So, the only 'content' that differs from page to page is the 'body' of the page. How can I do that? How can I just create in the applicantion layout the 'header' and the 'footer' and leave a "hole" for the body's of the next pages? How is that integration made?
That question is about the structure of the site.
Now, I need to know how can I incorporate the Bootstrap on my application. Should I make everything from scratch or is there a smooth way to do that?
My objective is to have the application layout struture and then use Bootstrap on it. How and where can I do that? And how and where can I apply some Bootstrap style to the other pages aswell?
I Know this is basic stuff, but I'm a bit lost with it and my site is really ugly.
To use Bootstrap in Rails I recommend gem bootstrap-sass (https://github.com/twbs/bootstrap-sass), if you use SASS (default CSS preprocessor in rails).
Just add it to gemfile:
group :assets do
#...
gem 'bootstrap-sass', '3.1.0'
end
And include in application.css.scss manifest:
*= require bootstrap
At this point you may write pages and CSS stylesheets using bootstrap classes.
Usual scenario is to write your CSS in separate files and require them in manifest for concatenation (or include as separate stylesheet_link_tag)
For creating some panels, navbars etc that are common for site you may use layouts.
More about layouts in Rails - http://guides.rubyonrails.org/layouts_and_rendering.html#structuring-layouts
For example, layouts/application.html.haml may be structured as follows:
%html
%head
%title Rails app
= stylesheet_link_tag "application", charset: "UTF-8", media: "all"
...
%body
%nav.navbar
...
%div.container-fluid
= yield
%div.footer
...
In this case layouts declares HTML document, head with meta, links CSS (with Bootstrap) to pages and creates navbar, then renders page (with yield). Page contains only page-specific content and is selected by convention from controller name and method, e.g. controller HelloWorldController with method index uses view views/hello_world/index.html.haml:
%p
Hello world!
To scaffold pages for Bootstrap use gem bootstrap-generators (https://github.com/decioferreira/bootstrap-generators).
UPD. Some common information and example
The result of combining layouts and partials with page specific content is plain old HTML document. This document can have only one <body\> and only this <body> can have representable content. Layouts in Rails give you ability to split HTML generation to parts - some things may be declared in layout, other - in pages. Using layouts you can wrap pages as you wish. But you should follow HTML structure and place visible content in <body>, including navbars.
Real world example is RubyGems.org, see:
HTML page: http://rubygems.org/
and it's source: layout - https://github.com/rubygems/rubygems.org/blob/master/app/views/layouts/application.html.erb, page - https://github.com/rubygems/rubygems.org/blob/master/app/views/home/index.html.erb
Note that index.html.erb have no root element and uses <div>, <h> etc, because it generates just part of resulting HTML document.
application.html.erb declares all sections of document (<html>, <body> and <header>, <main>, <footer> etc) and uses = yield where the current template (in our case index.html.erb) or it's part (where = yield :part_name) should be rendered.
More information about yield and content_for you can find here: http://guides.rubyonrails.org/layouts_and_rendering.html#understanding-yield
I finished my Ruby on Rails project and I get extra credit for making it "look good." I made an HTML template with some images and css styling on my local machine (not the RoR server). I've tested it out in plain HTML and it looks good.
I can't figure out how to incorporate it into my RoR project though. I thought i'd be able to create a directory in my views, called "images" to hold the images for my template.
Before transferring all of the code for my RoR to the tags for my template, I wanted to make sure the images were in the right location. I added to my index.html.erb file, but it won't display. I tried moving that images directory to a few other directories and tried again, same thing!
I thought it would be easy to incorporate a template haha but now I'm thinking not?
Is there a way to simply do this like an ordinary HTML website?
There are two main options for this...
You can use the asset pipeline and serve up assets from a location like app/assets... So, app/assets/images.
You can put them in public/images and just serve them up that way as well.
If you feel like learning a bit more, I'd dig into the asset pipeline. If you're just ready to be done, public/images for a small project should work just fine. :)
I want to use custom css/js. I have moved these to the server. But the drupal page starts with a section. how do I add the custom css/js to my drupal site page. I have admin and just need to know what to do to get this included on the page. Please send exact steps as I am totally new to drupal. Thanks
"Custom CSS and JavaScript files" module allows to specify two folders, one for CSS and one for JS where the stylesheets and javascripts files are located respectively.
The module creates two sub-folders under your files folder:
files/customcssjs/css
files/customcssjs/js
Indeed, it's depend on your task, what css and js files should do, and adding these in custom module (drupal_add_js, drupal_add_css) or custom theme (info file, preprocess in template.php or directly in page-XXX.tpl.php and so on).