/css-framework

Primary LanguageHTML

CSS Framework

Todo

  • Start
    • Font styles styled basic text elements
    • Defined a font stack on the body
    • Styled headings: h1-6
    • Styled inline elements: strong, em, code
    • Style <a> tag. Include :hover styles
    • Stretch: style <mark>
    • Stretch: add a style for text selection, read this
    • Stretch: Add color classes. Follow the example set by Bootstrap colors
  • Button styles for warning, info, action, etc.
    • Basic button styles
    • Alternate button styles: warning, secondary, success, Danger, info, light, and dark.
    • document your buttons
  • Form Elements
    • Styled inputs and textarea
    • Styled form element
    • Documented forms and inputs
  • Use CSS Custom properties for colors and other repeated values
    • uses Custom properties
    • Document your custom properties
  • Navbar style
    • Defined navbar styles
    • Document your navbar
    • Stretch: Add a sticky navbar style (css position sticky)
    • Stretch: Footer styles
  • Card style
    • Defined a card style'
    • Stretch: Your card style include some extra features like image and footer, dark or light style.
  • Uses SASS
    • Stretch: use @import to bring all files together into a single css file.
    • Stretch: Use @for to automate one or more processes
    • Stretch: use mixins to reduce code duplication
  • Web components
    • You have at least one web component
    • Document your web component
    • Stretch: You have a second web component