Cant Load Default Kitchen-Sink Examples With CSS

1

Hey, I am new to Framework 7. I downloaded the latest version of F7, but when I copy file s to a folder “F7 App” in this directory C:\wamp64\www\F7 App.

I made sure that “F7 App” has all folders directly. Eg. Opening it shows you ‘dist’,‘kitchen-sink’,’.github’ and several others. But when i launch a 'kitchen-sink" index.html, it opens in my browser plainly without any CSS, or even formatted as a mobile app. I t simply opens as normal unstyled HTML. I am stranded at my very first trial of this awesome framework, please help me. Thank you.

How do I launch examples with my very first framework 7 app.I am not sure whether I am clear enough, if anyone needs clarification, I am here. Thanks once again.

final%20f7
final f7.jpg2279×708 670 KB

2

You are missing the build/ directory because you haven’t built the project yet. Just follow the instructions here, reload the page and it should work.

2 Likes
3

Hey, thanks for answering my question. I would like to know where I can download the build folder. The documentation confused me. I have never installed from bower or composer. I cant find anything helpful on google. I therefore would like you to direct me to where I can find a better explanation or better still Help me do an alternative. I am basically used to downloading and extracting files to their specific folders. Thanks

1 Like
4

You need to have nodejs installed which includes npm to be able to run those commands I linked to.

If all you need to accomplish is getting the kitchen sink up and running, just rename the dist folder to build and it should work. :wink:

2 Likes
5

Hello, i am happying in try help you.

Ok, begin.

Requeriments.

  • Nodejs
  • Npm
  • Apache Cordova
  • Android Studio
  • JAVA SDK 1.8
  • Framework7

You have a question in install requeriments? Sorry for my bad english.

6

@JhowJhoe, thanks very much. I have installed nodejs.

How do I use npm to run these commands

  • npm install --global gulp
  • npm install
  • npm run build:dev

and where does it create a “build” folder?

7

What Plataform? Windows, Mac or Linux?

8

@st643, Ok thanks alot for your time. I would want to know how tp begin installing my f7 and begin serious coding on my app. If all I could get this up and running, I would be one happy man. The videos on youtube are for version 1 which makes it difficult. I have already installed nodejs.

Would you mind guiding me to install using npm and where to locate the build/folder directory?

Thanks alot once again

1 Like
9

Windows 10 @JhowJhoe.

1 Like
10

So come on …

Next, if you have already installed NodeJS, NPM and Apache Cordova, Android Studio, Java SDK 1.8 … So let’s go to the coding process.

Next, download or clone repository of Framework7

https://github.com/framework7io/framework7

Now, in your file, let’s point FRAMEWORK7.

In the framework7/kitchen-sink/

Change line 11 of the index.html file to the path of your Framework7

<link rel="stylesheet" href="CAMINHO/css/framework7.css">

In the same file change line 604 of the index.html file to the path of your Framework7

<script src="CAMINHO/js/framework7.js"> </script>

Example path:

<script src="DIST/js/framework7.js"> </script>

11

@JhowJhoe, thanks very much bro. Let me try that

I will tell you …

1 Like