Sergiu Nagailic

aka Nikro

Frontend for Startups

What I'll cover:

• MVP - what is it?
• Prototype
• Grid System
• Twitter Bootstrap / Foundation
• SASS / LESS
• Mobile Prototyping

MVP or Minimum Viable Product

Yes, this is also a MVP

It's pretty simple.

Prototype

• Landing Pages
• Facebook Pages
• Mail Subscription Form
• Video of a Concept
• Demo (small / fully functional)

• Simple Wireframes
• InvisionApp
• Static HTML / Bootstrap / Foundation
• Other tools

960 vs 1200

778 => 992

Foundation

Twitter Bootstrap

• Grid System
• Default Styles
• Menu / Dropdowns
• Tabs, Tables, Lists
• Images, Buttons, Forms
• Pop-ups, Breadcrumbs
• Popover, pagination
• Navbars, Progress Bars
• Tooltips, Carousel,
• Affixes, etc.

Everything is simple - "just add milk"

<form role="form">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

There are tons of things out there.

There are tons of websites with tons of bootstrap-based templates ready to be used.

• Variables
• Nesting
• Partials
• Import
• Mixins
• Extend
• Operators + Operations

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

Checkout others yourself.

Use COMPASS

to compile your SASS

• CSS3 variables, mixins, functions
• Typography
• Utilities
• Cross-browser implementation

There are other tools.

Emmet anyone?

LESS is like SASS, a bit different thou'

Mobile Prototyping

Questions?