1 / 19

Makerstrap

Makerstrap. By: Michael Veis . What is Makerstrap?. Bootstrap theme based on Webmaker’s style guide Front-end framework for developing responsive projects Used by Mozilla’s internal team to prototype quickly

xanti
Download Presentation

Makerstrap

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Makerstrap By: Michael Veis

  2. What is Makerstrap? • Bootstrap theme based on Webmaker’s style guide • Front-end framework for developing responsive projects • Used by Mozilla’s internal team to prototype quickly • Not meant to be a replacement, but allows designers and developers to collaborate easier

  3. My Work • Issue 37: Add flexboxmixin • Issue 38: Fix form focus states • Issue 3: Add gzip compression to the grunt build task

  4. Issue 37 • Involved working with an existing flexbox module • Setting up makerstrap.less to recognize the implementation • Create a new section in documentation and explain flexbox classes

  5. What is Flexbox? • Layout mode providing arrangement of elements • Allow elements to react to different screen sizes

  6. Flexbox Example Layout

  7. Sample Code Continued

  8. Sample Code

  9. Flexbox Classes

  10. makerstrap.less Setup

  11. Issue 38 • Current form focus states were too blurry • Involved modifying makerstrap.less • Removing the box-shadows from the focus states

  12. Current State

  13. Intended State

  14. makerstrap.less changes

  15. Issue 3 • Involved making changes to Gruntfile.js • Hosted files are being uploaded directly to s3 • Wanted to gzipmakerstrapcss files so they are compressed as much as possible

  16. What is Grunt.js • Task based command line tool written in JavaScript on top of Node.js • Allows you to write complicated tasks and use them in your project • Gruntfile.jscontrains: • The “wrapper” function • Project and task configuration • Loading of grunt plugin and tasks • Custom tasks

  17. Changes to Gruntfile.js

  18. Challenges with Issue 3 • First time making changes to gruntfile.js • A little unsure how everything was setup • Documentation was confusing at first

  19. Any Questions?

More Related