Project notes for a forgetful mind
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
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
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
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% )