Git Product home page Git Product logo

angularjs-nggirlsfit's Introduction

Фитнес-приложение для наших любимых женщин

Building a ngFit App with AngularJS

Install

$ git clone https://github.com/taksenov/angularjs-nggirlsfit.git && cd angularjs-nggirlsfit
$ bower install
$ npm install
$ gulp

Mixin

The application I'm using your own mixin to work with color, font and media queries.

Use Color Mixin

Use function in scss "color( name_color , type_color , opacity_color );"

Number 2 and 3 it's optional value, if you don't set them, set will be the normal value and 1 for opacity

Example

background: color(teal, normal,.6);

Use Fonts Mixin

Include mixin in scss "@include font( name_font , type_font );"

Example

@include font(roboto, regular-italic);

Use Media Queries Mixin

Include mixin in scss "@include media( name_media , type_media ) { @content }"

Example

@include media(phone, general){
  @content
};

Your Own Mixin Value

You can use your own mixin value, making all similar.

All values are stored in a file builds/development/sass/includes/_stack.scss

Structure

├──  builds/
│   ├──  development/
│   │   │   ├── app/
│   │   │   │   ├──  components/
│   │   │   │   │   └──  navbar/
│   │   │   │   │   │   ├──  navbar.controller.js
│   │   │   │   │   │   └──  navbar.html
│   │   │   │   ├──  main/
│   │   │   │   │   ├──  main.controller.js
│   │   │   │   │   └──  main.html
│   │   │   │   └──  app.module.js
│   │   │   ├──  fonts/
│   │   │   ├──  css/
│   │   │   ├──  img/
│   │   │   ├──  libs/
│   │   │   ├──  sass/
│   │   │   │   ├──  includes/
│   │   │   │   │   ├──  mixins/...
│   │   │   │   │   ├──  _mixins.scss
│   │   │   │   │   ├──  _stack.scss
│   │   │   │   │   └──  _varibles.scss
│   │   │   │   └──  styles.scss
│   │   │   └──  index.html
├──  bower_components/
├──  node_modules/
├──  .gitignore
├──  bower.json
├──  gulpfile.js
├──  package.json

angularjs-nggirlsfit's People

Contributors

taksenov avatar

Stargazers

 avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.