-
Notifications
You must be signed in to change notification settings - Fork 0
/
README.html
108 lines (77 loc) · 5.19 KB
/
README.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<h1 id="semantique">Semantique</h1>
<p>Building on Semantique by olefrederick, this is Wordpress theme takes Foundation’s semantic sensibilities further by incorporating the Susy Grid Framework for layout, to provide a broader range of grid optoins, such as margin AND padding based gutters, row-less layouts, gallery mixins and a vast range of contextually set options. </p>
<p>Please fork, copy, modify, delete, share or do whatever you like with this.</p>
<h2 id="requirements">Requirements</h2>
<p>Semantique uses <a href="http://Sass-lang.com/">Sass</a> (CSS with superpowers). In short, Sass is a CSS pre-processor that allows you to write styles more effectively and tidy.</p>
<p>YOu can use your preferred compiler, node or GUI apps such as Codekit or Prepros</p>
<p>If you have not worked with a Sass-based workflow before, I would recommend reading <a href="https://Semantique.olefredrik.com/posts/tutorials/Semantique-for-beginners">Semantique for beginners</a>, a short blog post that explains what you need to know.</p>
<h2 id="quickstart">Quickstart</h2>
<h3 id="1.clonetherepositoryandinstallwithnpm">1. Clone the repository and install with npm</h3>
<pre><code class="bash">$ cd my-wordpress-folder/wp-content/themes/
$ git clone https://github.com/timoti/Semantique.git
$ cd Semantique
$ npm install
</code></pre>
<h3 id="2.whileyoureworkingonyourprojectrun:">2. While you’re working on your project, run:</h3>
<pre><code class="bash">$ npm run watch
</code></pre>
<p>If you want to take advantage of browser-sync (automatic browser refresh when a file is saved), simply open your Gulpfile.js and put your local dev-server address (e.g localhost) in this field <code>var URL = '';</code> , save the Gulpfile and run
<code>bash
$ npm run watch
</code></p>
<h3 id="3.forbuildingalltheassetsrun:">3. For building all the assets, run:</h3>
<pre><code class="bash">$ npm run build
</code></pre>
<p>Build all assets minified and without sourcemaps:
<code>bash
$ npm run production
</code></p>
<h3 id="styles">Styles</h3>
<ul>
<li><p><code>style.css</code>: Do not worry about this file. (For some reason) it’s required by WordPress. All styling are handled in the Sass files described below</p></li>
<li><p><code>assets/scss/foundation.scss</code>: Make imports for all your styles here</p></li>
<li><p><code>assets/scss/global/*.scss</code>: Global settings</p></li>
<li><p><code>assets/scss/components/*.scss</code>: Buttons etc.</p></li>
<li><p><code>assets/scss/modules/*.scss</code>: Topbar, footer etc.</p></li>
<li><p><code>assets/scss/templates/*.scss</code>: Page template spesific styling</p></li>
</ul>
<p>Please note that you <strong>must</strong> run <code>npm run build</code> or <code>npm run watch</code> in your terminal for the styles to be copied and concatenated. See the <a href="https://github.com/timoti/Semantique/blob/master/gulpfile.js">Gulpfile.js</a> for details</p>
<h3 id="scripts">Scripts</h3>
<ul>
<li><code>assets/javascript/custom</code>: This is the folder where you put all your custom scripts. Every .js file you put in this directory will be minified and concatenated one single .js file. (This is good for site speed and performance)</li>
</ul>
<p>Please note that you must run <code>npm run build</code> or <code>npm run watch</code> in your terminal for the scripts to be copied and concatenated. See <a href="https://github.com/timoti/Semantique/blob/master/gulpfile.js">Gulpfile.js</a> for details</p>
<h3 id="themainstylesandscriptsgeneratedbythebuild">The main styles and scripts generated by the build</h3>
<p>Version control on these files are turned off because they are automatically generated as part of the build process.</p>
<ul>
<li><p><code>assets/stylesheets/foundation.css</code>: All Sass files are minified and compiled to this file</p></li>
<li><p><code>assets/stylesheets/foundation.css.map</code>: CSS source maps</p></li>
<li><p><code>assets/javascript/vendor</code>: Vendor scripts are copied from <code>assets/components/</code> to this directory. We use this path for enqueing the vendor scripts in WordPress.</p></li>
</ul>
<h3 id="checkforwordpresscodingstandards">Check For WordPress Coding Standards</h3>
<p>Foundation comes with everything you need to run tests that will check your theme for WordPress Coding Standards. To enable this feature you’ll need to install PHP Codesniffer, along with the WordPress Coding Standards set of “Sniffs”. You’ll need to have <a href="https://getcomposer.org/">Composer</a> To install both run the following:
<code>bash
$ composer create-project wp-coding-standards/wpcs:dev-master --no-dev
</code>
When prompted to remove existing VCS, answer Yes by typing <code>Y</code>.</p>
<p>Once you have installed the packages, you can check your entire theme by running:
<code>bash
$ npm run phpcs
</code></p>
<p>If there are errors that Code Sniffer can fix automatically, run the following command to fix them:
<code>bash
$ npm run phpcbf
</code></p>
<h2 id="tutorials">Tutorials</h2>
<ul>
<li><a href="http://foundation.zurb.com/docs/">Zurb Foundation Docs</a></li>
<li><a href="http://codex.wordpress.org/">WordPress Codex</a></li>
</ul>
</body>
</html>