You can see that all the CSS files are loaded alphabetically here. This can be a serious problem where overriding CSS is concerned. We want our CSS file to be at the end. This will allow us to override the application level styles at some places in future.
Redesigning the Todo application
In this section, We will write all the CSS files to redesign without the use of any framework. This will help us to better understand the amount of CSS code we have to write at the end for styling simple links and other HTML elements.
We are going to redesign our existing Todo application to something that looks like the following screenshot:
The preceding screenshot displays the redesigned version of the home page. As you can see, the list of TODO activities are now displayed properly in the middle of the screen inside a table-like structure. Even the action links (Show, Edit, and Destroy) have been redesigned to look like 3D buttons. Let's look at the redesigned version:
The preceding screenshot displays the redesigned version of the New Todo
page. The form has been redesigned and a background color has been applied to it, as follows:
The preceding screenshot shows the redesigned version of the Edit TODO
screen, which is the same as the New Todo
screen. The only difference here is the auto fill feature that fills the fields as per the data available in the database. The input fields are more spacious with a bigger font size for properly displaying the text contained in them. Let's see the screenshot of the View Todo
page:
The preceding screenshot displays the redesigned version of the View Todo
page. We have kept this page simple and clear for better readability. In all the pages, we have centered the content of the website.
Oh! That's lots of designing! Don't worry. We will get through it easily.
It is generally considered as a good practice to organize the designing process before jumping into it. In our Todo application, we have three different views:
Home page to list out all Todos: This is at http://localhost:3000/todos
New Todo forms and Edit Todo forms: They both are the same view, which is reachable through two different types of URLs
Show View Todo: It displays particular TODO details
Let's begin by styling the Homepage:
Open styles.css
, which we have recently created. All the styles that we are going to write should be written in this file.
We will first clear the browser default margin and padding using the universal selector in CSS (*). So, our CSS for this will be:
Let's style the title of the page first. If you check out the HTML source code of the page, you will see that it is an H1
element. So, our CSS for this will be:
The preceding code makes the title appear in the center of the page. It also adds a light blue color to it. We have also created some space around it using the padding property of CSS. Refresh your page to verify it.
It's time to decorate the table
element. Our CSS for it will be:
The preceding code makes the table position to the center of the browser. First, we applied a width of 800px
to it and then we applied an auto positioned margin to it. Since the browser now knows the width of the table element, it will automatically divide the extra space on each side of it. This will make our table centered to the browser screen. The last property, text-align
is used to align the text present inside the table.
Let's apply some more styles to the elements present inside the table:
In the preceding CSS code, we have applied styles to the td
and th
elements of the table element. We created some space around the text using padding. We also applied a border to each cell. It is a solid border of 1px
width and color #888888
.
It's time to design the application's links. We will try to make them appear like a button so that it appears more clickable. Our CSS for it will be:
Links <a>
are inline HTML elements. Hence in the first line, we have made it look like a block-level element using the display
property. Now, we can apply width and margin to it. Just like we did to our table element; we will also apply a particular width and make all the links appear centered to their parent elements. We have also applied a padding of 5px
to create space around the link text.
To color the links, we applied background to it, and to make the text appear more distinct in this background, we applied a color property to it. We have also played with the shadow of the button to make it appear more 3D.
Make sure to refresh the browser screen to see the changes we are continuously applying. Hope you are enjoying the process of designing the application.
We have finally designed the home screen. The form is still not styled! Let's do it now:
Click on the New Todo
file and let's style it:
We applied proper width to the form and made it appear at the center of the screen. We have also given a decent background color to it. Padding and border is also applied to make it look more spacious and flat.
Next, we have to design the labels and input fields. If you check out the HTML source of this page, you will see that every label, and its associated input field, is wrapped inside a div
which has a field
class. Remember that these classes and the HTML structures are not written by us. These have been autogenerated by Rails. We are just working with the CSS file.
Now, we will use the field
class to apply style to the elements present inside the New Todo
view. Here we will design the label, input field, and textarea
element:
We applied a decent space inside the field
with div
element. Here, we have give two different values to the padding property. The first value is for creating spaces to the top and bottom, whereas the next value will be used for the left and right side.
Next, we applied style to the label element of the field
element. We have made it appear bold using the font-weight
property. Lastly, we gave both the input fields and textarea
the same set of CSS styles. We made them look spacious using padding. A border property is applied to get rid of the browser default border around the input and textarea elements. We also applied border-radius to make the corners a little rounded. Finally, we fixed the width of both the textarea and input elements so that they appear properly aligned.
It's time to design the last element in this HTML page, the Create Todo
button:
Most of the CSS styles that we applied here are similar to what we have applied to the input and textarea element. Here, we have added two extra properties, background
and color
to make it look different and stand out properly in the form.
We have successfully designed the New Todo
and Edit Todo
pages. We are now only left with the Show Todo
page. So, without any further delay, let's first check out the page. Click on the Show link.
Most of the content is already styled by us. We are only left with designing the text on this page, the code is as follows:
We applied a fixed width to the p
element and made it appear to the center of the screen using the margin property. We also applied a decent font size to them. Now, let's separate them from each other using the margin and padding properties.
This page is also shown after the New Todo
or Edit Todo
pages with a notice at the top. This element has an id
element, which is used to show the status, whether a new todo
was successfully created or an existing todo
was successfully updated. Using CSS, we have applied style to it. Make sure that you are not giving any space between p
and #notice
in the preceding CSS code. We are targeting the p
tag, which has an id, #notice
, so spaces shouldn't be present between the selectors.
Congrats! We have successfully completed designing the whole application.
Tip
Downloading the example code
You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.