Difference between revisions of "CSS"

From Freephile Wiki
Jump to navigation Jump to search
(remove advice to use floats, it's so 1980's (pre-CSS grid era); correct the WestCiv example; Introduce useful resources section)
 
(7 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
{{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 pages.
+
|title=CSS
|tests=See schedule colors on the [[Rates]] page.
 
|examples=The [[Rates]] page uses custom table layout and coloring.  Without the CSS extension, this would be much harder to do.
 
 
}}
 
}}
 +
{{#set:feature description = Add custom CSS to pages or sitewide }}
 +
{{#set:feature notes = Add CSS rules into your pages. }}
 +
{{#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.
 
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].
+
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].
  
https://caniuse.com is the site to go to for browser support (and global usage)
+
== Useful Resources ==
 +
* [https://developer.mozilla.org/en-US/docs/Learn/CSS Learn CSS] from the go-to resource: Mozilla Developer Network (MDN)
 +
* [https://caniuse.com/usage-table global browser usage comparison]
 +
* [http://getbem.com/introduction/ BEM] the Block Element Modifier convention for CSS rules
 +
* [https://www.sitepoint.com/optimizing-css-performance/ 20 tips for optimizing CSS] (2018) by SitePoint
  
  
<br clear="all">
 
== 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)
 
 
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>
 
 
CSS like the following would be good:
 
<source lang="css">
 
@media (min-width: 55em)
 
{
 
.main
 
{
 
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
 
  
  

Latest revision as of 14:19, 16 July 2020

CSS Dialog-information.svg
CSS3 logo
Image shows: CSS3 logo
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



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.

Useful Resources[edit | edit source]



References[edit source]