Miles Greatwood

Project notes for a forgetful mind

---

Project maintained by milesgwood Hosted on GitHub Pages — Theme by mattgraham

---

layout: default — #SASS phpFileStorm setup Sass

/Users/miles/.rvm/gems/ruby-2.4.1/bin/sass
--no-cache --update $FileName$:$FileNameWithoutExtension$.css
$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

Sass is easier but having all of these preset css values is horrible.

I found a great trick for editing multiple lines at once in phpStorm. The alt key adds a new cursor so you can type in two places at once.

Get rid of the .header margin

#search-block-form > div > div , #edit-submit {
    margin-top: 10px;
}

#footer {
    background-color: #002654;
    color: #ffffff;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1rem;
    margin-bottom: 0;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

Here’s a great codepen on getting a footer to actually stick to the bottom of the page. It recommends that you set the foother to absolute bottom and then add bottom padding to the parent element of the footer to equal height of the footer. Without that padding if the content reached the footer they would hide each other instead of pushing the footer lower. The height of the page needs to be at least 100% to push the footer off.

http://ceps.dd:8083/sites/ceps/files/default_images/3-2_0073_samuel-zeller-34751.png

Flexbox

Docs

Properties of parent

display: flex justify-content: space-between - puts space between all items

justify-content: center; - Centers it on primary axis align-items: center; - Centers on y axis

align-items: flex-start -puts item at top
align-items: flex-end - puts item at bottom

flex-direction: column; - which direction do the items stretch - good for switching to mobile or cards flex-direction: row-reverse; - for putting content in reverse order on main axis

Properties of child

flex: auto - which means flex: 1 1 auto - which means all item grow and shrink at same rate.

C:/Ruby24/bin/sass.bat
$FileName$:$FileNameWithoutExtension$.css
$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

1. Make sure that the ruby folder is added to the path. You can get to the windows path through start > Environment Variables

SASS on cloud9

So sass is installed on the Cooper Center website livedev server. You can check with:

sass --version
1.11.0 compiled with dart2js 2.0.0

To start watching the sass files run:

cd /home/uvacooper/dev/livedev/docroot/themes/coopercenter_units/css
sass --watch .

or
sass --watch .:.

or
sass --watch .:output_dir/

You can also lighten and darken colors with sass functions.

background: lighten( $lt_grey,  5% )
background: lighten( $lt_grey,  10% )