Difference between revisions of "CSS"

From Freephile Wiki
Jump to navigation Jump to search
m (added Category:Style using HotCat)
Line 4: Line 4:
 
|explains= CSS
 
|explains= CSS
 
|description=Add custom CSS to pages or sitewide
 
|description=Add custom CSS to pages or sitewide
|notes=
+
|notes=Add CSS rules into your page with a parser hook: <nowiki>{{#css:rules here}}</nowiki>
 
|tests=
 
|tests=
 
|examples=the [[Rates]] page uses custom table layout and coloring.  Without the CSS extension, this would be much harder to do.
 
|examples=the [[Rates]] page uses custom table layout and coloring.  Without the CSS extension, this would be much harder to do.
 
}}
 
}}
 
+
<br clear="all">
 
 
 
== Example: mobile layout with 2 columns ==
 
== Example: mobile layout with 2 columns ==
 
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)
 
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)
Line 42: Line 41:
  
 
{{References}}
 
{{References}}
 +
 
[[Category:Web Development]]
 
[[Category:Web Development]]
 
[[Category:Design]]
 
[[Category:Design]]
 
[[Category:UI]]
 
[[Category:UI]]
 
[[Category:Style]]
 
[[Category:Style]]

Revision as of 18:21, 5 December 2016

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


CSS Dialog-information.svg
Summary
Description: Add custom CSS to pages or sitewide
More
Notes: Add CSS rules into your pages.
Test: See schedule colors on the Rates page.
Example: CSS#Example:_mobile_layout_with_2_columns


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)
{
	.main
	{
		float: left;
		width: 65%;
		margin-right: 5%;
		margin-bottom: 1em;
	}

	.aside
	{
		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/