froala / design-blocks Goto Github PK
View Code? Open in Web Editor NEWA set of 170+ Bootstrap based design blocks ready to be used to create clean modern websites.
Home Page: https://www.froala.com/design-blocks
License: Other
A set of 170+ Bootstrap based design blocks ready to be used to create clean modern websites.
Home Page: https://www.froala.com/design-blocks
License: Other
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?
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.
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.
Create React components to ease the integration with React based apps.
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)
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!
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.
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?
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!
It will be ideal to have each block css encapsulated along with it so it became easier to copy & paste a block
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?
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.
Create Angular components to ease the integration with React based apps.
This is still on Bootstrap 4, Beta (1), but Beta 2 of Bootstrap 4 has already been released. Please update.
Hey there,
How come all the demos on the site are images and not the actual design-blocks?
Hi! Have you considered to create some timeline blocks? If not I'd be glad to contribute.
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/
(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.
Thanks
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.
When I run gulp
after npm install
.
It returns scss not found error.
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?
Create Vue components to ease the integration with Vue based apps.
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.
The font size in the template card is not mobile responsive.
Add Changelog.md
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?
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
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.
None of the navbars toggle and show the menus. The icons do not show up on firefox either.
There are really good phone and tablet template but nothing for a laptop
lines 93 & 95 in /dist/css/froala_block.css has the SASS variables $block-padding present. This creates invalid CSS.
A list of design blocks to be added shortly:
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?
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.
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.
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
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!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.