Mobile First with CSS

Introduction:

We use CSS Media Queries to adjust Layout& Design.

We try to influence the world of tracing from different fields and views.

On is to make the APP Experience for the use extreme comprehensible and understandable.

For this implementation of goals we need and combination of traditional App Coding ( JavaScript with React+(Native) ) and html & css. An important file for this to understand the schema is the material.{primary}-{accent}.min.css ormaterial.{primary}-{accent}.min.js File in our repository. Test it yourself by open our APP-Page in Chrome and open the Dev Tools -> Elements. Now move the size of the App-View-Field and you see that the code is reacting on your choice of the View size. Look to the class changes in the file "..is-small-screen".

The DOM ( https://de.wikipedia.org/wiki/Document_Object_Model ) need a style guide. In React Native it is often used with the style class and a method for each element that we used. The CSS and JS calls from the index.html and service Worker is very similar

This brings the user a responsive experience

Links&Videos:

https://getmdl.io/started/

http://daemonite.github.io/material/docs/4.0/getting-started/introduction/

Responsive Design Basics by Google: https://developers.google.com/web/fundamentals/design-and-ui/responsive/ Responsive Design Patterns (Google): https://developers.google.com/web/fundamentals/design-and-ui/responsive/patterns Responsive Images (Google): https://developers.google.com/web/fundamentals/design-and-ui/responsive/images Using CSS Media Queries: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries Responsive Images (MDN): https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images Responsive Images in CSS: https://css-tricks.com/responsive-images-css/ Using CSS Animations: http://learn.shayhowe.com/advanced-html-css/transitions-animations/

Installation & preparation:

Usage:

If you want to give your knowledge a try you can dive to following code:

<!-- CSS -->
<!-- Add Material font (Roboto) and Material icon as needed -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<!-- Add Material CSS, replace Bootstrap CSS -->
<link href="css/material.min.css" rel="stylesheet">

Hello, world!

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<!-- Then Material JavaScript on top of Bootstrap JavaScript -->
<script src="js/material.min.js"></script>

Contributing:

Credits & Links:

Partners:

License: