NewsApp by Osumstudio

Simple Html Code

		
					

   
      
Trending
   
   
Some of top trending news on stories from the world news channels.








   
      

         
         
Technology
      
   
	
					
             

	
 .explore-root h6 {
    color: #fff;
} 			

    

	
	.explore-root .explore-root h6 {
		 color: #fff;
	}
    

Define Routes

First of all, when we init the Framework7 app we should pass default routes using routes array parameter:

var app = new Framework7({
  routes: [
    {
      name: 'about',
      path: '/about/',
      url: './pages/about.html',
    },
    {
      name: 'news',
      path: '/news/',
      url: './pages/news.html',
      options: {
        animate: false,
      },
    },
    {
      name: 'users',
      path: '/users/',
      templateUrl: './pages/users.html',
      options: {
        context: {
          users: ['John Doe', 'Vladimir Kharlampidi', 'Timo Ernst'],
        },
      },
      on: {
        pageAfterIn: function test (e, page) {
          // do something after page gets into the view
        },
        pageInit: function (e, page) {
          // do something when page initialized
        },
      }
    },
    // Default route, match to all pages (e.g. 404 page)
    {
      path: '(.*)',
      url: './pages/404.html',
    },
  ],
});

	

Route Path

As stated above, the route's path property means the path/url that will be displayed in browser window address bar (if pushState enabled) when the following route will be loaded either by api or clicking on a link with same path.

Create a page follow steps

• 1 Open flie name routes.js path- /newsapp/js/routes.js
• 2 Path:- Means this route will be loaded when we click link that match to this path, or can be loaded by this path using A
• 3 url:-Load page content via Ajax. Also supports dynamic route params from route path using {{paramName}} expression, e.g.
• 4 name:-Route name, e.g. home

Route path matching is handled by Path To Regexp library, so everything what is supported there is supported in Framework7 as well. For example, if you want to add default route which match all paths, we can use regular expression like:

	
var routes = [
  // Index page
  {
    path: '/',
    url: './index.html',
    name: 'home',
  },
    // Index page
  {
    path: '/explore/',
    url: './pageslayouts/explore.html',
    name: 'explore',
  },
];

Page Root Classes

The custom class selector enables you to style all HTML elements with the same CSS code for that specific page or post only. Here is Example of root class "explore-root"

Color Scheme Variables

Variables in CSS should be declared within a CSS selector that defines its scope. For a global scope you can use either the :root or the body selector. The variable name must begin with two dashes (--) and is case sensitive!.The syntax of the var() function is as follows:var(custom-name, value)

The following example first defines a global custom property named --f7-page-bg-color: then it uses the var() function to insert the value of the custom property later in the style sheet

								/*====================
								  Colors List
								  ==================== */
								:root {
								 --f7-page-bg-color: #XXXXXX;
								  --f7-theme-color: #XXXXXX;
								  --f7-theme-color-shade: #XXXXXX;
								  --f7-theme-color-tint: #XXXXXX;
								  --f7-theme-color-rgb: 177, 6, 6;
								}


								.color-theme-color {
								 --f7-page-bg-color: #XXXXXX;
								  --f7-theme-color-shade: #XXXXXX;
								  --f7-theme-color-tint: #XXXXXX;
								  --f7-theme-color-rgb:  177, 6, 6;
								 
								}

						
						

Css Classes

