It will be ideal to have each block css encapsulated along with it so it became easier to copy & paste a block

Not a single form field has a label. These designs are not usable and the patterns presented should be discouraged.

I suggest adding a validation check like Nu Validator, aXe, lighthouse, etc. to show all the places this markup is invalid.

Add Changelog.md

Hello folks,
I download the zip. From /dist I tried the HTML files. Everything was broken.

I went in the code and I saw:
<link type="text/css" rel="stylesheet" href="../css/froala_blocks.css">

I changed it to:
<link type="text/css" rel="stylesheet" href="./css/froala_blocks.css">

and it worked. I did the same thing for the img paths.

It's the first time I tried a bootstrap library that brakes like this.

What should be the standard? ../css/froala_blocks.css"> or ./css/froala_blocks.css">

Cheers!

A list of design blocks to be added shortly:

• Blog Posts
• Blog Feeds
• Gallery
• Portfolio
• Sliders

Hello,

I've noticed that this project uses a custom license.

Unfortunately, not only custom licenses can be a barrier to adoption in some places (such as corporate environments), but this particular license also doesn't follow the Free Software Definition and the Open Source Definition, since it restricts the permitted use cases (among other issues).

It could also be argued that commercial use is not necessarily unethical.

Would you please consider switching to an open source license?

In the playground section on the Design Blocks homepage when you click on a design block screenshot, a larger version of the screenshot should be shown so I can see the design block more detailed. Right now the cursor changes to a pointer but when I click on a screenshot, nothing happens.

Create Vue components to ease the integration with Vue based apps.

There are really good phone and tablet template but nothing for a laptop

When I run gulp after npm install.
It returns scss not found error.

Reading through the license it does not seem to be compatible with the GPL license - is this intentional and a correct assumption?

Any reason why the work was not released under the terms of GPL or a compatible license like MIT?

Hi! Have you considered to create some timeline blocks? If not I'd be glad to contribute.

In the quickstart, it says one of the options is to:

Install with npm: npm install froala-design-blocks

But it is not obvious how to then use it to build your project.

Overall, the documentation seems lacking; when trying it out with a fresh clone, the best I could figure to do was copy-paste from the various block files into the index.html file. Is that the intended use?

Hi, i suggest you to switch the entire library to web components... no dependencies, framework agnostic, maintainable, css encapsulation, native and responsive design blocks ready to be used in your web or mobile apps for real.

While running the code for the first time after clone and npm install, I got the following error

/home/neo/open-source-dev/design-blocks/utils/index.js:23
async function makeScreenshotsByName(name, selector) {
      ^^^^^^^^

SyntaxError: Unexpected token function
    at createScript (vm.js:56:10)
    at Object.runInThisContext (vm.js:97:10)
    at Module._compile (module.js:542:28)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/home/neo/open-source-dev/design-blocks/gulpfile.js:8:13)

This was being caused as I have node 6.11.5, which does not support async.

I feel like this must be documented and alternatives such as transpiling the code using babel must be noted in the readme.

Hello all, I am new to Github and this is my first time installing a software using it. I followed ll the steps and I dont see to get it to install on my mac. I run the install on Terminal and I get this:

npm WARN enoent ENOENT: no such file or directory, open '/Users/PixarMediaMac/package.json'
npm WARN PixarMediaMac No description
npm WARN PixarMediaMac No repository field.
npm WARN PixarMediaMac No README data
npm WARN PixarMediaMac No license field.

I see a "Node_modules" folder on my mac but that does not open a software.

Thank you all.

This is still on Bootstrap 4, Beta (1), but Beta 2 of Bootstrap 4 has already been released. Please update.

Got this error after following instructions:

