Frontend Notes: 23.11.2015

Getting started

Ruby Monstas 23.11.2015 / protocol by Rebecca

Little summery of what we did with Lisa on the frontend of the app in our first session. Please also check Lisa's pull request to see all the changes.

We'll be using SASS (extension of CSS). For now we have the screen design of the admin area, the logo, the font and colors to work with. We start with cleaning and setting up some basics for a fresh start.

---

Adding a few important meta tags to the top of the head of our application.html.erb:

• adding: meta charset="utf-8“ . This is important info for the browsers to allow correct character encoding.
• adding: http-equiv="X-UA-Compatible" content="IE=edge“ to make stuff work for the Internet Explorer.
• adding: viewport. The viewport is the area the user sees on his/her screens. If we don’t define the viewport the website will be shown small on mobile devices to „fit in“ by default. But if we add the viewport meta tag we can take control over the dimension and scaling of the website, to make it more responsive on different browser screens.

Importing the web font "Open Sans" from the Google fonts website by adding the @import code snippet on top of our application.css.scss. The @import option also loads the page faster than the standard linking option.

• We'll be using the normal and semi-bold style (400, 600) for now.
• info: the less font styles and special characters we import the faster the site will perform.

For a fresh start it's commont to normalize the css. We add a normalize css (scss in our case) file to our stylesheets and @import it as well in our application.css.scss. This will remove certain browser styles inconsistencies (margins, paddings etc) but leaving important ones untouched. So not all css styles get removed from the elements, just the useful ones. It also helps with some bugs and font size renderings.

we are adding autoprefixer-rails gem to our gemfile and an autoprefixer.yml to our config. this will allow to just write css rules that are still W3C nonstandard CSS properties and the autoprefixer will then automatically add the vendor prefixes (e.g. -webkit- , -moz- , -o-, -ms-). Using autoprefixer saves lots of time.

removing most of the styling from the application.css.scss for a fresh start with just a few settings like the font, font-size, font-height and colors. Please don'be be shocked if everything looks super raw atm.

Setting up all the main colors. We use $variables to make the naming easier (possible in scss and sass). For example: $red: #EA5755; and $grey-dark: #606060; (we could also name it $gandalf-the-grey I guess ;) )

For logos and vector graphics we are probably going to use mostly SVGs because opposed to JPGs and PNGs they are scalable which is good for all the different screen resolution.

Setting up the HTML structure (semantics). For example a container for the header

, navigation and the main content .

responsiveness/ media queries: Adding breakpoints (in $variables) for the different screens (small screens, tablet screens, desktop screens).

Tip: over 100 lines of css is probably too much and we should then think of refactoring or making another file