Putting it all together: Combining CSS Tools and Methodologies

Today there are multiple css frameworks, preprocessors, grids and naming strategies that can be used to organize your codebase. The question is, how do you sort through all the noise and figure out which of theses new css coding strategies and tools are best for your specific project and how do you combine them in order to create the best environment for styling?

Topics of Discussion:

• What is a… and why do I need it?

  1. Frameworks (CSS)
  2. Preprocessors
  3. Naming Methodologies
  4. Components
  5. Grids
  6. IDE’S (codepen)
  7. Linters
  8. Resources

• How do you choose?

  • Reasons for choosing certain tools for certain projects over others
  • Examples of sample codebases and explanations behind them - discuss outside of presentation

• Integration and Combination Strategies

  • Combining tools and strategies with each other (ex. Using Sass @extends to pull bootstrap components into a custom style)
  • Figuring out how to customize naming strategies or tools for your project
  • Determining what information or content is useful when researching and using methodologies and tools

To Run Locally (on your computer, preferably from the terminal/bash)

1. Install node if you haven't already: http://nodejs.org/
2. Clone the repo: git clone git@github.com:Freetown5/code_her_2017_pres.git
3. CD (Change Directory) into Code Her 2017 Pres. folder/directory: cd code_her_2017_pres
4. Run the npm install command: npm install
5. Start project (it will automatically start in the browser): npm start
6. Note: You can view speakers notes by hitting the 'S' key while the project is running

Alternatively, you can view the presentation on slideshare (no fun gif's though)

• https://www.slideshare.net/IsatuConteh1/css-tools-and-methodologies

Tutorial

The accompanying tutorial (and all the accompanying documentation) can be found here:

• https://drive.google.com/open?id=0By13Fl5YcR5vb19QWUtwUXZ1OUU

Tutorial Example

And the codepsn example can be found here:

• https://codepen.io/Freetown5/pen/oGjzLx