![]() To further style the app with HTML & CSS, you can edit the app/assets/stylesheets/application.css file in your Text Editor if you already know some CSS. If you want to move on, open the next guide in the list below. We’ll be updating more styling in future guides. Make sure you saved your files and refresh the Browser to see what was changed. This will add a footer saying “Rails Girls” along with the current year, and include the Bootstrap JavaScript needed for the navigation bar functionality. The idea app " href= "/ideas" >Ideas īefore the tag at the end of the file, add these lines of code. This will add a navigation bar to the app. ![]() In the same file, under the tag add these lines of code. Let’s add a navigation bar and footer to the layout to give it more the appearance of an app and allow us to find our way around. It’s easy to get lost on a website that has very little of a User Interface (UI). Your app is now using the Bootstrap system for styling using its CSS. Already the app looks a bit better and has the app content front and center. With these lines of code in the same file and save the file. ![]() That way you don’t have to install it locally before you can use it. This loads Bootstrap from a server on the Internet. Open the app/views/layouts/ file in your Text Editor and above the following line: It makes sure all pages have the same basic layout and CSS loaded. The layout file is the file that all your Rails views are wrapped in. To use it, we need to add it to our app by adding some lines of code the HTML. Resource: W3Schools What is Bootstrap Add Bootstrap to help style your appīootstrap consists of a couple different parts, the first we’ll use is the CSS. Briefly show some Bootstrap examples and show what you can accomplish with using a framework like Bootstrap.How does Bootstrap work and how does it style the app pages?.Talk about the relationship between HTML, CSS and Rails. If you’re interested in learning more about CSS, we suggest taking a look at this getting started with CSS tutorial after this workshop. There are many CSS classes available you can apply to your HTML. It provides the framework for CSS to style and apply design to your app. In this guide you won’t be writing CSS yourself to style your app, but rely on the Bootstrap project to do the heavy lifting for you. Resources: Guide to the guide Design What is CSS?ĬSS (Cascading Style Sheets) allows you to specify how the HTML should look like, what text and background color elements should have, what fonts to use, what size they are, where they are on the page, etc. Models and controllers are responsible for generating the HTML views.What is Model View Controller and how does this relate to it?.What part of Rails views are HTML and what is Embedded Ruby (ERB)?.Explain a little bit more what HTML is and give some examples (like this website’s source code).Talk about the relationship between HTML and Rails. It is a flavor of Ruby that makes the HTML show things dynamically, like all the different ideas you added to your app’s database. ![]() This looks a lot like HTML, but it’s not. There are also special kinds of parts in the file indicated with the code. You can add all kinds of properties to it, like style, id and class. The parts of the file that start with a tag opens an HTML tag, and the one with the forward slash symbol in it, closes it. Open up the app/views/ideas/index.html file and you should see something like the example below. The scaffolding that was generated in the previous guide is also made up of HTML, with some Ruby added to it to make it more dynamic. It tells the browser what is a heading, a list, a table, a link, etc. HTML (HyperText Markup Language) is used to structure your app. Let’s improve that using HTML and CSS! What is HTML? The app doesn’t look very nice right now: it’s the standard plain black text on a white background. Make sure you follow the numbered guides in order before continuing. This guide is a part of the Rails Girls workshop main guides. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |