Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 17 additions & 16 deletions .versions
Original file line number Diff line number Diff line change
@@ -1,17 +1,18 @@
babel-compiler@7.0.5
babel-runtime@1.2.2
base64@1.0.10
dynamic-import@0.3.0
ecmascript@0.10.0
ecmascript-runtime@0.5.0
ecmascript-runtime-client@0.6.2
ecmascript-runtime-server@0.5.0
babel-compiler@7.2.4
babel-runtime@1.3.0
base64@1.0.11
dynamic-import@0.5.0
ecmascript@0.12.4
ecmascript-runtime@0.7.0
ecmascript-runtime-client@0.8.0
ecmascript-runtime-server@0.7.1
ejson@1.1.0
http@1.4.0
meteor@1.8.2
modules@0.11.3
modules-runtime@0.9.1
promise@0.10.1
semantic:ui@2.3.1
semantic:ui-data@2.3.1
url@1.2.0
fetch@0.1.0
inter-process-messaging@0.1.0
meteor@1.9.2
modern-browsers@0.1.3
modules@0.13.0
modules-runtime@0.10.3
mrmowgli:fomantic-ui@2.7.2
mrmowgli:fomantic-ui-data@2.7.2
promise@0.11.2
2 changes: 1 addition & 1 deletion LICENSE
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
The MIT License (MIT)

Copyright (c) 2015 Frederic Lemay
Copyright (c) 2015 Frederic Lemay, Andre Lewis

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand Down
76 changes: 43 additions & 33 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,21 +1,31 @@
Semantic UI for Meteor
Fomantic UI for Meteor
======================

