CreaSoon Documentation

Installing and Using PostCSS

This process will guide you how to easily install and use PostCSS with command line.

1. Install node.js to your computer. Note, that Windows XP is not supported.
2. After successful installation, open the Node.js command prompt from you installed applications. Alternatively you can just run a command line in your operating system.
3. Now we need to install the PostCSS. In the opened command line enter npm install -g postcss -g postcss-cli. This will install PostCSS and PostCSS-CLI (command line interface)
4. The next step is to install required PostCSS plugins. Again, into command line enter this: npm install -g autoprefixer -g postcss-mixins -g postcss-nesting -g postcss-import -g precss -g postcss-hexrgba -g postcss-conditionals -g postcss-for -g postcss-pixels-to-rem -g postcss-hocus -g postcss-sass-color-functions -g postcss-remove-root -g postcss-if-media -g css-mqpacker -g perfectionist . This will install all the plugins we have used.
5. You can now test, if your PostCSS is running by entering postcss --help into command line
6. Now you need to navigate into directory with your template. We'll use command line again. For example, your template is in this path: c:/websites/cryptonex. But PostCSS (.pcss) files are placed deeper in the assets/pcss folder. So the full path is c:/websites/cryptonex/assets/pcss. So enter the path to your template \path\to\assets\pcss. In our example enter this to command line: \websites\cryptonex\assets\pcss
7. The final step is to compile the .pcss files into .css. Enter this into command line: postcss pcss/style.pcss -o css/style.css --watch --no-map

Thanks to --watch flag, the last command allows you to edit .pcss file without reentering the command. It will automatically determine that the file is changed and recompiles it.

Setup a path to PHP file

In your <form> element you need to specify a path to the .php file that will handle the email sending using data-php-path attribute.
As a default it is assets/php/email.php.

<form class="ts-form ts-form-email" data-php-path="assets/php/email.php">
<div class="form-group">
<label for="name">Your Name</label>
<input type="text" class="form-control" id="name" name="name" required>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Send a Message</button>
</div>
</form>

Note: You can use different .php file for each form. For example one for contact form and another for subscribe form.

Setup a Receiving Email Address

You have to setup your own email address for email receiving. As a default it is hello@example.com and it is located in the assets/php/email.php.
How to change the address:

Go to assets/php/email.php and find $to = 'hello@example.com'; and change the address to your own.

Create a Map Element

To use a Google Maps on your site, you need to create a map element with map class and give it a unique ID first:

<div id="map-element" class="map"></div>

Get a Google Maps API Key

You have to obtain your unique API key for the Google Map, otherwise you can see this error:

To get an API key:

• Go to https://developers.google.com/maps/documentation/javascript/get-api-key#get-an-api-key
• Click
  Get a Key
• After you have successfully obtained a key, open an HTML page with your map
• Scroll to very bottom where the <script> tags are
• Find <script src="http://maps.google.com/maps/api/js?key=YOUR_API_KEY"></script>
• Replace YOUR_API_KEY with your new API key

Configuring the Map

You can set center of the map, marker and map style. In the very bottom of the HTML file with the map element you can find:

<script>
var latitude = 34.038405;
var longitude = -117.946944;
var markerImage = "assets/img/map-marker-w.png";
var mapElement = "map-element";
var mapStyle = [{"featureType":"all","elementType":"labels.text.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#424b5b"},{"weight":2},{"gamma":"1"}]},{"featureType":"all","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"geometry","stylers":[{"weight":0.6},{"color":"#545b6b"},{"gamma":"0"}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#545b6b"},{"gamma":"1"},{"weight":"10"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#666c7b"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#545b6b"}]},{"featureType":"road","elementType":"geometry","stylers":[{"color":"#424a5b"},{"lightness":"0"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#666c7b"}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#2e3546"}]}];
google.maps.event.addDomListener(window, 'load', simpleMap(latitude, longitude, markerImage, mapStyle, mapElement));
</script>

• var latitude latitude of the map center
• var longitude longitude of the map center
• var markerImage path to marker image. You can choose between map-marker.png (black marker) and the map-marker-w.png (white marker).
• mapElement ID of the map element
• mapStyle color theme of the map. You can find more on Snazzy Maps