Its been a while since I have posted. I have been learning a lot since this past few months. And technologies is always evolving. I actually forgot to post the tools I used when creating front-end especially for responsiveness.
Here are my select go to “frameworks” for front-end development
- Semantic UI / Semantic UI React (dependent on JQuery) hands down the best UI library I have ever used! Move aside Bootstrap! Its got everything you ever need from validation, grids, elements etc. Look no further, and what makes it even more attractive. Customizable and Ease of use!
- SASS/SCSS! What can be more easier when doing CSS Styling? Great structuring, mixin, operation & variables! Its more than a stylesheet now , its a language! SASS will compile your scss/sass file to css. This requires you have RUBY installed as this is a GEM package . Install Ruby first on your machine. Then do “gem install sass” and start compiling your scss file like this “sass ./style.scss ./style.css” then you can do “sass –watch style.scss style.css” to automatically compile it You can also compile bunch of sass files inside a directory “sass –watch folder1:folder2” . You can download GUI compilers of course but for a bare minimum, this is all you need specially when you are learning.
- Bourbon.IO and Bourbon.Neat. When you have SASS , you might want built-in mixins(or functions in your scss). Bourbon itself provides you with mixins and variables that will help you define values. It also helps you with prefix vendor specific properties(although this has been deprecated). Bourbon is like Compass another SASS frameworks with built-in mixins/function. Bourbon.Neat this guy here is my responsive design grid tool for SASS. Semantic UI has grid tool but since you are developing in SASS its much cleaner to take advantage of this feature. As its gives you “automatic-control” of your html from your css when doing responsive design.
- React.js. What else can I say , React just takes the cake for me compare to Angular, Vue.js etc. When you’re doing dynamic things in your front-end. React just work by itself! What I like about it is customizability (dont know if thats a word). You can have different part of your page as react elements that response to state changes hence the name I supposed. You can build a whole Web-App based on it or just part of it. Its great! (You will need to add JSX transpiler to your page like BABEL(react and react-dom) and once ready for production, pre-compile it and away you go)
That is the main framework/tool I used for a simple page creation. Although if you havent learned these yet. I urge you to!
Honourable mention below:
- NPM – is the package manager for Node.js. You might need to use this if you are developing an SPA(Single Page Application) in React. Whether you wanna use Node.JS for your app, its definitely a requirement. Node.js is a whole different beast altogether.
- React/Redux/Immutable.JS in extension with React , you might also want to learn Flux like architechture. Redux again helps you create SPA in React. It helps for managing states, actions and immutability. Immutable.JS is a helper library to help you mutate object/states. I suggest to learn this 3 if you are doing SPA.
- Webpack is a bundle manager that lets you do pretty much anything! It can integrate with NPM to do development builds and production builds. It bundles all your dependency files and puts them in one file! It also converts your CSS/SASS and even distribute your images to a selected directory. It can be a bit confusing to learn but definitely worth understanding how it works.
- Normalize.css , this is just a bunch of css rules that will.. well normalise all your elements to a more predictable manner! I can even say its a must have to include before anything on your page.
Well thats about it. My secret weapon for Front-End development!