design-blocks/utils/index.js:23
async function makeScreenshotsByName(name, selector) {
^^^^^^^^

SyntaxError: Unexpected token function
at createScript (vm.js:56:10)
at Object.runInThisContext (vm.js:97:10)
at Module._compile (module.js:542:28)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object. (/Users/victorramirez/Desktop/Thinkful-2017/design-blocks/gulpfile.js:8:13)

Blocks such as Tabs + Accordions are much helpful for creating documentation. Can we see it added anytime soon?

And also is it possible to create our own blocks? If so can you please point to documentation?

So I downloaded the latest release, and when I open any .html file from the dist folder it displays like this - is it normal? Seems like it isn't:

I use Google Chrome.

Create Angular components to ease the integration with React based apps.

Hey @stefanneculai 👋

Bootstrap released their final v4.0.0 back in January. 💜
Would like to contribute some work I've started with 4.0 and now 4.1.
Hope you're interested in this update and some more cleanup around that.

📝 https://blog.getbootstrap.com/2017/12/28/bootstrap-4-beta-3/
📝 https://blog.getbootstrap.com/2018/01/18/bootstrap-4/
📝 https://blog.getbootstrap.com/2018/04/09/bootstrap-4-1/

Hi,
In the readme, we can see:

design-blocks/
├── dist/
│   ├── css/
│   │   ├── froala_blocks.css
│   │   └── froala_blocks.min.css

But in the zip file, I downloaded froala_blocks.min.css is not there. I don't mind creating the min.css myself but the readme is not representing the tree.

Cheers!

You should move each component into a .pug file and import / compile everything into a single .html document. That way people can install from NPM and require in the .pug components they want. This would be cleaner and upgradable with versions as you move forward.

Also side note this would satisfy the Vue community who use vue-loader

The font size in the template card is not mobile responsive.

For example in this PSD there is a clipping mask used for the dark frame. Although the PSD looks good in Photoshop, exporting it as SVG will simply ignore the clipping mask.

Currently, there is a script which can be used to take screenshots, however the process is quite painful because each file should be saved manually. We're using the dom-to-image library to take the screenshots, but Font Awesome and Google Maps do not render correctly.

Ideally, we'd have a script which used PhantomJS or JSDom to make the screenshots without opening the browser.

Hey there,

How come all the demos on the site are images and not the actual design-blocks?

• problem with icons on mobile in content with “works in every browser”
• problem with client logos in CTA on mobile
• content with col-fill-left has a problem on mobile
• problem with footer 3 on xs
• problem with some headers on small screens

(Please excuse my poor English as I'm not a native speaker :) )

So I opened this issue to sort of explain what I'm working on in a Pull Request I'm going to push soon.

RTL support is already at a great level on the CSS level which is awesome! However the framework depends on Bootstrap which is famously known for ditching RTL support despite continuous efforts from the community to add it. So there are many additional Bootstrap plugins adding RTL which is nice, however most maintainers get tired and those plugins get outdated fast.

So the solution I came up with was to ditch horizontal gravity classes that are coming from bootstrap and replace them with dynamic classes.

Let me explain:

Basically horizontal gravity classes are the ones ending with -left and -right, and their job in bootstrap is solely add text-align:left and its counterpart. They come in different sizes and shapes like text-left, text-sm-left, text-lg-left, etc...
I am not sure why do they have multiple names since their job is to add the one same line of code that is of text-align.

So, I removed those from the HTML and replaced them with the dynamic gravity classes. Those are ones that has start and end keywords. The idea is inspired from CSS3 spec that advises to use start and end keywords instead of left and right because they add better RTL support. How?

Well, left will always be left in LTR and RTL contexts, however the keyword start in LTR refers to the left side of the screen, while refers to the right side in case of RTL (since RTL is a right-to-left script language). and vice versa with the end keyword.

There's a little more to it so I'll update this issue as I make progress and when ultimately pushing a PR.

Thanks

Create React components to ease the integration with React based apps.

None of the navbars toggle and show the menus. The icons do not show up on firefox either.

lines 93 & 95 in /dist/css/froala_block.css has the SASS variables $block-padding present. This creates invalid CSS.

I have started using this project today and I absolutely love it. I would like to suggest to support for Froala on CDN, it will be nice if we can just add the CDN to a project and copy and paste the code and see everything working well.

It would be great if you could pack and mantain this on a rails gem, something aligned with https://github.com/twbs/bootstrap-rubygem

Thanks!

It would be very useful to have some templates built based on the design blocks. The templates would a very good starting point for those using the Froala Design Blocks.

npm ERR! Windows_NT 10.0.17025
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "gulp"
npm ERR! node v6.11.0
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] gulp: gulp
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] gulp script 'gulp'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the froala-design-blocks package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! gulp
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs froala-design-blocks
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls froala-design-blocks
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! C:\Users...\Desktop...\Free Templates\design-blocks\npm-debug.log

Help?

I do development and use a public hosting company---as do the majority of developers. I don't have---and don't know how to use "npm". Would you consider making a simple zip of Froala that can be used by us "unwashed?"

Thanks for your consideration

I've had a look at this project for a bit and it looks really great, but one thing I don't quite understand.

While everything is built on top of bootstrap, it doesn't look like it's integrated into bootstrap.

If I use a bootstrap plugin that uses default buttons like btn-primary and btn-warning I'll have a different style on those buttons. Why not import the bootstrap scss and use their variables?

What's your idea about using the design blocks with other bootstrap components to achieve a consistent look'n'feel?