|
|
| (10 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| 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 [http://www.westciv.com/tools/gradientsnustyle/index.html#background-image:%20linear-gradient(90deg,%20#ffffff,%20#000000%2010px,#000000%2025px,#ffffff%2035px,#000000%2045px,#000000%2060px,#ffffff%2070px) 'equals' background effect].
| |
|
| |
| {{Feature | | {{Feature |
| |explains= CSS | | |image=CSS3 logo and wordmark.svg |
| |description=Add custom CSS to pages or sitewide
| | |imgdesc=CSS3 logo |
| |notes=Add CSS rules into your page with a parser hook: <nowiki>{{#css:rules here}}</nowiki>
| | |title=CSS |
| |tests= | |
| |examples=the [[Rates]] page uses custom table layout and coloring. Without the CSS extension, this would be much harder to do. | |
| }} | | }} |
| <br clear="all">
| | {{#set:feature description = Add custom CSS to pages or sitewide }} |
| == Example: mobile layout with 2 columns == | | {{#set:feature notes = Add CSS rules into your pages. }} |
| 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)
| | {{#set:feature tests = See schedule colors on the [[Rates]] page. }} |
| | {{#set:feature examples = [[{{FULLPAGENAME}}#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. |
|
| |
|
| 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' <ref>good list of various approaches at https://gist.github.com/dustinboston/3867516 </ref>
| | WestCiv provides some really useful tools and examples of CSS in action. For example, you can make an [http://www.westciv.com/tools/gradientsnustyle/index.html#background-image:%20linear-gradient(%20#ffffff,%20#000000%2010px,#000000%2025px,#ffffff%2035px,#000000%2045px,#000000%2060px,#ffffff%2070px) 'equals' background effect]. |
|
| |
|
| CSS like the following would be good: | | == Useful Resources == |
| <source lang="css">
| | * [https://developer.mozilla.org/en-US/docs/Learn/CSS Learn CSS] from the go-to resource: Mozilla Developer Network (MDN) |
| @media (min-width: 55em)
| | * [https://caniuse.com/usage-table global browser usage comparison] |
| {
| | * [http://getbem.com/introduction/ BEM] the Block Element Modifier convention for CSS rules |
| .main
| | * [https://www.sitepoint.com/optimizing-css-performance/ 20 tips for optimizing CSS] (2018) by SitePoint |
| {
| |
| float: left;
| |
| width: 65%;
| |
| margin-right: 5%;
| |
| margin-bottom: 1em;
| |
| }
| |
|
| |
|
| .aside
| |
| {
| |
| float: left;
| |
| width: 30%;
| |
| margin-bottom: 1em;
| |
| }
| |
| }
| |
| </source>
| |
| 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 <ref> 55em translates to 880px for the browser default font size of 16px. https://css-tricks.com/css-font-size/</ref>
| |
|
| |
|
| 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
| |
|
| |
|
|
| |
|