Experiments with Chris Eppstein's RESPONSIVE LAYOUTS WITH SASS

SASS.md

#This experiment is done on Ubuntu 12.04. All the commands are executed in Terminal unless otherwise mentioned. ##Clone Chris Eppstein's Responsive Layouts With SASS ###Open Terminal and go to the folder where you want create this test project and execute following command git clone git://gist.github.com/1163006.git ###Create a project with Compass compass create test_responsive

I have both test_responsive folder and Chris Eppstein's git clone(gist-399379) in same folderCopy all .scss files into test_responsive/sass folder and .css files into test_responsive/stylesheets folder

cp gist-3993794/*.scss test_responsive/sass/
cp gist-3993794/*.css test_responsive/stylesheets/

###Copy all the code from sass/output.scss into sass/screen.scss cd test_responsive/sass vi output.scss ###Place the cursor at starting line and in command mode enter "8yy"(There are 8 lines in the file) vi screen.scss ###Place the cursor in the next line after last sentence already present and in command mode enter "P". Now open a new terminal tab and execute following command compass watch ###Now every change you make in screen.scss will be converted into traditional css format and put in scree.css file.If you open screen.css file you can see the generated code. Now the project to work and do experiments with Chris Eppstein's code is ready. As Compass is polling for changes we will see any errorsin the code in the terminal, its handy to keep a tab open running the command 'compass watch'.

---

---

Error No : 0001

DEPRECATION WARNING on line 21 of /var/www/projects/local-dev/sass/test_responsive/sass/_media-handheld.scss:

@extending an outer selector from within @media is deprecated. You may only @extend selectors within the same directive. This will be an error in Sass 3.3. It can only work once @extend is supported natively in the browser.

DEPRECATION WARNING on line 24 of /var/www/projects/local-dev/sass/test_responsive/sass/_media-handheld-landscape.scss:

@extending an outer selector from within @media is deprecated. You may only @extend selectors within the same directive. This will be an error in Sass 3.3. It can only work once @extend is supported natively in the browser.

DEPRECATION WARNING on line 21 of /var/www/projects/local-dev/sass/test_responsive/sass/_media-handheld.scss:

@extending an outer selector from within @media is deprecated. You may only @extend selectors within the same directive. This will be an error in Sass 3.3. It can only work once @extend is supported natively in the browser.

DEPRECATION WARNING on line 24 of /var/www/projects/local-dev/sass/test_responsive/sass/_media-handheld-landscape.scss:

@extending an outer selector from within @media is deprecated. You may only @extend selectors within the same directive. This will be an error in Sass 3.3. It can only work once @extend is supported natively in the browser.

SOLUTION : When made following modifications in files _media-handheld.scss, _media-handheld-landscape.scss the errors are rectified.

Thanks to following people for assisting

https://twitter.com/chriseppstein

http://thesassway.com/

https://twitter.com/Snugug

https://gist.github.com/JohnRiv

.g-h-c {
@include centered; // this is a simple mixin from compass-layouts that sets margin: 0 auto.
@include pie-clearfix;
/*@extend .g-base-c;*/
width: $handheld-width;
@include optional-grid-background(
$total: $handheld-columns,
$column: $handheld-col-width,
$gutter: $gutter-width,
$baseline: $base-line-height
);
}

For designing a website one needs to make lot of homework. Make decision about

• how the page looks like in various screen sizes
• colors of various html elements
• colors of nested html elements
• Font size of various html elements
• Font size of nested html elements

There are many procedures prevalent among web designers for designing a website. Here in this post i suggest following procedure. With this procedure one will have an idea about the process website design shape up.

• Decide how many different page layouts will be there in the website i.e 1column or 2coulmn or 3 column or right sidebar 2column or left sidebar 2column etc.

• Decide on color scheme

• Decide on font sizes.

My Procedure

• Define styles for all general html tags as standalone

• Define page layout blocks and positioning of various blocks

• Define styles for html tags with layout blocks

• Try to make the code as clear as possible and follow html structure while defining css styles.