This package integrates [Semantic UI](http://semantic-ui.com) into Meteor and lets you configure what parts you need.
This package integrates [Fomantic UI](https://fomantic-ui.com) into Meteor and lets you configure what parts you need.

Why Fomantic? Semantic as a project has a wonderful set of tools, however it is no longer directly maintained. Fomantic is updating packages currently, and hopes to merge back to Semantic-ui at some point. However as updates happen on Fomantic, it may eventually replace the Semantic-ui project. In the meantime, this provides a way to include up to date versions of Semantic-UI.

# INITIAL COMMIT! WIP!
This is getting a makeover on the fomantic-conversion branch. Master is still a basic fork.
Updates will be merged here once a core set of conversions are made.

These packages can't currently be installed as directed, as the fomantic organization for atmosphere has to be created.

Once this has been completed, it shall be transferred to the Fomantic organization.

Installation
------------
### Meteor <1.3

meteor add semantic:ui flemay:less-autoprefixer jquery
meteor add mrmowgli:fomantic-ui flemay:less-autoprefixer

Continue to the Usage section.

### Meteor 1.3+

meteor remove standard-minifier-css

meteor add semantic:ui juliancwirko:postcss less jquery
meteor add mrmowgli:fomantic-ui juliancwirko:postcss less

Add the following to `package.json`
```
Expand All @@ -38,23 +48,23 @@ After saving the changes to `package.json`, run:
Usage
-----

1. Create an empty `custom.semantic.json` inside a `/client/` folder somewhere in your project.
Example: `/client/lib/semantic-ui/custom.semantic.json`.
1. Create an empty `custom.fomantic.json` inside a `/client/` folder somewhere in your project.
Example: `/client/lib/fomantic-ui/custom.fomantic.json`.
2. Start meteor
3. Edit the file `custom.semantic.json` to select only the definitions and themes you want
3. Edit the file `custom.fomantic.json` to select only the definitions and themes you want
Example: set `themes` `basic` to `true`, leave `default` as `true`
4. Save the file and it will generate Semantic UI
5. Check the [generated-structure table](https://github.com/Semantic-Org/Semantic-UI-Meteor#generated-structure) below for editable files and folders.
4. Save the file and it will generate Fomantic UI
5. Check the [generated-structure table](https://github.com/Fomantic-Org/Fomantic-UI-Meteor#generated-structure) below for editable files and folders.

> IMPORTANT: If you are happy with the default values you will NEED to remove `.custom.semantic.json` to generate Semantic UI. (see Generating Trigger)
> IMPORTANT: If you are happy with the default values you will NEED to remove `.custom.fomantic.json` to generate Fomantic UI. (see Generating Trigger)

> NOTE: Another way to use ONLY the default values is to use this package: https://atmospherejs.com/semantic/ui-css
meteor add semantic:ui-css
> NOTE: Another way to use ONLY the default values is to use this package: https://atmospherejs.com/fomantic/ui-css
meteor add fomantic:ui-css

Getting Started & Initializing Modules
-----
Semantic UI requries some components to be initialized or they will not work (Dropdowns, Menus, Accordions, etc)
Refer to the Usage sections in a module on how to initialize each element eg: [Semantic UI Accordion Usage](http://semantic-ui.com/modules/accordion.html#/usage)
Fomantic UI requries some components to be initialized or they will not work (Dropdowns, Menus, Accordions, etc)
Refer to the Usage sections in a module on how to initialize each element eg: [Fomantic UI Accordion Usage](http://fomantic-ui.com/modules/accordion.html#/usage)

Example of initializing a dropdown using a template helper
```javascript
Expand All @@ -79,10 +89,10 @@ Template.myDropdowns.onRendered({
})
```

custom.semantic.json
custom.fomantic.json
--------------------

`custom.semantic.json` is the most important file. If it is empty, `semantic:ui` will generate the content with all the definitions and themes. By default, it sets to true all definitions and the core-theme "default"(which should always be true).
`custom.fomantic.json` is the most important file. If it is empty, `fomantic:ui` will generate the content with all the definitions and themes. By default, it sets to true all definitions and the core-theme "default"(which should always be true).

```javascript
{
Expand All @@ -106,7 +116,7 @@ custom.semantic.json
```
Changing any value will trigger the package to regenerate the files/folders accordingly.

Be aware when you strip away definitions. The `site` definition is always needed and so is the `default` theme. Here an example of the most minimal `custom.semantic.json` file.
Be aware when you strip away definitions. The `site` definition is always needed and so is the `default` theme. Here an example of the most minimal `custom.fomantic.json` file.
```javascript
{
"definitions": {
Expand All @@ -122,15 +132,15 @@ Be aware when you strip away definitions. The `site` definition is always needed
Generated Structure
-------------------

This package generates the following structure based on `custom.semantic.json`
This package generates the following structure based on `custom.fomantic.json`

```
+- definitions/
+- site/
+- themes/
|- .custom.semantic.json
|- custom.semantic.json
|- semantic.less
|- .custom.fomantic.json
|- custom.fomantic.json
|- fomantic.less
|- theme.config.import.less
|- theme.import.less
```
Expand All @@ -141,39 +151,39 @@ File/Folder | Description | Generated | Editable
--- | --- | --- | ---
definitions/ | contains the `less` and `javascript` definitions for each component | always | no
site/ | contains your current site's theme | only if it does not exist | yes
themes/ | contains *pre-packaged themes* including Semantic's default theme | always | no
.custom.semantic.json | copy of custom.semantic.json (see Generating Trigger) | always | no
custom.semantic.json | contains definitions and themes to be included or not | only if the file is empty | yes
semantic.less | imports the definitions | always | no
themes/ | contains *pre-packaged themes* including Fomantic's default theme | always | no
.custom.fomantic.json | copy of custom.fomantic.json (see Generating Trigger) | always | no
custom.fomantic.json | contains definitions and themes to be included or not | only if the file is empty | yes
fomantic.less | imports the definitions | always | no
theme.config.import.less | defines which theme to use per components | only if the file does not exist | yes
theme.import.less | imports the right themes | always | no

### site/

This folder contains your current site's theme. It is generated only when it does not exist. Therefore if you change `custom.semantic.json` to turn definitions/themes on/off, then it will not affect **site/**. You will either need to add/remove files in **site/** or remove the **site/** folder so it can be regenerated again.
This folder contains your current site's theme. It is generated only when it does not exist. Therefore if you change `custom.fomantic.json` to turn definitions/themes on/off, then it will not affect **site/**. You will either need to add/remove files in **site/** or remove the **site/** folder so it can be regenerated again.

Generating Trigger
------------------

Every time Meteor starts (or refreshes) it calls the package `semantic:ui` to generate Semantic UI.
Every time Meteor starts (or refreshes) it calls the package `fomantic:ui` to generate Fomantic UI.

The package has a simple mechanism based on the difference of `custom.semantic.json` and `.custom.semantic.json` to avoid generating all the Semantic UI files and folders each time Meteor starts (or refreshes).
The package has a simple mechanism based on the difference of `custom.fomantic.json` and `.custom.fomantic.json` to avoid generating all the Fomantic UI files and folders each time Meteor starts (or refreshes).

Therefore if the file `.custom.semantic.json` does not exist or it is different from `custom.semantic.json` then it will generate Semantic UI.
Therefore if the file `.custom.fomantic.json` does not exist or it is different from `custom.fomantic.json` then it will generate Fomantic UI.

Dependencies
------------
(Meteor <1.3) **[flemay:less-autoprefixer](https://atmospherejs.com/flemay/less-autoprefixer)**: Semantic UI needs autoprefixer to be compiled.
(Meteor <1.3) **[flemay:less-autoprefixer](https://atmospherejs.com/flemay/less-autoprefixer)**: Fomantic UI needs autoprefixer to be compiled.

> **Note 1:** You can choose any less-autoprefixer package.

> **Note 2:** Since the flemay:less-autoprefixer package compiles `LESS` files you don't need the `less` package.

(Meteor 1.3+) **[juliancwirko:postcss](https://atmospherejs.com/juliancwirko/postcss)**: Semantic UI needs autoprefixer for adding vendor prefixes.
(Meteor 1.3+) **[juliancwirko:postcss](https://atmospherejs.com/juliancwirko/postcss)**: Fomantic UI needs autoprefixer for adding vendor prefixes.

(Meteor 1.3+) **[less](https://atmospherejs.com/meteor/less)**: is needed to compile the `LESS` files to `CSS` when building.

**[semantic:ui-data](https://atmospherejs.com/semantic/ui-data)** is being used to get Semantic UI files.
**[fomantic:ui-data](https://atmospherejs.com/fomantic/ui-data)** is being used to get Fomantic UI files.

Contributing
-------------
Expand All @@ -187,5 +197,5 @@ MIT license

Credits and Acknowledgements
----------------------------

**[semantic:ui](https://github.com/Semantic-Org/Semantic-UI-Meteor)**: fomantic:ui has been forked from the official Semantic-Org/Semantic-UI-Meteor repository.
**[nemo64:bootstrap](https://atmospherejs.com/nemo64/bootstrap)**: semantic:ui has been inspired by nemo64:bootstrap. It uses a very similar approach.
18 changes: 9 additions & 9 deletions data/custom-semantic-data.js → data/custom-fomantic-data.js
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
var _ = Npm.require('lodash');

var customSemanticData = {};
customSemanticData.data = {};
var customFomanticData = {};
customFomanticData.data = {};

customSemanticData.filterDefinitions = function(strings, matcherFunc) {
customFomanticData.filterDefinitions = function(strings, matcherFunc) {
return filter(this.requiredDefinitionsNames(), strings, matcherFunc);
};

customSemanticData.requiredDefinitionsNames = function() {
customFomanticData.requiredDefinitionsNames = function() {
var definitionsNames = _.keys(this.data.definitions);
var that = this;
return _.filter(definitionsNames, function(name) {
return that.data.definitions[name];
});
};

customSemanticData.filterThemes = function(strings, matcherFunc) {
customFomanticData.filterThemes = function(strings, matcherFunc) {
return filter(this.requiredThemesNames(), strings, matcherFunc);
};

Expand All @@ -36,17 +36,17 @@ var filter = function(names, strings, matcherFunc) {
});
};

customSemanticData.requiredThemesNames = function() {
customFomanticData.requiredThemesNames = function() {
var themesNames = _.keys(this.data.themes);
var that = this;
return _.filter(themesNames, function(name) {
return that.data.themes[name];
});
};

customSemanticData.validate = function(definitionsData, themesData) {
customFomanticData.validate = function(definitionsData, themesData) {
var throwError = function(name) {
throw new Error('definition/theme "' + name + '" does not exist. Please update your custom.semantic.json file.');
throw new Error('definition/theme "' + name + '" does not exist. Please update your custom.fomantic.json file.');
};
_.each(_.keys(this.data.definitions), function(definitionName) {
if (!definitionsData.exists(definitionName)) {
Expand All @@ -60,4 +60,4 @@ customSemanticData.validate = function(definitionsData, themesData) {
});
};

semanticUiPackage.customSemanticData = customSemanticData;
fomanticUiPackage.customFomanticData = customFomanticData;
Loading