Beautiful modern Frontend development with Laravel Elixir
I have been using bootstrap as my frontend base for a long time now, so I have decided to take a look into other tools/techniques I can use apart from bootstrap, something that is hopefully easier to build response websites with.
I would also like to get rid of jQuery as a dependency since there is less and less need for it with some of the popular frameworks such as react and vuejs.
I took a look at Laracasts lessons series Modern CSS workflow and it really hit it for me with some of the amazing tools and techniques he showed off. So I set to make a setup for me that mimics what Laracasts uses and some other packages.
What we’ll be using:
Laravel Elixir + Laravel Elixir Stylus
Laravel elixir is a wrapper around gulp build tool which follows certain conventions. This makes writing your gulp tasks much easier and much cleaner. Of course you can always override the defaults from the config such as the directory structure. You can take a look at its documentation since it is quite well writing. Also, since we are going to use Stylus we need to pull in another package which is Laravel Elixir Stylus, which is an extension to Elixir that helps you compile stylus down to normal CSS. The documentation can be found here and screen-casts can be found here
Stylus
This is just another preprocessor like SASS or LESS but I find the syntax much cleaner and much more natural to write, such as how to create a mixin and that it gives you the ability to remove the “;” at the end of each CSS property. You can check out the syntax here
Rupture
This is an extension on top of stylus which helps make the responsive design rather easy with its pre-defined media queries and helper functions. The most helpful features I found are the scales which work exactly as the breakpoint slicer package. There are a lot more such as the mobile and tablet breakpoints, full documentation and features can be found here
Lost Grid Framework
This is a grid framework that uses POSTCSS to compile down to CSS. Since we are using the stylus elixir from elixir it comes out of the box with no set up needed. Some of the coolest features I found from the framework is the waffle grid which makes things so much easier, apart from that it has a lot more feature which the documentation explains very easily.
Another benefit of using the lost grid framework is that you remove the grid structure from your HTML to your CSS, this remove that awkwardness that one div will have 5 classes attached to it for desktop, laptop, tablet, mobile and any other classes you may need which leads into a cleaner HTML structure.
By default the framework uses floats to create its columns, but if you want you can use flex box to make certain thins easier for you. This totally depends on what kind of browsers you have to support since flexbox support is still not 100% but getting better every year.
BEM Methodology
This is just another way to name your div classes. Some benefits for a traditional way of naming classes is you get rid of CSS weight which when you have a big project, things start falling apart very quickly. Also, you will remove any nesting from your preprocessor since there is not CSS weight anymore making you CSS that much easier to read and helps you split things into components and sections.
