matt-daniel-brown

Alex's Rails Cheat Sheet

I think the most confusing thing that I have found about Ruby on Rails so far has been the transition from (trying to) write code myself to the use of the fabled "Rails Magic". So, to help my own understanding of a few core Ruby on Rails concepts, I have decided to write something on what I think is a CRITICAL topic... the idea of Convention over Configuration and why (in my mind) it is the most important thing that helps Rails become magic!

(This may be a topic that we cover in more detail in class but as I said, I'm writing this for my own understanding... I hope it helps someone else understand things too... Perhaps you can give me a hand when I'm crying next week!)

##Convention over configuration ###What does this "actually" mean...

matt-daniel-brown

Fluid Type Sass - Mixin

A Pen by Matthew Daniel Brown on CodePen.

License.

matt-daniel-brown

#!/usr/bin/env bash

//  @TODO : write this...
//  ... (something like...):
//  
//  git clone {favicons.url}
//  rm -R .git/
//  cd ../
//  mv {favicons.dirname}/{~all_dir_contents~} -> `./`
//  rm -R {favicons.dirnam}

matt-daniel-brown

/*
 *  Using An API that returns a Promise will 
 *  result in a promise chain, and it splits 
 *  the function into many parts.
 *
 *    (for example...)
 */
function getProcessedData(url) {
  return downloadData(url) // returns a promise
    .catch(e => {

matt-daniel-brown

iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAYAAACAvzbMAABVIklEQVR4nOzdfVxT6Zk//ltxkOFhIgaCKImJI8Eaoos6EoXRMCDOgNrpFB2wtWJndjstbPX7+25rq9ui09XW2e232oV22rELVjswOHSmo9DyIMloeMiITyRxDFEIiYAkgQkBgqDI7xUNW8b6ACcnuXOfXO9/pqtyzmc1cJ37Oudc94yxsTEEAAAATNV03AEAAACQCQoIAAAASqCAAAAAoAQKCAAAAEqggAAAAKAECggAAABKoIAAAACgBAoIAAAASqCAAAAAoAQKCAAAAEqmZ+4pPIU7BAAAAPL4DYYufV9nMIvSE0UncYcBAADg/QaH7kRVKdrr77ewKuo0mwWb8s41qtqCcQcDAADgvbot9uCPa25U9w2MiCbeA0k8XCyHdhYAAIDHam6xOOrEIsf/9psVs3bf+G90mKx8ncEsiuaFX2Czgr7AmhIAAIDXMPcOLZc1Gqt7+26vHP+1afyNP33UhiB3K/NzQoQ8zm3PRgQAAOBtui324JoGg9Wx6Jj46497jHfG9rzjtS0G01zPxAMAAOCN2jtta2saDNceLh7oSe+B3OqxrVqfW9DRqGpb6/aEAAAAvE63xb5WcaFTjhCa96jff+qLhFl7i+QtBtNit6QDAADglRzFo6bBIH/Sn5nUm+jb847/rVyhEdOWDAAAgNf6/EbvlqcVD/SEm+iPFB/Lzy45uOOYy+kAAAB4pep6w3ZTj71oMn92SrOwlGp9EbSzAACAmbot9rWTLR7o4fdAJqNGqd00MDQ8QyIW1FNKCAAAwOtc0HQf/EzV/YepfM2UWlgTxcfy80sO7vhXKl8LAADAe1TXG/7b1GPPnerXTXkFMq7DZF2JxpBeIhZcofL1AAAA8KuuN/zK1GP/PpWvpVxA0IN7ImmOY0jEgk+pHgMAAAAe55o6TnSaBv+F6te7VEAcX69U66VoDCEoIgAAQI7qeoOs0zS4yZVjuFpA7nMUEZ3B7BfN

matt-daniel-brown

<nav id="nav" class="nav">
  <ul id="nav-list" class="nav-list">
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
<button id="menu-button" class="hamburger">

matt-daniel-brown

<div class="helper"></div>
<section class="page">
  <h2>Page 1</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit ratione quidem temporibus quisquam minus quae aliquam eaque dolorem impedit tempore nobis enim maiores aut vel eligendi atque, qui optio debitis!</p>
  <p>Veritatis quod quis dolorum iure modi rerum aliquam ad optio eveniet deserunt temporibus, eaque molestiae ut commodi distinctio accusantium ratione molestias possimus illo! Facere et possimus error in delectus iusto?</p>
</section>
<div class="helper"></div>
<section class="page">
  <h2>Page 2</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto odio suscipit optio, tempore. Sit qui modi enim repellendus, adipisci accusamus vitae, saepe ea repudiandae consequuntur, provident, explicabo necessitatibus laboriosam et!</p>

matt-daniel-brown

Basic Grid System

Some SCSS to implement a very basic grid system. It is responsive over 2 breakpoints. Feel free to use this in your pens.

A Pen by Charles Ojukwu on CodePen.

License.

matt-daniel-brown

Footer always on bottom

A Pen by Charles Ojukwu on CodePen.

License.

matt-daniel-brown

<nav>
  <div class="brand">
    BRAND
  </div>
  <!--<button class="mobile-btn" id="mobile-btn">Menu</button>-->
  <button id="mobile-btn" class="hamburger-btn">
    <span class="hamburger-line"></span>
    <span class="hamburger-line"></span>
    <span class="hamburger-line"></span>
  </button>