HTML/CSS

Pseudoselectors

a:hover a:visited a:link = unvisited link p:first-child = paragraphs that are the FIRST CHILD of their parents (not the first child of paragraphs) – can also use this with <a> tags too! p:nth-child(n) = selects all paragraphs that are the nth-child (p:nth-child(3) selects all paragraphs that are the 3rd child) Remember that “children” are not […]

HTML / CSS Resources

Style Guides http://hugeinc.github.io/styleguide/index.html http://sideproject.io/front-end-and-ui-style-guides/ http://patternlab.io/resources.html http://styleguides.io/ http://bradfrost.com/blog/post/styleguides-io/ http://alistapart.com/article/creating-style-guides http://webdesign.tutsplus.com/articles/50-style-guide-tools-articles-books-and-resources–cms-21209   Color http://htmlcolorcodes.com/resources/

CSS Transitions

CSS changes can be applied to different states of an element, such that the different states will display different properties. ie. :hover, :focus CSS transitions allow these changes to be eased in over time. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

Media queries and SASS

Experimenting with SASS and media queries, using http://thesassway.com/intermediate/responsive-web-design-in-sass-using-media-queries-in-sass-32 With SASS, media queries can be nested inside CSS properties, so the property can be in just ONE place in the CSS! However, this leads to lots of duplicate @media lines. However, http://sasscast.tumblr.com/post/38673939456/sass-and-media-queries says that having lots of media queries doesn’t matter.

Pseudoelements

:before (or ::before) is treated as the first child of the element it is being applied to, whilst :after (or ::after) is treated as the last child. This means that we can apply large quotes to blockquotes to a paragraph. If we set <p> to position: relative; its position doesn’t change, but it becomes positioned. This […]

CSS quotes property

quotes: string string string string Specifies which quotation marks to use. The first two values specifies the first level of quotation embedding, the next two values specifies the next level of quote embedding, etc http://www.w3schools.com/cssref/pr_gen_quotes.asp