From Freephile Wiki
Jump to navigation Jump to search
CSS Dialog-information.svg
CSS3 logo
Image shows: CSS3 logo
Description: Add custom CSS to pages or sitewide
Notes: Add CSS rules into your pages.
Test: See schedule colors on the Rates page.
Example: CSS#Example:_mobile_layout_with_2_columns

Cascading Style Sheets is one of the primary technologies used in the web. CSS provides the style/appearance aspect of your HTML.

WestCiv provides some really useful tools and examples of CSS in action. For example, you can make an 'equals' background effect.

https://caniuse.com is the site to go to for browser support (and global usage)

Example: mobile layout with 2 columns[edit | edit source]

A change to use percentages and 'em's instead of hard pixel widths or font size would achieve a more fluid layout. Basically, always use em for font size. Only use px when you know the exact dimensions of something (like setting a negative margin for a graphic)

To really get what you want (a responsive layout that is designed to work well in print and a variety of devices), you should use the 'media' selector, in combination with 'media queries' [1]

CSS like the following would be good:

@media (min-width: 55em)
		float: left;
		width: 65%;
		margin-right: 5%;
		margin-bottom: 1em;

		float: left;
		width: 30%;
		margin-bottom: 1em;

Note how both columns are floated "left" which means that when your math or the browser isn't broken and the percentages <=100% they are side by side. This side-by-side layout is only applied to devices that have a screen width of 880 pixels [2]

Example at http://maxdesign.com.au/jobs/css-layouts/12-example-layout-two-full/ and source at https://github.com/russmaxdesign/example-layout-two-full

References[edit source]

  1. good list of various approaches at https://gist.github.com/dustinboston/3867516
  2. 55em translates to 880px for the browser default font size of 16px. https://css-tricks.com/css-font-size/