In the CSS, a class selector is a name preceded by a full stop (“.”) and an ID selector is a name preceded by a hash character (“#”). The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one.

To remove hairlines around strong block we need additional no-hairlines class

Button layout is pretty simple. Just add button class to links or submit/button inputs:

Button


Button

CSS Files and Structure

	

	some code


	
	some code
	
	
	
	some code
	

How can I add theme mode switcher?

How can I adapt the template to another color?

It is easy to apply color templates. All you need is just to add color-theme-[color] class to the required parent element. It could be body, app root, view, page, navbar, toolbar, list-block, etc. For example:

								

									...
								

								

									...
								

						  

To set custom color theme, you need to specify few CSS variables:

--f7-theme-color — HEX value of theme color.
--f7-theme-color-shade — 8% darken theme color.
--f7-theme-color-tint — 8% lighten theme color.
--f7-theme-color-rgb — RGB value of theme color.

								/*====================
								  Colors List
								  ==================== */
								:root {
								  --f7-theme-color: #XXXXXX;
								  --f7-theme-color-shade: #XXXXXX;
								  --f7-theme-color-tint: #XXXXXX;
								  --f7-theme-color-rgb: 177, 6, 6;
								}


								.color-theme-color {
								 --f7-theme-color: #XXXXXX;
								  --f7-theme-color-shade: #XXXXXX;
								  --f7-theme-color-tint: #XXXXXX;
								  --f7-theme-color-rgb:  177, 6, 6;
								}

						
						

Cards Layout Type 1

									

	
	 
	

				
				

					
 
					
					

				
Health
 
						Newest Launches 
					
				
			

					

					

						Uzoma4 Buchi
						Jun 6  4 Min Read
					
				
				
	
	
	

	
	
							

Cards Layout Type 2

									

		
	


				

					
 
					
					

						
					

						
Tuesday 2 June
						

						bookmark_fill
						
						
 
						
						We going to rock today with our news app!!
						
				

					

					

						Uzoma4 Buchi
						Jun 6  4 Min Read
					
				
 
						
					
				
				
			
	
	
	
	
	
							

Post Listing Layout

								

					
						

							
								play_fill
							
							

								

									
24 Things recommended to See and Do in Budapest this Season.
								
								

									
										
										
										Camille Aline
										1m ago
									
								
							
						
						

							
						 

Post Grid Listing Layout

					 
						

								

									
											

												
												play_fill
											
											

												
 
													Jennifer Reid
						   
						     1m ago
													
												
												

													
24 Things to See and Do in Italy this Season.
												
											
										
								
								

									
										

											
										
										
 
												Jennifer Reid
						    1m ago
												
											
										
										
										

											

												
24 Things to See and Do in Italy this Season.
											
											
										
									
								
							
					 

Gallery

Video

					 
							

									
  
  
								
	
										play_fill
										

								
					 
					  

Tabs

					  
					  

  
         

            Tab 1
            Tab 2
         
         

            

           	   
			   Tab 1 Content 
			        
			
			
            
            

						 Tab 2 Content 
           
			  
            
            

            
         
    
          
    
      
					  

Login Form

						
						

								

									

										

											
Username or Email
											

												
												
											
										
									
									

										

											
Password
											

												
												
											
										
									
									Forgot Password?
								
								log In
								
								
							
						
						

Registration Form

						
						

								

									

										

											
Full Name
											

												
												
											
										
									
									

										

											
Email
											

												
												
											
										
									
									
									

										

											
Password
											

												
												
											
										
									
									
								
								Sign Up
								
							
						
						

Forgot Password Form

							
							

								  

									  

									  

										

										  

											
										  
										
									  
									
								
We will send you reset password
								instructions email.
								  

																
								Reset Password

																							
								  
								
						
						

Search Form

								

						
							

								
								
							
						 mic	
							
						
						

Is this template a WordPress Theme?
No. This is an HTML mobile template, but you a free to convert it into a WordPress Theme.

Do you provide support?
Yes, I am available to provide support . I will be happy to help you if you have any questions, difficulties or need help with customization. Simple contact me via my Evanto Profile.

How can I adapt the template to another color?
By adding CSS class and minor css changes, everything is explained in the documentation.

Are images included?
No, images are for purpose demo only.

Sources and Credits

• Font:
  • Roboto Slab https://fonts.google.com/specimen/Roboto+Slab
  • Roboto https://fonts.google.com/specimen/Roboto
  • PT Serif https://fonts.google.com/specimen/PT+Serif
• Icons https://framework7.io/icons/
• Images & Graphics:
  • Elements Envato – https://elements.envato.com
  • Unsplash – https://unsplash.com
  • Pixabay – https://pixabay.com

Note: All the images are display only, not included in the main download package. All images are just used for Preview Purpose Only. They are not part of the template and NOT included in the final purchase files.

Thanks for showing interest in our News App. Should you have any additional questions, doubts or need support, please contact us via our envanto profile. Also feel free to suggest new pages that You think we need to add in our next release.