Dozerslist Stylin

 

Stylin’ DIRECTIONS:​Follow along as you begin learning the basics of Ruby on Rails, a powerful framework for creating dynamic, data-driven websites. ❏

Login to Cloud9

● Go to ​ https://c9.io/web/login

❏

Open Workspace

● Click OPEN on your ​ ruby-on-rails​ workspace tile

❏

Make Sure Your Application is Running

● Change directory to ​ dozerslist​ ,​​ your application’s directory: $​ cd dozerslist

● Launch the Rails server: ​ $​ rails s -b $IP -p $PORT ❏

Update the Layout

● Update ​ app/views/layouts/application.html.erb​ :

​ DOZERSLIST​

Page 1 of 4



❏

Create New Stylesheets

● Under ​ app/assets/stylesheets,​ create three new stylesheets: ○ normalize.css ○ skeleton.css ○ custom.css

❏

Download the Skeleton Boilerplate

● Download and extract the Skeleton boilerplate: http://static.colestock.com/Skeleton-2.0.4.zip

● Copy the contents of the ​ normalize.css​ and skeleton.css​ into the files you just created ❏

Create the Custom Stylesheet

● Add the following to your ​ custom.css​ file:

/* Override Baseline Styles */ *{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } body { font-family: 'Patua One'; font-size: 1.7em; } pre, blockquote, dl, figure, table, p, ul, ol, form { margin-bottom: 1.5rem; } /* Utilities */ .u-ct { text-align: center; } /* Site Styles */ header { margin: 1rem 0 0 0; } #navigation { background-color: #cd3539; } #navigation ul { text-align: center; margin-bottom: 0; } #navigation ul li { display: inline-block; position: relative; margin: 0; }

Page 2 of 4

#navigation ul li a { display: inline-block; line-height: 49px; padding: 0 15px; width: 100%; text-decoration: none; text-transform: uppercase; font-size: 17px; color: #ffffff; letter-spacing: 0.07em; } #navigation ul li a:hover { background-color: #832f32; color: #ffffff; cursor: pointer; } #content { margin: 1.5rem auto; } footer { height: 68px; background-color: #444444; } /* Page Styles */ #new_item, .edit_item { max-width: 400px; margin: 0 auto; } #new_item input[type=text], #new_item textarea, .edit_item input[type="text"], .edit_item textarea { width: 88%; } #item_description { min-height: 200px; } .item { text-shadow: -1px -1px 0 #fec72c, 1px -1px 0 #fec72c, -1px 1px 0 #fec72c, 1px 1px 0 #fec72c; } .post-date, .category { font-size: .8em; color: #444444; } /* Media Queries */ /* Larger than phablet (also point when grid becomes active) */ @media (min-width: 550px) { h1 { font-size: 4.0rem; } }

Page 3 of 4

❏

Update the Application Stylesheet

● Update ​ app/assets/stylesheets/application.css​ so that it only lists the four directives below: *=​require normalize *=​require skeleton *=​require_self *=​require_tree ​ .

(Note: It is OK to leave the comments around them) ❏

Remove the ‘Welcome’ Message and Wrap the List

● In the ​ app/views/items/index.html.erb​ , remove the ‘Welcome’ ​ ● Wrap a < ​section>​ element around the loop:



❏

Test the Application

● You should have two pages which resemble the following:

❏

Save and Close the Project

● FILE Menu > Save All ● Cloud9 > Quit Cloud9

Page 4 of 4