HTML, CSS, & Javascript is all we need to make a simple website but we tend to have complicated development stacks to generate these files.
Here’s the file system structure of our development stack and it’s fairly easy to understand each directory if you’re familiar with web development. We’re using Intellij to illustrate this repo but you can easily have this project running within 2 minutes.
FONTS (public/fonts/)
There’s multiple ways of importing fonts for your web application and we’re loading it locally in the generated directory (public/static/fonts) because it’s reliable in a sense that you’re not dependent on 3rd party services. Keep in mind that all of your fonts source paths should be pointing to the static directory (public/static) relative path to your stylesheets.
Optionally, you can load the fonts remotely through 3rd party services such as Google fonts to decrease the load on your servers.
IMAGES (public/images/)
These digital assets are used to display static images or sprites on your web application such as logos, background image, etc. Do NOT store user generated images in this directory because this is a stand alone application containing no data structure.
SCRIPTS (public/scripts/)
In this project, we’re using browserify to tie in the dependencies of other front end javascript libraries in a clean compiled way instead of having a multiple script tags everywhere.
We globally instantiate the jQuery and bootstrap to load first before loading angular because bootstrap depends on jQuery. Instead of having to do 5 different script tags for jQuery, bootstrap, angular, angular-route and angular-cookie, we’ll let browserify compile our application script that contains all of these dependencies in a single file.
STYLESHEETS (public/stylesheets/)
There’s a ton of different front end components that are build in LESS or SASS but not both which makes changing the font/image paths for the compile CSS difficult.
This is how we solved it… we included both LESS and SASS in our project to increase the flexibility. Depending on what you’re more familiar with you can either use LESS or SASS but not both. We’re focusing on building out website on LESS hence the additional files that is is specific to our application. Keep in mind that any paths linking to the fonts and images should be relative to the static directory (public/static).
VIEWS (public/views)
Manages all of your different HTML templates. This should be scripted in a way that it can be reusable as much as possible. Templates such as headers, footers, and modals are reused throughout the entire website. Each of these templates should have it’s own controller managing it’s scope to reduce the risk of mutable state.
BUILD (gulp.js)
We’re using gulp to build and move our assets in the correct location so we can worry about building the product.
- fonts — moves (public/fonts → public/static/fonts)
- images: moves (public/images → public/static/images)
- less: compiles (public/css/less/styles.less → public/static/less.css)
- sass: compiles (public/css/sass/styles/sass → public/static/sass.css)
- css: merges (public/static/less.css + public/static/sass.css → public/static/application.css)
- js: browserify (public/scripts/application.js)
- minify-css: minify (public/static/application.css)
- minify-js: minify (public/scripts/application.js)
Here’s our complete expert front-end skeleton project that will help you understand the technology used to develop a sick website. Clone, fork, and recommend this project to build something greater. Hope you found this helpful and if you have any insights of making this better we would love your feedback.
Adam
Co-founder, Croissant
