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
Related
I'm trying to make a GitHub page. At the beginning, I use GitHub generator. I included Gemfile and _config.yml to generate SEO tag and it works as expected. The generated site will include the following section.
<!-- Begin Jekyll SEO tag v2.6.1 -->
<meta ...
<!-- End Jekyll SEO tag -->
Now, I've just updated my site to the new one using HTML template from HTML5 UP. It's up and run normally, however, I cannot find a way to make Jekyll generate SEO tag for my index.html file. I've tried to add triple dashes (front matter) to my index.html on the first line.
---
---
<!DOCTYPE HTML>
<!-- Other code below -->
The thing is, it partially break the site (page isn't rendered properly). Therefore, I've to copy/paste the generated tag and add them manually to my code. Is there a way to make Jekyll properly create SEO tags for my site? Or did my misunderstand something very basic here?
To be clear, I've very limited knowledge in web development, that's why I use a template in the first place. Here is my page in case it helps clarify the question https://hunghvu.github.io/ and here is its GitHub repository incase you want to know the file structure.
Update
(09/30)
I attempted to turn the index.html file into index.md while still keeping all the code (plus the tripled dashes). In a sense, it works. The page is generated, but still, it's not rendered properly as when I use html format. I'm aware that the way to actually build site using Jekyll is much different, but that does not answer my question.
In case it is necessary to show what I mean by saying "not properly rendered", I will update this question later on.
(09/31)
The picture below is how my page looks like when I add front matter and {% seo %}. Notice that when I first go to the page, the side bar is already in SOME OTHER WORK, or last section. It should be on the WELCOME. The WELCOME section is not rendered and sidebar functionality is broken.
Problem
GitHub pages gem is not included in your project, therefore GitHub is not running Jekyll build. Furthermore, you have nothing specified in your front matter. You also have no layout.
Solution
Include gem "github-pages", "~> VERSION", group: :jekyll_plugins in your Gemfile.
Notes
Consider using front matter and creating a layout file _layouts/default.html and moving everything except what’s in body (including SEO)to the layout file. The index.html should extend the layout by specifying layout property in front matter.
References
Front Matter: https://jekyllrb.com/docs/front-matter/
GitHub (step 9): https://docs.github.com/en/free-pro-team#latest/github/working-with-github-pages/creating-a-github-pages-site-with-jekyll
For most of my project's documentation I prefer a standard sphinx layout. However for the landing page I would prefer to use custom HTML/CSS/JS without any of the layout, TOC, or sidebars of the normal sphinx site. Is there a way to include a raw HTML standalone page in a sphinx-generated website in a way that completely disregards the normal layout of the rest of the site?
As a counter example I know that I can include raw HTML bits into a page using the following (see also this question)
.. raw:: html
:file: myfile-html
However this just embeds a file within the normal layout. I would like to have a completely standalone HTML page.
I just ran into this problem myself, and the way I solved it was to simply include the html file in my source/_static folder, then refer to it with a relative link.
So if source/_static/my_standalone.htm is the path where I have my non-generated HTML file, and the .rst file where I want to type my link is at source/otherfolder/index.rst, I write it like this in my rst:
Link to my non-Sphinx HTML file
===============================
To get to my standalone, non-generated HTML file,
just `click here <../_static/my_standalone.html>`_ now!
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 just started rails today and it's very interesting. However, I've come across a problem. Whatever goes into application.html.erb should be seen in other webpages; such as the links, navbar. The problem is what I've put into application.htlm.erb is not showing in the other pages. If I put 2 links into application it won't show on the other webpages, the only way I could see the links is because I manually inserted the code into the individual webpage. I don't know if it's something wrong with application.html.erb itself, but I have 2 files in the layouts folder: application.html, and application.html.erb.
I'm also watching a video that goes along with my project, which means that I pretty much copied whatever the teacher was saying.
I really want to move on, but this problem is putting me back. If anyone can help please respond!
There should only be application.html.erb in the layouts folder. The ERB extension is a rails filename extension that allows you to Embed Ruby code and PARTIALS.
application.html.erb is your master layout file, it renders partials and assembles the HTML structure in a modular way. It gets more apparent when your application grows!
Basically you are not supposed to edit application.html.erb directly unless you want to make a change to the existing HTML structure, which is basically
<html>
<head>
</head>
<body>
<%= yield %>
</body>
</html>
If I were you, I would read the Rails Docs about layouts. It explains how pages get rendered and shows you where to place your logic (in this case your links).
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