/osmo-bootstrap-template

Manually re-created Osmo homepage from the original one

Primary LanguagePug

Osmo bootstrap template

Manually re-created Osmo shop homepage from the original one. Сopyright of the content (images, videos etc.) belongs to the Tangible Play, Inc.

Features

  • Based on Bootstrap 4.5
  • Responsive images via HTML5 attributes and CSS3 media queries
  • Extra styles are trimmed by UnCSS
  • Play/pause videos depending on their position on the screen
  • SVG sprite injected into HTML markup
  • Gotham font was replaced by free alternative Montserrat

Approach

I tried to follow the same code style and approach that is recommended by the Bootstrap developers:

  • Components should be responsive and mobile-first
  • Components should be built with a base class and extended via modifier classes
  • Whenever possible, prefer a HTML and CSS implementation over JavaScript
  • Whenever possible, use utilities over custom styles
  • Whenever possible, avoid enforcing strict HTML requirements (children selectors)

Some other guides and approaches which I followed anyway:

  • “6 Gulp Best Practices” by Cosmin
  • “HTML/CSS Style Guide” by Google
  • “Principles of writing consistent, idiomatic CSS” by Necolas

How to work with sources

The project uses Gulp — a cross-platform, streaming task runner that automate all development tasks including a build process.

  1. Install Node.js.
  2. For Windows, you may need to install a Unix shell command line interface, such as Git Bash.
  3. Check npm (node package manager) is installed via command prompt: $ npm.
  4. Run $ npm install gulp-cli -g to install Gulp CLI.
  5. Check Gulp CLI is installed via $ gulp --help.
  6. Open terminal from the sources folder and run $ npm install.
  7. Build the sources if necessary: $ gulp cleanBuild.

More information can be found inside gulpfile.babel.js.