Detroit.Code() Sessions tagged web

Gulping All the Things

Lost in the forest of front-end build systems out there? Check out Gulp! Gulp makes it super easy to minify, concatenate, and optimize your assets in an easy piping build stream. There are only a few commands to learn, so writing complex tasks (like you would in another system) isn't a thing in Gulp. In this talk, I will walk through what Gulp is and create a working gulpfile that can be used across endless front end projects that minifies, concatenates, and optimizes assets, as well as live reloads the browser using browser-sync.

Speaker

Chris DeMars

Chris DeMars

Senior UI Developer, United Shore

Block__Element--Magic: CSS Modularity for the masses.

Have you ever faced a code base worked on by more than a dozen developers, blankly staring at thousands of lines of CSS, not knowing where to begin? A solution to this is B.E.M., or Block Element Modifier. B.E.M. is a CSS architecture. It's a methodology. It's a naming convention. It is based off of Object Oriented CSS. This talk will focus on basic B.E.M. CSS architecture and how it can be the solution towards modularity and writing clean, well maintained code within a large organization.

CSS is hard, we all know that. There has to be a more effective way to facilitate the modularity and flexibility of our code. When tasked with creating new components for a Web project and inheriting over 8,000 lines of code, where do you start? When you are told to keep it modular as possible, what solutions do you have at your disposal? During this time is when you break in to your bag-of-tricks with one of the many modular CSS architectures out there.

B.E.M. is a great method to use to keep code very flexible and modular from component to component, and page to page. The greatest thing about using B.E.M. is the reusability of the code and being able to maintain the code in small pieces opposed to a large blocks with excessive declarations and generic naming.

One of the greatest takeaways from using B.E.M. is the naming of styles. With B.E.M., you can be as specific as you want to describe exactly what that style is being applied too. Naming the style according to where it is being applied and what it is being used for helps other developers who inherit your code as well as your future self.

Speaker

Chris DeMars

Chris DeMars

Senior UI Developer, United Shore