Open Rokuto opened 6 years ago
camelCase
. Ex: let myVariablecamelCase
. Ex: const myConstantcamelCase
. Ex: myFunction () {}camelCase
and capitalize the first character. Ex: class MyClass {}camelCase
and palce an _
in front. Ex: _userChange () {}-
for delimiting the words and place the word page
in front. Ex: page-not-found-
for delimiting the words. Ex: header-navigationsrc/pages
following the naming convention on creating a page.template.js
this will be used for writing html.
b. Create a new file named style.styl
this will be used for writing stylus css
c. Create a new file named index.js
this will be used for writing the functions used in the page.spa-lite.config.js
. In the code:
const fragments = {
'page-home': 'src/pages/page-home/index.js',
'page-not-found': 'src/pages/page-not-found/index.js'
}
add another property with a key that is the same as the name of the page and has a value of the location of the index.js
of the page. Example: 'page-about': 'src/pages/page-about/index.js'
spa-lite.config.js
. In the code:
const routes = [
{
route: '/',
page: 'page-home'
},
{
route: 'no-page',
page: 'page-not-found'
}
];
add another object:
{
route: '/about', // the route of the page
page: 'page-about' // the page location
}
src/components
for dumb components
or at src/smart-components
for smart components
. Note: Do following the naming convention on creating a component.template.js
this will be used for writing html.
b. Create a new file named style.styl
this will be used for writing stylus css
c. Create a new file named index.js
this will be used for writing the functions used in the component.index.js
then use the tag of your component in template.js
. Questions:
Use grid for any two-dimentional layout and flex for one-dimentional layout. To understand the reasons you may read: Should I use Grid or Flexbox and The ultimate CSS battle: Grid vs Flexbox. To understand Grid and Flex you may read: A Complete Guide to Grid, CSS Grid Layout, A Complete Guide to Flexbox, and Flex.
Create the coding conventions of spa-lite. Things that will be set are: